[Toutes versions] Qui est en Ligne - 3 colonnes - sans images

Bonjour à toi

Aujourd'hui je te propose un codage simple, sans image, pour ton Qui est en Ligne

Voilà un aperçu :

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

Après ces quelques prérequis et choses à savoir, on rentre dans le vif du sujet !


C'est la même chose sur toutes les versions : tout se passe dans le template qui s'appelle index_body (PA -> Affichage -> Template -> général)

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

Code:

<div id="qeel">
  <h2>Qui vient nous visiter ?</h2>
  <div class="d-flex">
      <div class="case_qeel">
        <h3>Les Statistiques</h3>
        <p>{TOTAL_POSTS}<br />
            {TOTAL_USERS}<br />
            {NEWEST_USER}
            <table>
              {L_WHOSBIRTHDAY_TODAY}
              {L_WHOSBIRTHDAY_WEEK}
            </table>
        </p>
      </div>
      <div class="case_qeel">
        <h3>En ce moment</h3>
        <p>{TOTAL_USERS_ONLINE}<br />
            {RECORD_USERS}<br />
            <br />
        {LOGGED_IN_USER_LIST}</p>
      </div>
      <div class="case_qeel">
        <h3>Les groupes</h3>

        <p>{GROUP_LEGEND}</p>
      </div>
  </div>
  <table>{L_CONNECTED_MEMBERS}</table>
</div>

On enregistre et on oublie pas de publier le template


Sur ModernBB, tu auras cette ligne en plus en bas de ton forum :

Spoiler:

Pour la supprimer, rends toi dans le template "overall_footer_begin" et supprime cette partie de code :

Code:

<div class="statistics">
 <div class="wrap">
 <div class="statistics-item">
 {TOTAL_POSTS}
 </div>
 <div class="statistics-item">
 {TOTAL_USERS}
 </div>
 <div class="statistics-item">
 {NEWEST_USER}
 </div>
 </div>
</div>

N'oublies pas d'enregistrer et de publier


Dans la CSS de ton forum (PA -> Affichage -> Couleurs -> Feuille de style CSS) colle la CSS :

Code:


/******DEBUT DU QEEL******/
#qeel{
 margin:auto; /***on centre le qeel sur la page ***/
}

#qeel h2{
 text-align:center; /*** On aligne le texte au milieu ***/
  font-size:35px;/*** taille du titre ***/
  margin: 10px 0 0 !important; /*** Gestion des marges du titre ***/
  color:black; /*** couleur du titre ***/
}
#qeel h3{
 text-align:center;
  font-size:25px;
  margin: 10px 0 0 !important;
}
.d-flex{
 display:flex; /**** On met les cases les unes à coté des autres****/
 justify-content:space-around; /****On gère l'espace entre chaque case***/
}
.case_qeel{
  background:#d5a875; /*** Couleur de fond des cases ***/
  border:1px black solid; /*** bordure ***/
  width:31%; /*** largeur d'une case ***/
  margin:1%; /*** espacement entre chaque case ***/
  height:250px; /*** Hauteur des cases ***/
}
.case_qeel p{ /*** gestion du texte dans les cases ***/
  max-height:290px;
  overflow:auto; /*** mise en place d'une scrollbarre si beaucoup de texte***/
  padding:5px; /*** espacement entre le bord et le texte***/
  text-align:center;
  font-size:12px;
}

/*** gestion des parties gênantes sur FA : les anniversaires et derniers connectés***/
#qeel table{
 margin: auto;
  text-align:center;
  font-size:12px;
  line-height:14px;
}
#qeel table .row1{
 background:none;
}
#qeel table .row1 span,
#qeel a{
    font-size: 12px;
}
/****FIN  DU QEEL*****/


---

Tout est personnalisable : les hauteurs de colonnes, les tailles de texte, les polices, les couleurs... N'hésite pas !

La CSS est commenté afin de pouvoir t'aider un peu. N'hésite pas à poser des questions si tu ne comprends pas une partie

---

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