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.

-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.99 €
Voir le deal
-50%
Le deal à ne pas rater :
-50% sur les sacs à dos pour ordinateur portable Urban Factory ...
19.99 € 39.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 ^^



    erika02
    erika02
    FémininAge : 27Messages : 278

    Sam 28 Juin 2014 - 20:37

    Merci c'est super Very Happy



    QEEL avec tableau de partenaires et image de fond - Page 2 45054210
    Shalyma
    Shalyma
    FémininAge : 34Messages : 486

    Lun 30 Juin 2014 - 5:52

    il est beau merci ! (:



    QEEL avec tableau de partenaires et image de fond - Page 2 499a696982b45shalyma
    Merci Marie Chérie pour le kit!
    Shinju.dot
    Shinju.dot
    FémininAge : 34Messages : 88

    Lun 30 Juin 2014 - 12:33

    merci
    zbou
    zbou
    FémininAge : 29Messages : 83

    Lun 30 Juin 2014 - 17:24

    Merci pour le partage ♥
    tamanegeek
    tamanegeek
    MasculinAge : 24Messages : 167

    Lun 30 Juin 2014 - 18:34

    J'aime merci ! :)
    Stitch56
    Stitch56
    FémininAge : 30Messages : 209

    Lun 30 Juin 2014 - 20:20

    marchi ♥
    skaera22
    skaera22
    MasculinAge : 28Messages : 72

    Mar 1 Juil 2014 - 13:14

    merci !
    Filou
    Filou
    FémininAge : 32Messages : 162

    Jeu 3 Juil 2014 - 11:21

    Magnifique !
    Bravo et un grand merci de le partager
    Oxalyde
    Oxalyde
    FémininAge : 28Messages : 68

    Jeu 3 Juil 2014 - 16:02

    Merci pour le partage (:



    "Nous travestissons nos faiblesses en force. Nos frêles corps sont nos armures"
    Christtinne
    Christtinne
    FémininAge : 38Messages : 205

    Ven 4 Juil 2014 - 2:05

    Beautifull. merci :3
    Madness of Wonderland
    Madness of Wonderland
    FémininAge : 24Messages : 60

    Sam 5 Juil 2014 - 13:49

    merci ^^
    Little Melody
    Little Melody
    FémininAge : 22Messages : 64

    Sam 5 Juil 2014 - 17:06

    merci **
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Dim 6 Juil 2014 - 0:48

    très joli
    Hayate747
    Hayate747
    MasculinAge : 34Messages : 196

    Lun 7 Juil 2014 - 15:27

    Merci beaucoup !!!
    Zappy
    Zappy
    FémininAge : 24Messages : 56

    Mar 8 Juil 2014 - 13:21

    Merci ^^
    Tsurugi-san
    Tsurugi-san
    FémininAge : 30Messages : 4

    Jeu 10 Juil 2014 - 10:43

    Merci.
    Natsuya Gaïaguard
    Natsuya Gaïaguard
    FémininAge : 33Messages : 144

    Ven 11 Juil 2014 - 13:50

    Merci très jolie



    QEEL avec tableau de partenaires et image de fond - Page 2 Signa10
    Célestine
    Célestine
    FémininAge : 26Messages : 51

    Lun 14 Juil 2014 - 18:27

    Merci beaucoup ! Very Happy
    Fyraliel
    Fyraliel
    FémininAge : 33Messages : 1424

    Mar 15 Juil 2014 - 2:11

    superbe merci



    QEEL avec tableau de partenaires et image de fond - Page 2 F86e7518c1
    Miss Snow
    Miss Snow
    FémininAge : 24Messages : 56

    Mer 16 Juil 2014 - 10:46

    Merci!



    QEEL avec tableau de partenaires et image de fond - Page 2 333359CommandeMissSnowsigna
    Dastan
    Dastan
    MasculinAge : 40Messages : 111

    Lun 21 Juil 2014 - 13:14

    il est super! merci!
    shala
    shala
    FémininAge : 32Messages : 213

    Mer 23 Juil 2014 - 18:59

    merci^^



    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Mer 23 Juil 2014 - 19:32

    Merci !
    Leoguillem
    Leoguillem
    MasculinAge : 24Messages : 137

    Mer 23 Juil 2014 - 20:03

    Merci ! Very Happy



    - Je signe Marabout -
    Zeroo
    Zeroo
    FémininAge : 29Messages : 76

    Jeu 24 Juil 2014 - 18:01

    Merci o/
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 6:04