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.

-40%
Le deal à ne pas rater :
-40% sur le Pack Gaming Mario PDP Manette filaire + Casque filaire ...
29.99 € 49.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 ^^



    Hame
    Hame
    FémininAge : 25Messages : 25

    Dim 14 Juin 2015 - 11:30

    Sublime merci
    Miliana
    Miliana
    FémininAge : 24Messages : 6

    Dim 14 Juin 2015 - 19:04

    Merci.
    Rudein
    Rudein
    FémininAge : 27Messages : 87

    Dim 28 Juin 2015 - 21:49

    merci beaucoup !! =D
    lΔω
    lΔω
    FémininAge : 26Messages : 105

    Mer 1 Juil 2015 - 20:35

    Merci du partage :3
    Vani
    Vani
    FémininAge : 40Messages : 154

    Dim 5 Juil 2015 - 14:10

    Jouli =o
    Hidema
    Hidema
    MasculinAge : 29Messages : 54

    Mar 7 Juil 2015 - 2:08

    Merci. Wink
    Adralym
    Adralym
    FémininAge : 27Messages : 15

    Mer 22 Juil 2015 - 15:03

    Merci beaucoup !
    Whit
    Whit
    FémininAge : 26Messages : 154

    Mer 22 Juil 2015 - 18:02

    Merci, c'est superbe. *^*
    Sachem
    Sachem
    FémininAge : 27Messages : 51

    Jeu 23 Juil 2015 - 11:22

    Merci pour le partage! C:
    Yukie
    Yukie
    FémininAge : 25Messages : 30

    Jeu 13 Aoû 2015 - 14:10

    Super beau 'o' merci ^^
    Anonymous
    Invité

    Jeu 13 Aoû 2015 - 21:23

    Merci ! (☆^O^☆)
    Kripterya
    Kripterya
    FémininAge : 37Messages : 98

    Ven 14 Aoû 2015 - 3:20

    merci :3
    Jyne
    Jyne
    FémininAge : 57Messages : 34

    Mer 19 Aoû 2015 - 17:15

    merci
    Djeina
    Djeina
    FémininAge : 27Messages : 233

    Ven 4 Sep 2015 - 20:20

    Merci, c'est super :)
    Mystick
    Mystick
    FémininAge : 39Messages : 100

    Mar 8 Sep 2015 - 9:54

    merci pour le partage <3
    Atomixy
    Atomixy
    MasculinAge : 27Messages : 28

    Jeu 10 Sep 2015 - 18:59

    Merciiiii
    TiGraou
    TiGraou
    MasculinAge : 30Messages : 243

    Mar 15 Sep 2015 - 22:45

    Merci !
    Isaac Berntsson
    Isaac Berntsson
    MasculinAge : 30Messages : 29

    Mer 16 Sep 2015 - 14:58

    Merci !
    Jenova
    Jenova
    MasculinAge : 29Messages : 153

    Jeu 17 Sep 2015 - 17:09

    Classe =)



    QEEL avec tableau de partenaires et image de fond - Page 8 I3k3
    Elwing
    Elwing
    FémininAge : 32Messages : 86

    Dim 20 Sep 2015 - 22:01

    Superbe ! Je veux voir :p
    Merci ! :)
    Dragonia
    Dragonia
    FémininAge : 35Messages : 24

    Jeu 1 Oct 2015 - 23:00

    Merci c'est très joli ^^
    P'tit loup
    P'tit loup
    MasculinAge : 41Messages : 451

    Mer 7 Oct 2015 - 16:59

    spasibo



    QEEL avec tableau de partenaires et image de fond - Page 8 30xivrd
    MsCrazy.E
    MsCrazy.E
    FémininAge : 26Messages : 183

    Dim 11 Oct 2015 - 0:38

    Merci pour ce magnifique code ! *-*



    QEEL avec tableau de partenaires et image de fond - Page 8 Nu_a_b10
    Delena
    Delena
    FémininAge : 40Messages : 100

    Mar 13 Oct 2015 - 3:55

    Merci !



    QEEL avec tableau de partenaires et image de fond - Page 8 8s6x
    L0une
    L0une
    FémininAge : 33Messages : 802

    Mar 13 Oct 2015 - 18:47

    Merci pour ce superbe QEEL ! =)




    QEEL avec tableau de partenaires et image de fond - Page 8 854973Sanstitre12

    Les cadeaux !:


    Les Aëro !:


    Contenu sponsorisé


      La date/heure actuelle est Lun 13 Mai 2024 - 18:50