Idea Les Râleuses sont absentes.. Idea
Le forum est en vacances mais toutes nos ressources restent disponibles. (En savoir +)
Le Deal du moment : -21%
Housse de transport et protection Tomtoc pour console ...
Voir le deal
14.99 €

Aller en bas
Mäven
Mäven
Râleuse (Admin)
Informations : Absente / peu présente le soir à partir de 18h30
----
Idea Viens papoter avec nous sur le discord

Messages : 4323
https://tambouille-raleuses.forumactif.com/

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

le Ven 24 Jan 2020 - 11:28

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 :
[Toutes versions] Qui est en Ligne - 3 colonnes - sans images Qeel_310

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 !

Partie HTML : modifions le template

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

ModernBB

Sur ModernBB, tu auras cette ligne en plus en bas de ton forum :
Spoiler:
[Toutes versions] Qui est en Ligne - 3 colonnes - sans images Modern10

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

Partie CSS : attaquons la mise en page

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

Toutes versions

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


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



Post-It des Râleuses