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 : -17%
SSD interne Crucial SSD P3 1To NVME à ...
Voir le deal
49.99 €

    QEEL avec tableau de partenaires et image de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    Ven 30 Mai 2014 - 13:18

    #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
    Dooh-Nem
    Dooh-Nem
    FémininAge : 31Messages : 140

    Ven 30 Mai 2014 - 16:54

    Merci pour le LS c'est super x3
    • Revenir en haut
    Angie Harkness
    Angie Harkness
    FémininAge : 41Messages : 725

    Sam 31 Mai 2014 - 1:25

    je vais le prendre merci pour ce QEEL ^^
    • Revenir en haut
    Cruelly
    Cruelly
    FémininAge : 31Messages : 2605

    Lun 2 Juin 2014 - 6:50

    Magnifique merci beaucoup Very Happy



    :heart: :heart:
    • Revenir en haut
    Shuna
    Shuna
    FémininAge : 30Messages : 137

    Jeu 5 Juin 2014 - 16:17

    j'adore *^*
    • Revenir en haut
    Thorn
    Thorn
    MasculinAge : 23Messages : 432

    Mer 11 Juin 2014 - 16:22

    Merci !^^



    QEEL avec tableau de partenaires et image de fond Kryr
    • Revenir en haut
    LinaK
    LinaK
    FémininAge : 34Messages : 53

    Dim 15 Juin 2014 - 18:38

    Merci *o*



    QEEL avec tableau de partenaires et image de fond J9ko

    • Revenir en haut
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Mer 18 Juin 2014 - 11:44

    Merci Nyo ! J'aime beaucoup l'alliance graph-codage, ça rend très bien *-*
    (je me suis permis de rajouter une mention pour la taille de l'image de base et le fait que ça peut être changé)



     
    • Revenir en haut
    Elodie potter
    Elodie potter
    FémininAge : 37Messages : 106

    Mer 18 Juin 2014 - 18:19

    Merci
    • Revenir en haut
    Miyoko
    Miyoko
    FémininAge : 32Messages : 213

    Mer 18 Juin 2014 - 19:40

    MErci pour le code



    QEEL avec tableau de partenaires et image de fond 641359838739
    • Revenir en haut
    Hashirama
    Hashirama
    MasculinAge : 27Messages : 63

    Jeu 19 Juin 2014 - 19:08

    Thx
    • Revenir en haut
    Yumi-chan
    Yumi-chan
    FémininAge : 31Messages : 67

    Sam 21 Juin 2014 - 3:39

    Merciii. ♥
    • Revenir en haut
    Sweet Angel
    Sweet Angel
    FémininAge : 41Messages : 153

    Sam 21 Juin 2014 - 10:23

    J'adore, un grand merci
    • Revenir en haut
    avatar
    Lucrèce
    FémininAge : 34Messages : 68

    Sam 21 Juin 2014 - 12:19

    C'est vraiment superbe, merci beaucoup !
    • Revenir en haut
    Kau
    Kau
    FémininAge : 22Messages : 148

    Sam 21 Juin 2014 - 13:37

    merci
    • Revenir en haut
    Priss.
    Priss.
    FémininAge : 31Messages : 22

    Sam 21 Juin 2014 - 14:43

    Il est sublime bravo :O



    QEEL avec tableau de partenaires et image de fond BElMac3
    • Revenir en haut
    x_Titia
    x_Titia
    FémininAge : 33Messages : 92

    Lun 23 Juin 2014 - 21:05

    merci du partage
    • Revenir en haut
    Carmina
    Carmina
    FémininAge : 38Messages : 506

    Mar 24 Juin 2014 - 8:59

    Waw superbe
    • Revenir en haut
    Whitemoon
    Whitemoon
    FémininAge : 24Messages : 695

    Mar 24 Juin 2014 - 19:32

    Merci =)



    QEEL avec tableau de partenaires et image de fond Kit_si10
    • Revenir en haut
    LuxAeterna
    LuxAeterna
    FémininAge : 45Messages : 99

    Mer 25 Juin 2014 - 22:45

    Merci !
    • Revenir en haut
    Zoé
    Zoé
    FémininAge : 25Messages : 189

    Jeu 26 Juin 2014 - 14:53

    merchi ! trop beau :3



    QEEL avec tableau de partenaires et image de fond 274643signaaaa
    • Revenir en haut
    Skitty
    Skitty
    FémininAge : 28Messages : 50

    Jeu 26 Juin 2014 - 19:19

    Oh c'est joli merci !
    • Revenir en haut
    Dydy
    Dydy
    FémininAge : 34Messages : 493

    Ven 27 Juin 2014 - 18:57

    merci du partage



    QEEL avec tableau de partenaires et image de fond 27978_signature_never_utopia_dydy_2
    • Revenir en haut
    Asuka
    Asuka
    FémininAge : 30Messages : 105

    Sam 28 Juin 2014 - 15:37

    Merci beaucoup ! C'est trop beau ♥



    QEEL avec tableau de partenaires et image de fond 975531MisakiHino3
    • Revenir en haut
    Irony
    Irony
    FémininAge : 27Messages : 102

    Sam 28 Juin 2014 - 15:45

    Merci *-*
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 9:54