Catégories à fermer


Aller en bas
Miettes
Râleuse
Informations :
► En ligne de 9h à 18h en semaine
Peu présente le reste du temps
----
Idea Viens papoter avec nous sur le discord

Pseudo Discord : Miettes
Messages : 1327
Voir le profil de l'utilisateurhttp://zen-pub.forumactif.com/

QEEL sur 2 colonnes (membres & stats) Empty QEEL sur 2 colonnes (membres & stats)

le Sam 25 Mai 2019 - 7:44

Toutes versions sauf AwesomeBB

QEEL sur 2 colonnes (membres & stats)

Hello hello Smile

Dans ce LS, je te propose un qeel ^^ Voici le rendu :
QEEL sur 2 colonnes (membres & stats) Screen18

Idea Ce LS est utilisable sur toutes les versions de forum sauf AwesomeBB.

Les codes

Le HTML du QEEL

Voici le code HTML du qeel :
Code:
<section class="qeel feq" id="qeel">
   <img src="{L_ONLINE_IMG}" id="i_whosonline" alt="Qui est en ligne ?">
   <section id="content-qeel">
      <div class="flex">
         <section id="qeel-membres" class="blk-qeel">
            <h2 class="kristi">Les disciples du temple</h2>
            <div class="flex">
               <div>
                  <p class="stats"><span class="nb hidden">@connectes_forum@</span>Disciple<span>s</span> dans le temple :<br />
                     @membres_connectes$, @
                  </p>
                  <p>Disciples présents au cours des 24 dernières heures :<br />
                      @derniers_membres_connectes$, @
                  </p>
               </div>
               <ul id="liste-groupes">
                  <li><a href="/g3-les-oracles" style="color: #9c3e0c;">Les Oracles</a></li>
                  <li><a href="/g2-les-gardiens" style="color: #4c8a3c;">Les Gardiens</a></li>
                  <li><a href="/g4-les-conseillers" style="color: #bf6f7d;">Les Conseillers</a></li>
                  <li><a href="/g5-les-disciples" style="color: #787424;">Les Disciples</a></li>
                  <li><a href="/g6-les-etrangers" style="color: #5c7572;">Les Etrangers</a></li>
               </ul>
            </div>
         </section><!-- /qeel-disciples -->
         <section id="qeel-stats" class="blk-qeel">
            <h2 class="kristi">Statistiques</h2>
            <div>
               <p>Nos disciples ont posté un total de <strong class="stats"><span class="nb">@messages@</span> message<span>s</span></strong>.<br />
               Nous avons <strong class="stats"><span class="nb">@membres_enregistres@</span> disciple<span>s</span> <span class="nb hidden">@membres_enregistres@</span> purifié<span>s</span></strong> dans ce temple.</p>

               <p>Le nouvel arrivant dans le temple est  @dernier_membre@.</p>

               <p>Il y a en tout <strong class="stats"><span class="nb">@connectes_forum@</span> disciple<span>s</span> dans le temple</strong> ::<br /> <span class="stats"><span class="nb">@enregistres@</span> disciple<span>s</span>, <span class="stats"><span class="nb">@invisibles@</span> Invisible<span>s</span> et <span class="stats"><span class="nb">@invites@</span> étranger<span>s</span></span></p>
               <p>Le record du nombre de disciples dans le temple est de @record_connectes@ le @date_record_connectes@</p>

            </div>
         </section><!-- /qeel-stats -->
      </div>
   </section><!-- /content-qeel -->
</section><!-- /qeel -->

La CSS du QEEL

Et voilà le style :
Code:
.kristi{
   font-family: 'Kristi', cursive !important;
}

.hidden{
   display: none;
}

/*** QEEL ***/
#qeel .flex{
   display: flex;
}

#qeel #i_whosonline{
   display: inline-block;
    margin-left:  10%;
    position: relative;
    top: 21px;
    z-index: 10;
}

#qeel #content-qeel{
    background: #c8c5be url("http://pvereecken.fr/zenpub/zp2017/img/bkg-qeel.jpg") repeat-y center center;
    background-size: 100% auto;
    padding: 2% 0;
    position: relative;
}

#qeel #content-qeel > .flex{
    justify-content: space-between;
    margin: 0 auto 1.2%;
    width: 73%;
}

#qeel h2{
    color: #4e453e;
    font-size: 50px;
    font-weight: normal;
    line-height: 1;
    margin-bottom: 0;
}

#qeel .blk-qeel > div{
    background: #e2e3de;
    border-bottom: 4px solid #aea9a6;
    border-top: 4px solid #aea9a6;
    box-sizing: border-box;
    padding: 3%;
}

#qeel .blk-qeel p{
   font-size: 14px;
    line-height: 1;
}

/* Membres & Groupes */
#qeel #qeel-membres{
   width: 57%;
}

#qeel #qeel-membres .flex div:first-child{
   margin-right: 3%;
   width: 70%;
}

#qeel #qeel-membres #liste-groupes{
   border-left: 1px solid #4e453e;
   list-style: none;
    padding-left: 2em;
}

/* Statistiques */
#qeel #qeel-stats{
   width: 40%;
}

Ce que tu dois changer

Dans le HTML

• Les classes au niveau des titres :
Code:
class="kristi"
Ici, c'est la classe qui appelle la police Kristi ; à toi de mettre celle qui te plait Smile
• le codage des groupes et leurs couleurs :
Code:
<li><a href="/g3-les-oracles" style="color: #9c3e0c;">Les Oracles</a></li>
<li><a href="/g2-les-gardiens" style="color: #4c8a3c;">Les Gardiens</a></li>
<li><a href="/g4-les-conseillers" style="color: #bf6f7d;">Les Conseillers</a></li>
<li><a href="/g5-les-disciples" style="color: #787424;">Les Disciples</a></li>
<li><a href="/g6-les-etrangers" style="color: #5c7572;">Les Etrangers</a></li>
• les textes Smile

Dans la CSS

• le nom et la police pour les titres :
Code:
.kristi{
   font-family: 'Kristi', cursive !important;
}
• l'image de fond du qeel
Code:
http://pvereecken.fr/zenpub/zp2017/img/bkg-qeel.jpg"
• les couleurs

Idea La CSS n'est pas commentée. De ce fait, n'hésite pas à demander de l'aide si tu as du mal à faire ce que tu veux Wink

L'installation

L'image

Pour l'image du QEEL, il te suffit d'aller dans Panneau d'administration > Affichage > Images & couleurs > Gestion des images > Mode avancé > Qui est en ligne. Et ici, tu mets l'image de ton titre, par exemple ici, ce sera celle-ci :
Spoiler:
QEEL sur 2 colonnes (membres & stats) Titre-qeel

La CSS

Restons dans cette zone Smile On va aller mettre la CSS dans Panneau d'administration > Affichage > Images & couleurs > Couleurs > feuille de style CSS.

Le template

Tout va se passer dans le template "index_body" que tu trouveras ici : Panneau d'administration > Affichage > Templates > Général. Ici, on va avoir quelques manips à faire.

1] Tout d'abord, on va repérer ça :
Code:
<!-- BEGIN disable_viewonline -->
Et on va le remplacer par ça :
Code:
<!-- BEGIN disable_viewonline -->
<script type="text/javascript" src="http://pvereecken.fr/zenpub/zp2017/js/fa_extraction_qeel.js"></script>
<div id="mon-qeel" style="display:none">

2] Puis on va repèrer ça :
Code:
<!-- END disable_viewonline -->
qu'on va remplacer par :
Code:
</div>
<!-- END disable_viewonline -->

3] Enfin, on va mettre juste après cette ligne :
Code:
<!-- END disable_viewonline -->
le code HTML du QEEL Smile

On valide et on publie Smile

Et c'est terminé !




Si tu te sers de ce code, merci de mettre un petit lien vers La Tambouille quelque part sur ton forum, pas trop caché, pour que tes membres puissent venir chercher de l'aide ou des codes par ici aussi : )


Revenir en haut
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum



Le forum a ouvert ses portes le 30 mars 2019.

A l'époque, seules Miettes et Mäven y étaient présentes. A présent, il y a @membres_enregistres@ Tambouilleurs sur le forum. La dernière personne a nous avoir rejoint est @dernier_membre@.

D'ailleurs, les Tambouilleurs sont plutôt bavards. Eh oui, ils ont déjà posté @messages@ messages dont tutoriels et bidules en Libre-service.

Actuellement, il y a @enregistres@ membres connectés,
et @invites@ visiteurs sur La Tambouille

@@membres_connectes?Qui est là ?
@membres_connectes$, @.$Personne n'est en ligne.@@

@@derniers_membres_connectes?Tambouilleurs connectés au cours des 24 dernières heures : @derniers_membres_connectes$, @$Personne n'était là ces dernières heures.@@

  • ► Les groupes :
  • @groupes$
  • @