Qui Est En Ligne #1



Pré-requis : accès au panneau d'administration & templates (compte fondateur).
Version forum : phpBB2
Difficulté : moyen.
Le rendu :

Tout est modifiable : couleur, texte, image... Prévu pour avoir une image de fond en titre, qui sera également sous le titre du des catégories & de la PA. Les couleurs & noms des groupes sont automatique avec ceux définis dans votre panneau admin.

Merci de garder un crédit, un lien renvoyant sur AvadaKedagraph si vous utilisez ce QEEL ! Merci !

Le design de mon bébé change du tout au tout, alors on vous met en LS l'index complet !!  I love you ici la PA qui va avec et les catégories !

Pour simplifier mon code, j'ai utilisé des variables dans ma feuille CSS. C'est à dire que si vous utilisez ces codes, vous allez pouvoir modifier les couleurs plutôt facilement ! Pour tout savoir à ce sujet : lire ce tuto.

Instruction.

  • Rendez-vous dans votre template (index_body > page d'accueil).
  • Remplacer du commentaire BEGIN disable_viewonline à sa fermeture : END disable_viewonline par le code suivant :

Code:

<!-- BEGIN disable_viewonline -->

<div class="titreQEEL">Qui est en ligne ?</div>
<div class="groupQEEL">
  
<div class="groupes" id="groupes">{GROUP_LEGEND}</div>
  
  <div class="qeelLeft">
    <div class="groupStat">
      <div class="stat"><span id="messtot">{TOTAL_POSTS}<br />MESSAGES</span></div>
      <div class="stat"><span id="memtot">{TOTAL_USERS}<br />MEMBRES</span></div>
      <div class="stat"><span id="newus">BIENVENUE<br />{NEWEST_USER}</span></div>
    </div>
    
    <div class="totuson">{TOTAL_USERS_ONLINE}</div>
    
    <div class="ssTitreQEEL">ACTUELLEMENT EN LIGNE</div>
    <div class="fondQEEL">{LOGGED_IN_USER_LIST}</div>
  </div>
    
  <div class="qeelRight">
    <div class="ssTitreQEEL">48 DERNIERES HEURES</div>
    <table class="fondQEEL">{L_CONNECTED_MEMBERS}</table>
  </div>
</div>

 
       <!-- BEGIN switch_chatbox_activate -->

             <center><div class="cb">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
                              </div></center>
          <span style="opacity: 0.1; font-size: 8px;">Page d'accueil par <a href="http://www.pub-rpg-design.com">Psychose</a></span>               <!-- END switch_chatbox_activate -->
  
    <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/Nos membres ont posté un total de/,"");</script>
    <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/messages/,"");</script>
    <script type="text/javascript">document.getElementById('messtot').innerHTML=document.getElementById('messtot').innerHTML.replace(/message/,"");</script>
    <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/Nous avons/,"");</script>
    <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membre enregistré/,"");</script>
    <script type="text/javascript">document.getElementById('memtot').innerHTML=document.getElementById('memtot').innerHTML.replace(/membres enregistrés/,"");</script>
    <script type="text/javascript">document.getElementById('newus').innerHTML=document.getElementById('newus').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");</script>
    <script type="text/javascript">document.getElementById('groupes').innerHTML=document.getElementById('groupes').innerHTML.replace(/[[\]]/g,'');</script>
    <!-- END disable_viewonline -->



  • Puis modifier la feuille CSS (Panneau d'administration > Onglet Affichage > rubrique Image & Couleur > Couleurs)
  • Coller le code suivant.

Copier/coller uniquement si vous n'avez pas déjà déclaré les variables depuis un autre code.

Code:

:root{
  --fondforum: #e9e9e9; /* gris */
  --fondfonce: #a8b7d3; /* mauve */
  --fondclair: #fff;
  --bordure: #fff; /* blanc */
  --colorone: #982786; /* magenta -- titre et sous titre PA */
  --colortwo: #aa3a98; /* violet clair */
  --colorthree: #008d9b; /* vert-eau -- lien */
  --colorfour: #512563; /* mangeta soulignement gras et italic */
}


Code:

/*-------- QEEL by Laxy & Jamy - AvadaKedagraph -----------*/
  
.titreQEEL {
  font-family: Dancing Script;
  text-align: center;  
  color: var(--colorone);  
  font-size: 50px;
  font-weight: 500;
  letter-spacing: 0px;
  text-shadow: 0 1px 0 #fff;
  background:url('http://image.noelshack.com/fichiers/2018/50/2/1544516140-pattern.png');
  width:98%;
  margin: 0 auto;
}

.groupQEEL{
  width:98%;
  box-sizing:border-box;
  margin:0 auto;
  background-color: var(--fondfonce);
  padding:5px;
  
}

.groupes {
  letter-spacing: 2px;
  font-size: 40px;
  font-family: 'Marcellus SC';
  text-align:center;
  margin: 0 0 15px;
}


.groupStat{
  display: flex;
  justify-content: space-between;
}

.qeelLeft, .qeelRight{
  width:49%;
  display:inline-block;
  box-sizing:border-box;
    vertical-align: top;
}

.qeelLeft{margin-right:2%}

.stat {
  background-color: var(--fondforum);
  text-align: center;
  font-size: 12px;
  width: 32%;
  padding: 10px 5px;
  display: inline-block;
  box-sizing: border-box;
}

.ssTitreQEEL {
  background-color: var(--fondforum);
  text-align: center;
  color : var(--colorone);
  padding:3px 0;
  font-family: "Marcellus SC";
  font-size: 14px;
}

.fondQEEL {
  background : var(--fondclair);
  text-align: justify;
  padding: 5px;
  min-height: 60px;
  overflow: auto;
  box-sizing:border-box;
  margin:0;
  font-size: 11px;
 width: 100%;
}

.fondQEEL .row1 {
  background : var(--fondclair);
  vertical-align:top;
}


.fondqeel2 .row1 .gensmall, .fondqeel .row1 .gensmall{
  font-size:11px !important;
}

.totuson {
  text-align:center;
  font-size: 11px;
  margin: 9px 0;
}

.cb {
  letter-spacing: 2px;
  font-size: 10px;
  margin-top:15px;

}

/*------ fin QEEL ----------*/




En espérant que ce code va te servir ! Si tu n'arrives pas à faire une modification, n'hésite pas à ouvrir une "commande" de codage, je peux t'aider à personnaliser/modifier un peu le code !  I love you

Enjoy coding !
 

fiche réalisée par laxy