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
    Eerie Ange's
    FémininAge : 17Messages : 166

    le Dim 27 Juil 2014 - 18:58

    Jolii !
    Merci :3
    avatar
    Chocolakato
    FémininAge : 27Messages : 795

    le Dim 27 Juil 2014 - 20:28

    Voila qui semble intéressant o_o
    Merci beaucoup pour le partage



    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Lun 28 Juil 2014 - 19:01

    Merci :B
    avatar
    O'Daim
    FémininAge : 22Messages : 116

    le Mar 29 Juil 2014 - 4:43

    Merci pour ce QEEL super beau *^*
    avatar
    Demoniall
    FémininAge : 17Messages : 74

    le Mar 29 Juil 2014 - 19:35

    Magnifique, merci beaucoup. c:
    avatar
    Drysfer
    MasculinAge : 28Messages : 71

    le Ven 1 Aoû 2014 - 16:32

    Merci.



    avatar
    Reckless
    FémininAge : 14Messages : 25

    le Ven 1 Aoû 2014 - 16:59

    Merci, c'est super bô! *^*





    avatar
    Sekai
    FémininAge : 20Messages : 20

    le Sam 2 Aoû 2014 - 2:23

    Magnifique QEEL ** Merciiii
    avatar
    Amiko
    FémininAge : 26Messages : 51

    le Sam 2 Aoû 2014 - 17:49

    Wow... La classe. Merci beaucoup !
    avatar
    Fayzl4D
    MasculinAge : 21Messages : 84

    le Dim 3 Aoû 2014 - 11:45

    merci
    avatar
    Damned
    FémininAge : 16Messages : 109

    le Dim 3 Aoû 2014 - 18:38

    Merci
    avatar
    Cupcake-11
    FémininAge : 20Messages : 31

    le Lun 4 Aoû 2014 - 14:34

    Merci ♥
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Lun 4 Aoû 2014 - 21:43

    Je crois que je vais prendre ce qeel magnifique *-*
    avatar
    Velvet-Mist
    FémininAge : 27Messages : 44

    le Lun 4 Aoû 2014 - 21:50

    Merci beaucoup! ♥
    avatar
    Lugatique
    MasculinAge : 18Messages : 23

    le Mer 6 Aoû 2014 - 20:44

    merci
    avatar
    catkiller
    FémininAge : 23Messages : 70

    le Dim 10 Aoû 2014 - 5:30

    Malheureusement je ne vois pas l'aperçu =/
    avatar
    Drill'
    FémininAge : 33Messages : 52

    le Dim 10 Aoû 2014 - 10:22

    Superbe QEEL !!
    avatar
    lala zhang
    FémininAge : 27Messages : 345

    le Dim 10 Aoû 2014 - 21:28

    Elle est jolie merci du partage
    avatar
    Lovehurt
    FémininAge : 21Messages : 36

    le Dim 10 Aoû 2014 - 23:18

    Merci :3
    avatar
    Invité

    le Mar 12 Aoû 2014 - 0:11

    merci
    avatar
    Lutine
    FémininAge : 30Messages : 102

    le Mar 12 Aoû 2014 - 20:27

    merci!
    avatar
    Babouine
    FémininAge : 24Messages : 17

    le Sam 16 Aoû 2014 - 14:11

    Wahou c'est super *.* merci du partage !
    avatar
    Asuman
    MasculinAge : 22Messages : 20

    le Mer 20 Aoû 2014 - 11:16

    Magnifique merci beaucoup ^^
    avatar
    Artémis Walker
    FémininAge : 22Messages : 54

    le Ven 22 Aoû 2014 - 12:31

    Merci pour le partage, c'est très joli ^^



    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Lun 25 Aoû 2014 - 16:57

    Merci
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Mai 2018 - 11:24