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 : -28%
-28% Machine à café avec broyeur ...
Voir le deal
229.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 ^^



    Anonymous
    Invité

    Dim 22 Mar 2015 - 18:20

    Merci beaucoup ! C'est exactement ce que je recherchais :)
    Pistache
    Pistache
    FémininAge : 36Messages : 4

    Mer 25 Mar 2015 - 20:33

    merci du partage Razz
    Fondaboxpub
    Fondaboxpub
    MasculinAge : 59Messages : 38

    Sam 28 Mar 2015 - 14:17

    Merci



    Just4Adventure
    Just4Adventure
    MasculinAge : 29Messages : 48

    Mer 15 Avr 2015 - 3:40

    Arigato
    Saya Shirayuki
    Saya Shirayuki
    FémininAge : 32Messages : 153

    Sam 18 Avr 2015 - 14:51

    Merci ! '^'
    Phoenix Elen
    Phoenix Elen
    FémininAge : 32Messages : 93

    Mar 21 Avr 2015 - 2:27

    Oh vraiment pas mal ! Merci :)



    QEEL avec tableau de partenaires et image de fond - Page 7 1u4i
    Amacky
    Amacky
    FémininAge : 32Messages : 135

    Mar 21 Avr 2015 - 12:45

    Super chouette merci :)
    Kanra
    Kanra
    FémininAge : 24Messages : 113

    Jeu 23 Avr 2015 - 12:10

    Merci *-*
    Luna_Rakuen
    Luna_Rakuen
    FémininAge : 32Messages : 79

    Ven 1 Mai 2015 - 17:30

    Merci beaucoup =3
    Staark
    Staark
    MasculinAge : 29Messages : 49

    Ven 1 Mai 2015 - 17:40

    Merci :)
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 33Messages : 131

    Dim 3 Mai 2015 - 23:18

    Trop beau ! Je teste <3




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    dark3593
    dark3593
    MasculinAge : 31Messages : 6

    Lun 4 Mai 2015 - 13:15

    Très beau QEEL, merci :)
    Ney-Aster
    Ney-Aster
    FémininAge : 100Messages : 10

    Ven 8 Mai 2015 - 21:33

    Il est superbe, merci !
    Sweetdead
    Sweetdead
    FémininAge : 29Messages : 38

    Jeu 14 Mai 2015 - 17:10

    Il est... Magnifique ! XD
    Merci ! *o*
    Kira Hatsuki
    Kira Hatsuki
    FémininAge : 23Messages : 152

    Sam 16 Mai 2015 - 16:50

    merci !
    Kraft
    Kraft
    FémininAge : 26Messages : 37

    Dim 17 Mai 2015 - 11:28

    Merci ! (:
    Solweigh
    Solweigh
    FémininAge : 26Messages : 40

    Dim 17 Mai 2015 - 14:31

    Merci beaucoup !
    En changeant les couleurs ça correspondra totalement à ce que je cherchais QwQ
    Liia
    Liia
    FémininAge : 29Messages : 91

    Sam 23 Mai 2015 - 17:11

    Super un queel avec des partenaires x)
    Merci :)
    Kurokaze
    Kurokaze
    FémininAge : 33Messages : 35

    Mar 26 Mai 2015 - 17:45

    Simple et joli, j'aime ! Merci =)
    Akiyuki
    Akiyuki
    MasculinAge : 26Messages : 89

    Jeu 28 Mai 2015 - 1:38

    Merci beaucoup :3
    Izaya Orihara
    Izaya Orihara
    FémininAge : 23Messages : 105

    Dim 7 Juin 2015 - 21:51

    Merci du partage !
    Nausicäa Kaer
    Nausicäa Kaer
    FémininAge : 30Messages : 171

    Lun 8 Juin 2015 - 21:53

    Merci Very Happy
    Maxine Evans
    Maxine Evans
    FémininAge : 30Messages : 94

    Sam 13 Juin 2015 - 12:36

    thank's
    LianN
    LianN
    FémininAge : 35Messages : 47

    Sam 13 Juin 2015 - 18:46

    Thanks
    Senri
    Senri
    FémininAge : 25Messages : 17

    Sam 13 Juin 2015 - 19:48

    Merci ^^



    QEEL avec tableau de partenaires et image de fond - Page 7 Sans_t10
    Contenu sponsorisé


      La date/heure actuelle est Ven 22 Nov 2024 - 1:07