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.

Le Deal du moment : -29%
DYSON V8 Origin – Aspirateur balai sans fil
Voir le deal
269.99 €

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



    Nyusu97
    Nyusu97
    FémininAge : 27Messages : 60

    Jeu 28 Aoû 2014 - 11:33

    Merci ♥



    QEEL avec tableau de partenaires et image de fond - Page 4 974744Signa
    Célyo
    Célyo
    FémininAge : 33Messages : 41

    Jeu 28 Aoû 2014 - 20:08

    Oh merci beaucoup !!
    Mikasa
    Mikasa
    FémininAge : 27Messages : 169

    Dim 31 Aoû 2014 - 20:39

    merci !



    QEEL avec tableau de partenaires et image de fond - Page 4 Miksa210
    Signa:
    Allan Oresh
    Allan Oresh
    MasculinAge : 48Messages : 35

    Ven 5 Sep 2014 - 1:33

    merci magnifique
    Akemi Kura
    Akemi Kura
    MasculinAge : 34Messages : 6

    Sam 6 Sep 2014 - 17:50

    Merci pour la partage *w*
    Saphire
    Saphire
    FémininAge : 27Messages : 146

    Dim 7 Sep 2014 - 15:32

    merci pour le partage
    Kiki85
    Kiki85
    MasculinAge : 29Messages : 398

    Mar 16 Sep 2014 - 15:17

    Trop classe !
    Calypso Luciano
    Calypso Luciano
    FémininAge : 33Messages : 333

    Mar 16 Sep 2014 - 17:46

    merci pour le qel ♥
    Sentenza
    Sentenza
    MasculinAge : 40Messages : 95

    Mar 16 Sep 2014 - 23:01

    merci!
    Eternal Moon
    Eternal Moon
    FémininAge : 34Messages : 262

    Mer 17 Sep 2014 - 9:58

    jolie ^^
    Ema Skye
    Ema Skye
    FémininAge : 26Messages : 134

    Sam 20 Sep 2014 - 19:29

    Il est magnifique ! Merci *.*
    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Sam 27 Sep 2014 - 14:45

    Magnifique, vraiment ! Merci beaucoup !
    Nawak
    Nawak
    FémininAge : 26Messages : 112

    Lun 29 Sep 2014 - 0:21

    Woah en voilà un QEEL badass !
    Merci beaucoup pour le partage ! ♥



    QEEL avec tableau de partenaires et image de fond - Page 4 Umbrel10
    Kikton
    Kikton
    MasculinAge : 28Messages : 29

    Mar 30 Sep 2014 - 10:13

    Merci pour ce très beau codage !
    Nemelise
    Nemelise
    FémininAge : 23Messages : 50

    Ven 3 Oct 2014 - 20:22

    Merci ♥
    Oror
    Oror
    FémininAge : 34Messages : 97

    Sam 4 Oct 2014 - 17:10

    Simple et efficace ! J'aime beaucoup ! =)
    Merci du partage !



    QEEL avec tableau de partenaires et image de fond - Page 4 351490minion
    Shatters
    Shatters
    FémininAge : 31Messages : 57

    Mar 7 Oct 2014 - 15:36

    C'est magnifique, un grand merci !



    J'ai appelé les bourreaux pour, en périssant, mordre la crosse de leurs fusils. J'ai appelé les fléaux, pour m'étouffer avec le sable, avec le sang. Le malheur a été mon dieu. Je me suis allongé dans la boue. Je me suis séché à l'air du crime. Et j'ai joué de bons tours à la folie. (Rimbaud)
    Nemalus
    Nemalus
    FémininAge : 26Messages : 358

    Sam 11 Oct 2014 - 16:04

    Merci ♥
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Sam 11 Oct 2014 - 19:20

    Superbe! Mercii^^
    ColorTime'Less
    ColorTime'Less
    FémininAge : 27Messages : 106

    Sam 11 Oct 2014 - 19:30

    magnifique **
    Allèle
    Allèle
    FémininAge : 31Messages : 56

    Mar 14 Oct 2014 - 15:21

    Merci
    avatar
    Hop80
    MasculinAge : 35Messages : 138

    Mer 15 Oct 2014 - 2:24

    Très jolie, merci beaucoup.
    Missmytic
    Missmytic
    FémininAge : 35Messages : 26

    Ven 17 Oct 2014 - 6:42

    merci <3
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Dim 19 Oct 2014 - 21:02

    Merci *-* !
    Vegvisir
    Vegvisir
    FémininAge : 25Messages : 411

    Dim 19 Oct 2014 - 21:11

    Très beau ! *w*



    QEEL avec tableau de partenaires et image de fond - Page 4 1
    Contenu sponsorisé


      La date/heure actuelle est Sam 23 Nov 2024 - 11:10