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 : -50%
-50% sur les sacs à dos pour ordinateur ...
Voir le deal
19.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 ^^



    Shaïka
    Shaïka
    FémininAge : 27Messages : 79

    Sam 1 Oct 2016 - 17:28

    Merci !
    Mariana Greyson
    Mariana Greyson
    FémininAge : 25Messages : 78

    Sam 1 Oct 2016 - 18:04

    mrc
    KimmyKinder
    KimmyKinder
    FémininAge : 22Messages : 181

    Mar 4 Oct 2016 - 18:06

    Merci
    Star Rock Shooter
    Star Rock Shooter
    MasculinAge : 27Messages : 11

    Sam 8 Oct 2016 - 20:33

    Merci beaucoup ! :bisou:
    Ombresia
    Ombresia
    FémininAge : 28Messages : 46

    Lun 10 Oct 2016 - 14:26

    Très beau LS, merci ! ^^
    Maevis
    Maevis
    FémininAge : 23Messages : 27

    Sam 22 Oct 2016 - 23:17

    Merci beaucoup pour ce code, c'est génial =)
    Zula
    Zula
    FémininAge : 28Messages : 9

    Jeu 1 Déc 2016 - 21:06

    Merciiii ♥
    Merkantia
    Merkantia
    FémininAge : 28Messages : 14

    Lun 19 Déc 2016 - 0:31

    Mercé bien !
    SamyChou
    SamyChou
    FémininAge : 26Messages : 31

    Lun 9 Jan 2017 - 20:21

    Merci pour le partage !
    Hiruyio Atame
    Hiruyio Atame
    MasculinAge : 22Messages : 87

    Dim 22 Jan 2017 - 13:32

    Merci
    Tanchi
    Tanchi
    Age : 32Messages : 373

    Jeu 9 Mar 2017 - 16:48

    Merci du partage :)



    QEEL avec tableau de partenaires et image de fond - Page 11 335854plop
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mar 14 Mar 2017 - 1:59

    il est beau
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mar 14 Mar 2017 - 2:02

    comment le code marche
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Ven 17 Mar 2017 - 13:31

    Bonjour jai besoin aide car je sais pas comment le codage marche pouvez vous aider. Svp
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mar 21 Mar 2017 - 17:30

    bonjour ou vais les code car je de las misaire avec
    kaguya venusity
    kaguya venusity
    FémininAge : 29Messages : 99

    Mar 28 Mar 2017 - 23:38

    jaaimerais avoir aide pour le code
    Örmée
    Örmée
    MasculinAge : 37Messages : 139

    Mer 29 Mar 2017 - 16:30

    merci =)
    Safaya
    Safaya
    FémininAge : 26Messages : 23

    Jeu 13 Avr 2017 - 0:28

    Merci ♥
    Marianinna
    Marianinna
    FémininAge : 32Messages : 19

    Mar 25 Avr 2017 - 12:33

    Merci !
    Nyptia
    Nyptia
    FémininAge : 32Messages : 38

    Sam 6 Mai 2017 - 23:45

    Merci beaucoup c'est super joli !
    ninoute3012
    ninoute3012
    FémininAge : 30Messages : 82

    Mar 16 Mai 2017 - 16:35

    Magnifique merci
    ajmm
    ajmm
    FémininAge : 34Messages : 14

    Jeu 25 Mai 2017 - 12:24

    Merci beaucoup c'est super!!!
    ¨Lame Spirit
    ¨Lame Spirit
    FémininAge : 26Messages : 35

    Sam 27 Mai 2017 - 13:12

    Merci ! :3
    Melle Lena
    Melle Lena
    FémininAge : 49Messages : 308

    Lun 26 Juin 2017 - 7:15

    Merci
    Kuvera
    Kuvera
    FémininAge : 30Messages : 34

    Mar 27 Juin 2017 - 5:14

    Merci ♥
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 14:58