Un "Qui est en ligne" simple et clair

Bonjour à toi

Tu cherches une idée de codage pour le "qui est en ligne" de ton forum ? Je viens t'en proposer un modèle ici, simple et clair

Tu dois avoir accès aux templates
Un minimum de connaissances en HTML et CSS est préférable pour tout comprendre

Ce LS avait été fait pour phpBB2 en priorité. Il a été adapté à toutes les versions SAUF AwesomeBB. Cependant, note bien qu'il change totalement la structure du QEEL des versions autres que phpBB2 (ou pbpBB3)
Ce LS n'est pas du tout adapté ni adaptable à AwesomeBB


Ici, on a des petits différences selon la version. Mais voilà ce qui ne change pas : repère ces deux commentaires :

Code:

<!-- BEGIN disable_viewonline -->

et

Code:

<!-- END disable_viewonline -->

Supprime tout ce qu'il ya entre les 2 (oui oui, tout ) et remplace le par le HTML qui correspond à la version de ton forum :

Code:

<div id="qeel">
  <div id="groupes">
    <span class="gensmall">{GROUP_LEGEND}  </span>
  </div>
  <div id="milieu">
  <div class="colonne">
    <span class="gensmall">{TOTAL_USERS}<br />
      {TOTAL_POSTS}<br />
     
      {NEWEST_USER}</span>
      <table>
        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}
      </table>
    </div>
    <div class="colonne">
      <span class="gensmall">{TOTAL_USERS_ONLINE}

        <br />
        <br />
        {LOGGED_IN_USER_LIST}

      </span>
      <table>{L_CONNECTED_MEMBERS}</table>
    </div>

  </div>
  <div id="chat">
    <!-- BEGIN switch_chatbox_activate -->
   
    <span class="gensmall">{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 -->
  </span>

  <!-- END switch_chatbox_activate -->
 </div>
</div>

Code:

<div id="qeel">
  <div id="groupes">
    <span class="gensmall">{GROUP_LEGEND}  </span>
  </div>
  <div id="milieu">
  <div class="colonne">
    <span class="gensmall">{TOTAL_USERS}<br />
      {TOTAL_POSTS}<br />
 
      {NEWEST_USER}</span>

        {L_WHOSBIRTHDAY_TODAY}
        {L_WHOSBIRTHDAY_WEEK}

    </div>
    <div class="colonne">
      <span class="gensmall">{TOTAL_USERS_ONLINE}

        <br />
        <br />
        {LOGGED_IN_USER_LIST}

      </span>
      {L_CONNECTED_MEMBERS}
    </div>

  </div>
  <div id="chat">
    <!-- BEGIN switch_chatbox_activate -->
 
    <span class="gensmall">{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 -->
  </span>

  <!-- END switch_chatbox_activate -->
 </div>
</div>

On enregistre et on oublie pas de publier le template


Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS qui correspond à ta version :

Au début de la CSS, pour toutes les versions, je te conseille d'ajouter ce code, qui va permettre, sur l'ensemble de ton forum, que toutes les marges et remplissages (padding et margin) soient pris en compte sans agrandir les tailles données (pour en savoir plus rendez-vous ici :

Code:

*{
  box-sizing:border-box;
}

Code:

/******************QUI EST EN LIGNE*****************************/
#qeel{
  width:100%;
  margin: 5px; auto 0;
  background : #4C5F85;
  border: 2px solid #000;
  padding:0.5%;
}
#qeel #milieu{
  display:flex;
  width:100%;
  justify-content:space-between;
  padding:0.5% 0;
}
#qeel #milieu .colonne{
  width:49%;

}
#qeel td{
  background:none !important;
}

#qeel #chat, #qeel #groupes{
  text-align:center;
}

#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
  padding:1%;
  background:#798CB0;
  border: 2px solid #000;
}
/******************FIN DU QUI EST EN LIGNE*****************************/

Code:

/******************QUI EST EN LIGNE*****************************/
#qeel{
  width:100%;
  margin: 5px; auto 0;
  background : #4C5F85;
  border: 2px solid #000;
  padding:0.5%;
}
#qeel #milieu{
  display:flex;
  width:100%;
  justify-content:space-between;
  padding:0.5% 0;
}
#qeel #milieu .colonne{
  width:49%;

}

#qeel #chat, #qeel #groupes{
  text-align:center;
}

#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
  padding:1%;
  background:#798CB0;
  border: 2px solid #000;
}
/******************FIN DU QUI EST EN LIGNE*****************************/

Code:

/******************QUI EST EN LIGNE*****************************/
#qeel{
  width:100%;
  margin: 5px; auto 0;
  background : #4C5F85;
  border: 2px solid #000;
  padding:0.5%;
}
#qeel #milieu{
  display:flex;
  width:100%;
  justify-content:space-between;
  padding:0.5% 0;
}
#qeel #milieu .colonne{
  width:49%;

}

#qeel #chat, #qeel #groupes{
  text-align:center;
}

#qeel #milieu .colonne,#qeel #chat, #qeel #groupes{
  padding:1%;
  background:#798CB0;
  border: 2px solid #000;
}

#chatbox_popup {
    float: none;
}
/******************FIN DU QUI EST EN LIGNE*****************************/

Aucun des codes n'est commenté, n'hésite pas à dire si tu es un peu perdu, j'en ajouterai. De même si tu as besoin d'aide pour la personnalisation n'hésite pas à le dire je t'assisterai

---

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 : )