AccueilFAQRechercherMembresGroupesS'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

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

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



    avatar
    babouinermite
    MasculinAge : 25Messages : 18

    le Mer 14 Oct 2015 - 11:34

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

    le Dim 25 Oct 2015 - 19:50

    merci beaucoup
    avatar
    Love_RPG
    FémininAge : 23Messages : 32

    le Lun 2 Nov 2015 - 13:04

    Merci ♥
    avatar
    Inoue Musaki
    FémininAge : 28Messages : 147

    le Dim 8 Nov 2015 - 16:37

    Merci ^^
    avatar
    MeowLowDee
    FémininAge : 26Messages : 72

    le Mer 11 Nov 2015 - 23:04

    Merci !
    avatar
    Hayate kimitsu
    MasculinAge : 25Messages : 30

    le Sam 14 Nov 2015 - 22:56

    merci x)
    avatar
    Dark Fairy
    FémininAge : 20Messages : 226

    le Mer 18 Nov 2015 - 19:02

    Merci!
    avatar
    Glaçou
    FémininAge : 16Messages : 117

    le Ven 4 Déc 2015 - 17:51

    Merci beaucoup.
    avatar
    Miawcormick
    FémininAge : 24Messages : 11

    le Ven 4 Déc 2015 - 18:07

    Ce QEEL est vraiment très classe, bravo ! :)
    avatar
    Cerhelion
    MasculinAge : 29Messages : 15

    le Dim 6 Déc 2015 - 17:38

    Superbe! merci!
    avatar
    AsadaSama
    FémininAge : 25Messages : 34

    le Lun 7 Déc 2015 - 22:02

    Merci beaucoup :)
    avatar
    Mimio
    FémininAge : 23Messages : 178

    le Jeu 17 Déc 2015 - 18:05

    Merci, c'est super beau <3



    avatar
    MaelStrhom
    MasculinAge : 22Messages : 38

    le Sam 19 Déc 2015 - 1:06

    merci
    avatar
    Hancok
    FémininAge : 33Messages : 1048

    le Lun 21 Déc 2015 - 10:20

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





    avatar
    Jaspe
    MasculinAge : 15Messages : 20

    le Ven 25 Déc 2015 - 21:37

    Magnifique *étoiles dans les yeux*





    Merci beaucoup Alil' !

    avatar
    olibo31
    MasculinAge : 32Messages : 15

    le Lun 4 Jan 2016 - 14:27

    je butine, je butine :) et j'aime bien celui ci
    avatar
    Fuyuka
    FémininAge : 23Messages : 62

    le Mar 12 Jan 2016 - 12:05

    J'aime beaucoup !!
    avatar
    Yukihyo
    MasculinAge : 20Messages : 71

    le Jeu 14 Jan 2016 - 2:55

    Merci !
    avatar
    reshiram44
    MasculinAge : 19Messages : 380

    le Lun 18 Jan 2016 - 20:38

    merci



    avatar
    Llariarith
    FémininAge : 33Messages : 217

    le Jeu 18 Fév 2016 - 19:15

    très joli, merci et bravo
    avatar
    Ariemm
    FémininAge : 17Messages : 107

    le Ven 26 Fév 2016 - 16:42

    trop classe! merci!
    avatar
    Waize
    FémininAge : 20Messages : 34

    le Mar 1 Mar 2016 - 22:20

    Merci :3
    avatar
    FanDeFofo
    MasculinAge : 41Messages : 16

    le Mer 2 Mar 2016 - 17:35

    vnfgbgbfngnhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhxf
    avatar
    Vetrox
    MasculinAge : 17Messages : 36

    le Ven 18 Mar 2016 - 20:24

    merci
    avatar
    defenrir
    MasculinAge : 35Messages : 71

    le Sam 19 Mar 2016 - 18:41

    merchi =)
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Juin 2018 - 0:35