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.


    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 ^^



    andril
    andril
    FémininAge : 34Messages : 42

    Mar 21 Oct 2014 - 16:08

    Superbe ! Merci !!!
    avatar
    Chrono
    MasculinAge : 31Messages : 14

    Jeu 23 Oct 2014 - 1:27

    Merci
    Neverose
    Neverose
    FémininAge : 32Messages : 93

    Jeu 23 Oct 2014 - 10:02

    Maguenifique *vole et s'enfuit* merci =)



    QEEL avec tableau de partenaires et image de fond - Page 5 E9SQItc
    Diabolik
    Diabolik
    FémininAge : 27Messages : 18

    Ven 24 Oct 2014 - 0:02

    C'est vraiment utile, merci beaucoup !
    Light Anonymous
    Light Anonymous
    FémininAge : 27Messages : 57

    Ven 24 Oct 2014 - 1:29

    Merci beaucoup o/
    Zélya
    Zélya
    FémininAge : 34Messages : 190

    Lun 27 Oct 2014 - 13:56

    c'est superbe, merci



    QEEL avec tableau de partenaires et image de fond - Page 5 891727signaNanmoue
    pixelman
    pixelman
    FémininAge : 43Messages : 241

    Mar 28 Oct 2014 - 8:48

    Merci pour le partage




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    Nonze
    Nonze
    MasculinAge : 30Messages : 85

    Dim 2 Nov 2014 - 18:54

    Merci
    MOON LEE
    MOON LEE
    FémininAge : 29Messages : 149

    Dim 2 Nov 2014 - 19:27

    Merci
    Hiai
    Hiai
    MasculinAge : 33Messages : 31

    Lun 3 Nov 2014 - 0:36

    Merci ! :)
    Manue
    Manue
    FémininAge : 43Messages : 58

    Lun 3 Nov 2014 - 20:24

    Merci pour ce superbe travail Very Happy
    benficagirl
    benficagirl
    FémininAge : 37Messages : 448

    Mer 5 Nov 2014 - 4:17

    J'adore beaucoup merci Very Happy
    Kannone
    Kannone
    FémininAge : 27Messages : 25

    Mer 5 Nov 2014 - 19:40

    Merci ♥
    Carasama
    Carasama
    FémininAge : 28Messages : 98

    Lun 10 Nov 2014 - 11:34

    Thanks *-* it's so beautiful *-*
    Kiowa
    Kiowa
    FémininAge : 35Messages : 220

    Mar 11 Nov 2014 - 2:12

    Merci
    Storminder
    Storminder
    MasculinAge : 27Messages : 56

    Mar 11 Nov 2014 - 15:04

    J'adore ce QEEL, il est trop beau ! Merci Very Happy
    Shymi
    Shymi
    FémininAge : 26Messages : 67

    Jeu 13 Nov 2014 - 21:34

    Merci!
    ALYS
    ALYS
    MasculinAge : 28Messages : 16

    Mer 3 Déc 2014 - 22:36

    Merci !
    AwenWolf
    AwenWolf
    FémininAge : 35Messages : 76

    Jeu 4 Déc 2014 - 14:45

    Merci *_*
    Sid'
    Sid'
    MasculinAge : 33Messages : 73

    Ven 5 Déc 2014 - 19:21

    Merci !
    kyoichii
    kyoichii
    MasculinAge : 29Messages : 32

    Sam 6 Déc 2014 - 5:44

    Merci!
    Nanachu ♥
    Nanachu ♥
    FémininAge : 27Messages : 108

    Sam 6 Déc 2014 - 9:05

    Merciii ♥
    Kirito
    Kirito
    MasculinAge : 28Messages : 209

    Lun 8 Déc 2014 - 23:23

    Merci
    Agnïeszka
    Agnïeszka
    FémininAge : 28Messages : 42

    Mer 10 Déc 2014 - 0:16

    merci pour ce code :)
    fregadeth
    fregadeth
    MasculinAge : 47Messages : 80

    Jeu 11 Déc 2014 - 16:24

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 7:01