AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.99 €
Voir le deal

    QEEL avec tableau de partenaires et image de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 13:18

    Rappel du premier message :



    Qui est en ligne



    Ceci est un code de QEEL crée suite à la Demande de Fluff', ici.

    Version phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    L'image de fond n'est pas fournie, et il se peut que vous ayez, selon votre image, besoin de changer les positions!
    L'image en exemple fait 800*682px (les dimensions peuvent être changées dans le CSS)


    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_body /!\ Mettez juste à la place du QEEL, ne remplacez pas le template par ce code! /!\ :

    Code:
       <!-- BEGIN disable_viewonline -->
        <div id="qeel">
          <div id="groupes_qeel">
            <span class="gensmall">{LEGEND} :&nbsp;{GROUP_LEGEND}</span>
          </div>
          <div id="infos_qeel">
            <span class="gensmall">
              <span id="post_nyo">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/Nos membres ont posté un total de/,"Nos archives comptent");</script><script type="text/javascript">document.getElementById('post_nyo').innerHTML=document.getElementById('post_nyo').innerHTML.replace(/messages/,"missives ");</script></span>.
              <span id="users_nyo">{TOTAL_USERS}</span>
              <script type="text/javascript">document.getElementById('users_nyo').innerHTML=document.getElementById('users_nyo').innerHTML.replace(/membres enregistrés/,"citoyens, ");</script>.
              <span id="new_user_nyo">{NEWEST_USER}</span>
              <script type="text/javascript">document.getElementById('new_user_nyo').innerHTML=document.getElementById('new_user_nyo').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"dont la nouvelle recrue");</script>
            </span>
            <br/><br/>
            <span class="gensmall">
              <span id="online_users_nyo">{TOTAL_USERS_ONLINE}</span>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/il y a en tout/,"Il y a en tout, se promenant dans le royaume");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateur en ligne/,"personne");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/utilisateurs en ligne/,"personnes");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/::/,"soit");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistré/,"citoyen");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Enregistrés/,"citoyens");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisible/,"esprit");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invisibles/,"esprits");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invité/,"recrue potentielle .");</script>
              <script type="text/javascript">document.getElementById('online_users_nyo').innerHTML=document.getElementById('online_users_nyo').innerHTML.replace(/Invités/,"recrues potentielles .");</script>
            </span>
            <br /><br/>
            <span class="gensmall">
              <span id="step">{LOGGED_IN_USER_LIST}</span>
              <script type="text/javascript">document.getElementById('step').innerHTML=document.getElementById('step').innerHTML.replace(/Utilisateurs enregistrés/,"En train de parcourir les lieux ");</script>
              <table id="connected">
                {L_CONNECTED_MEMBERS}
                <script type="text/javascript">jQuery('#connected span.gensmall').html(jQuery('#connected span.gensmall').html().replace(/Membres connectés/,"Ils fûrent parmis nous"));</script>
                {L_WHOSBIRTHDAY_TODAY}
                {L_WHOSBIRTHDAY_WEEK}
              </table>
            </span>
          </div>
          <div id="position_partenaires_qeel">
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
            <a href="#" target="_blank"><img src="http://i71.servimg.com/u/f71/09/03/38/36/middle10.jpg" /></a>
          </div>
        </div>
        <!-- END disable_viewonline -->


    Le CSS:

    Code:
       /***** DÉBUT QEEL *******/
        /* Permet de mettre l'image de fond du QEEL, sa grandeur et la couleur d'écriture. */
        #qeel {
          width: 800px;
          height: 682px;
          margin: auto;
          position: relative;
          color: #AAAAAA;
          background-image: url('URL_IMAGE_ICI');
        }

        /* Donne sa couleur au texte */
        #qeel .gensmall {
          color: #AAAAAA;
        }

        /* Permet de mettre en place les groupes & donner une largeur max + les caler vers la droite */
        #groupes_qeel {
          position: absolute;
          top: 95px;
          left: 300px;
          width: 450px;
          font-weight: bold;
          text-align: right;
        }

        /* Permet de positionner toutes les infos du QEEL & donner une largeur max */
        #infos_qeel {
          position: absolute;
          top: 180px;
          left: 375px;
          width: 350px;
        }

        /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
        #connected {
          text-align: justify;
          width: 100%;
          background: none;
        }

        /* Permet de retirer le fond des connectés ces dernières xx heures et pour les anniversaires */
        #connected .row1 {
          text-align: justify;
          width: 100%;
          background: none;
        }

        /* Permet de positionner les partenaires */
        #position_partenaires_qeel {
          position: absolute;
          top: 506px;
          left: 138px;
          width: 522px;
          height: 118px;
        }

        /* Permet de mettre en place les images de partenaire et faire l'effet. */
        #position_partenaires_qeel img {
          display: inline-block;
          margin: 2px;
          opacity: 0.8;
          -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
          transition: all ease 1s;
        }

        /*Permet de faire l'effet sur les partenaires*/
        #position_partenaires_qeel img:hover {
          opacity: 1;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          transition: all ease 1s;
        }
        /***** FIN QEEL *******/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Si vous avez des problèmes avec ce LS, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    babouinermite
    babouinermite
    MasculinAge : 32Messages : 18

    Mer 14 Oct 2015 - 11:34

    Merci pour ce LS :)
    Shanoa
    Shanoa
    FémininAge : 26Messages : 64

    Dim 25 Oct 2015 - 19:50

    merci beaucoup
    Love_RPG
    Love_RPG
    FémininAge : 30Messages : 32

    Lun 2 Nov 2015 - 13:04

    Merci ♥
    Inoue Musaki
    Inoue Musaki
    FémininAge : 35Messages : 147

    Dim 8 Nov 2015 - 16:37

    Merci ^^
    MeowLowDee
    MeowLowDee
    FémininAge : 32Messages : 72

    Mer 11 Nov 2015 - 23:04

    Merci !
    Hayate kimitsu
    Hayate kimitsu
    MasculinAge : 31Messages : 30

    Sam 14 Nov 2015 - 22:56

    merci x)
    Dark Fairy
    Dark Fairy
    FémininAge : 26Messages : 244

    Mer 18 Nov 2015 - 19:02

    Merci!
    Glaçou
    Glaçou
    FémininAge : 22Messages : 117

    Ven 4 Déc 2015 - 17:51

    Merci beaucoup.
    Miawcormick
    Miawcormick
    FémininAge : 30Messages : 11

    Ven 4 Déc 2015 - 18:07

    Ce QEEL est vraiment très classe, bravo ! :)
    Cerhelion
    Cerhelion
    MasculinAge : 36Messages : 16

    Dim 6 Déc 2015 - 17:38

    Superbe! merci!
    AsadaSama
    AsadaSama
    FémininAge : 31Messages : 34

    Lun 7 Déc 2015 - 22:02

    Merci beaucoup :)
    Mimio
    Mimio
    FémininAge : 30Messages : 191

    Jeu 17 Déc 2015 - 18:05

    Merci, c'est super beau <3



    QEEL avec tableau de partenaires et image de fond - Page 9 134914Signazael2
    MaelStrhom
    MaelStrhom
    MasculinAge : 29Messages : 38

    Sam 19 Déc 2015 - 1:06

    merci
    Hancok
    Hancok
    FémininAge : 40Messages : 1495

    Lun 21 Déc 2015 - 10:20

    Coucou, merci pour ce sympathique qui est en ligne? .




    QEEL avec tableau de partenaires et image de fond - Page 9 A67g
    Jaspe
    Jaspe
    MasculinAge : 21Messages : 20

    Ven 25 Déc 2015 - 21:37

    Magnifique *étoiles dans les yeux*



    QEEL avec tableau de partenaires et image de fond - Page 9 654765signa4kit
    QEEL avec tableau de partenaires et image de fond - Page 9 1450976482097478900
    Merci beaucoup Alil' !

    QEEL avec tableau de partenaires et image de fond - Page 9 1448814505-ange-des-vents
    olibo31
    olibo31
    MasculinAge : 39Messages : 15

    Lun 4 Jan 2016 - 14:27

    je butine, je butine :) et j'aime bien celui ci
    Fuyuka
    Fuyuka
    FémininAge : 30Messages : 63

    Mar 12 Jan 2016 - 12:05

    J'aime beaucoup !!
    Yukihyo
    Yukihyo
    MasculinAge : 27Messages : 98

    Jeu 14 Jan 2016 - 2:55

    Merci !
    reshiram44
    reshiram44
    MasculinAge : 26Messages : 380

    Lun 18 Jan 2016 - 20:38

    merci



    Llariarith
    Llariarith
    FémininAge : 39Messages : 218

    Jeu 18 Fév 2016 - 19:15

    très joli, merci et bravo
    Ari
    Ari
    FémininAge : 23Messages : 109

    Ven 26 Fév 2016 - 16:42

    trop classe! merci!
    Waize
    Waize
    FémininAge : 26Messages : 34

    Mar 1 Mar 2016 - 22:20

    Merci :3
    FanDeFofo
    FanDeFofo
    MasculinAge : 47Messages : 16

    Mer 2 Mar 2016 - 17:35

    vnfgbgbfngnhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxf
    Vetrox
    Vetrox
    MasculinAge : 24Messages : 37

    Ven 18 Mar 2016 - 20:24

    merci
    defenrir
    defenrir
    MasculinAge : 41Messages : 105

    Sam 19 Mar 2016 - 18:41

    merchi =)
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 15:27