Catégories à fermer


Aller en bas
Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

[Toutes versions SAUF AwesomeBB] Un "Qui est en ligne" simple et clair Empty [Toutes versions SAUF AwesomeBB] Un "Qui est en ligne" simple et clair

le Jeu 16 Mai - 11:51

Un "Qui est en ligne" simple et clair

Bonjour à toi Smile

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 Smile
[Toutes versions SAUF AwesomeBB] Un "Qui est en ligne" simple et clair Qeel_s10

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

Exclamation 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)
Exclamation Ce LS n'est pas du tout adapté ni adaptable à AwesomeBB

Partie HTML : modifions le template

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 Smile ) et remplace le par le HTML qui correspond à la version de ton forum :
PhpBB2

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>

phpBB3 - punBB - Invision - ModernBB

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 Smile

Partie CSS : attaquons la mise en page

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;
}

PhpBB2

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*****************************/

PhpBB3 - PunBB - Invision

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*****************************/

ModernBB

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*****************************/

Idea 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 Smile




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

Mäven
Mäven
Informations : Présence aléatoire

Idea Viens papoter avec nous sur le discord

Messages : 1296
http://tambouille-raleuses.forumactif.com/

[Toutes versions SAUF AwesomeBB] Un "Qui est en ligne" simple et clair Empty Re: [Toutes versions SAUF AwesomeBB] Un "Qui est en ligne" simple et clair

le Sam 21 Sep - 17:04
Hello !

Le code a été corrigé au niveau de la CSS.

@Padsky, je sais que tu l'as pris, il y a une erreur au niveau de la CSS, il est écrit :
Code:
  margin: 5px; auto 0;
à trois endroits, il faut retirer le premier ; Wink

Bises

_________________
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 à 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.@@

Post-It des Râleuses