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.

-38%
Le deal à ne pas rater :
Ecran PC gaming 23,8″ – ACER KG241Y P3bip à 99,99€
99.99 € 159.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 :

    #html #css #qeel #effet_hover #phpBB2 #auteur_NyoTheNeko


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



    • Revenir en haut
    Scare Leonheart
    Scare Leonheart
    MasculinAge : 31Messages : 202

    Ven 12 Déc 2014 - 19:39

    Merci



    QEEL avec tableau de partenaires et image de fond - Page 6 Scare_10
    • Revenir en haut
    leetath
    leetath
    FémininAge : 44Messages : 29

    Sam 13 Déc 2014 - 13:58

    merci :)
    • Revenir en haut
    Anonymous
    Invité

    Sam 13 Déc 2014 - 14:13

    Merci pour le code ! :hug:
    • Revenir en haut
    Espoir
    Espoir
    FémininAge : 29Messages : 54

    Dim 14 Déc 2014 - 22:15

    Merci !
    • Revenir en haut
    Maya Seiko
    Maya Seiko
    FémininAge : 31Messages : 129

    Ven 19 Déc 2014 - 10:01

    kyah merci ^^
    • Revenir en haut
    Klemmeria
    Klemmeria
    FémininAge : 24Messages : 147

    Sam 20 Déc 2014 - 14:51

    thanks!



    QEEL avec tableau de partenaires et image de fond - Page 6 Btqy
    • Revenir en haut
    So-chan
    So-chan
    FémininAge : 34Messages : 61

    Dim 28 Déc 2014 - 1:37

    Woh joli rendu ! Merci du partage !
    • Revenir en haut
    lady sigyn
    lady sigyn
    FémininAge : 33Messages : 32

    Dim 28 Déc 2014 - 20:17

    C'est très joli. j'aime beaucoup l'idée d'avoir les partenaire vers le QEEL que sur la PA^^
    • Revenir en haut
    MxPrime2
    MxPrime2
    MasculinAge : 30Messages : 81

    Mar 6 Jan 2015 - 12:12

    Je vais tester ça ! Merci :)
    • Revenir en haut
    Chhaya
    Chhaya
    FémininAge : 39Messages : 1213

    Ven 9 Jan 2015 - 15:00

    Merci du partage :)



    QEEL avec tableau de partenaires et image de fond - Page 6 200412081714641513

      Merci Sparrow :3
    • Revenir en haut
    louha
    louha
    FémininAge : 37Messages : 219

    Ven 9 Jan 2015 - 17:42

    merci !
    • Revenir en haut
    Bloody Wolfia
    Bloody Wolfia
    FémininAge : 32Messages : 70

    Dim 18 Jan 2015 - 13:59

    merci
    • Revenir en haut
    Moon Heart
    Moon Heart
    FémininAge : 24Messages : 37

    Mar 3 Fév 2015 - 23:45

    Merci ^^
    • Revenir en haut
    Dieu Sheogorath
    Dieu Sheogorath
    MasculinAge : 31Messages : 31

    Dim 8 Fév 2015 - 0:54

    Bonsoir, je te remercie pour ton service.
    Ce qeel est très jolie et simple d'utilisation. ^^



    QEEL avec tableau de partenaires et image de fond - Page 6 Signat15
    Avant que je ne change d´avis, ou que mon avis ne me change.. pourquoi êtes vous entre un de regarder ma signature,
    a moins que c'est ma signature qui vous laisse un regard.. ?
    • Revenir en haut
    Dark Dream
    Dark Dream
    FémininAge : 32Messages : 79

    Jeu 19 Fév 2015 - 16:30

    merci pour ce partage ♥
    • Revenir en haut
    Prince Of Spades
    Prince Of Spades
    MasculinAge : 31Messages : 50

    Ven 27 Fév 2015 - 21:46

    Merci ! *^*
    • Revenir en haut
    Ayame
    Ayame
    FémininAge : 28Messages : 53

    Dim 1 Mar 2015 - 3:44

    C'est très bien fait, merci ^-^
    • Revenir en haut
    Anonymous
    Invité

    Jeu 5 Mar 2015 - 21:12

    Wink
    • Revenir en haut
    Maag
    Maag
    FémininAge : 25Messages : 31

    Ven 6 Mar 2015 - 15:54

    whoah trop beau, merci *-*
    • Revenir en haut
    Rhoswen Fay
    Rhoswen Fay
    FémininAge : 37Messages : 66

    Dim 8 Mar 2015 - 2:15

    merci !
    • Revenir en haut
    Susu-chan
    Susu-chan
    FémininAge : 34Messages : 81

    Lun 9 Mar 2015 - 23:40

    Merci !
    • Revenir en haut
    Pandawan
    Pandawan
    FémininAge : 26Messages : 30

    Mer 11 Mar 2015 - 16:26

    Merci !
    • Revenir en haut
    Redingdom
    Redingdom
    FémininAge : 23Messages : 50

    Dim 15 Mar 2015 - 15:02

    Merci du partage ^^
    • Revenir en haut
    The Shiya
    The Shiya
    FémininAge : 35Messages : 77

    Dim 15 Mar 2015 - 15:18

    merci
    • Revenir en haut
    Valou93
    Valou93
    MasculinAge : 31Messages : 50

    Mar 17 Mar 2015 - 21:32

    Merci <3
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Ven 22 Nov 2024 - 6:50