[Toutes versions SAUF AwesomeBB] Des catégories claires et épurées

Bonjour à toi

Tu cherches une idée de codage pour les catégories de ton forum ? Je viens t'en proposer un modèle ici et je n'ai plus aucune idée de nom   Alors faisons simple, 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
La structure de ton forum, quelque soit la version, doit être en "moyen" de la seconde ligne (PA > Affichage > Structure et hiérarchie)

Après tout ces 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_box (PA -> Affichage -> Template -> général)

Repère ces deux commentaires :

Code:

<!-- BEGIN catrow -->

et

Code:

<!-- END catrow -->

Supprime tout ce qu'il ya entre les 2 (oui oui, tout ) et remplace le par ceci :

Code:

<!-- BEGIN tablehead -->
<div class="titre_categorie">
  {catrow.tablehead.L_FORUM}
</div>
<div class="forumline categorie">
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <!-- END cathead -->
  <!-- BEGIN forumrow -->

  <!-- BEGIN inc -->

  <!-- END inc -->

  <div class="titre_image d-flex">

    <div class="titre">
      <h{catrow.forumrow.LEVEL} class="hierarchy">
      <span class="forumlink">
        <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">
          {catrow.forumrow.FORUM_NAME}
        </a><br />
      </span>
    </h{catrow.forumrow.LEVEL}>
  </div>
</div>
<div class="forums">

  <div class="forums_contenu">
    <div class="contenu_gauche">
      <div class="d-flex">
        <div class="image">
          <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </div>
        <div class="description">
          <p>
            <span class="genmed">
              {catrow.forumrow.FORUM_DESC}
            </span>
          </p>
        </div>
      </div>
      <span class="gensmall">
        <!-- BEGIN switch_moderators_links -->
        {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
        <!-- END switch_moderators_links -->
        <span id="lien">
          {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </span>
    </div>
    <div class="contenu_droite">
      <!-- BEGIN avatar -->
      <span class="lastpost-avatar">
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
      </span>
      <!-- END avatar -->
      <span class="gensmall">
        {catrow.forumrow.TOPICS} sujets -
      </span>  
      <span class="gensmall">
        {catrow.forumrow.POSTS} messages
      </span>
      <br />
      <span class="gensmall">
        {catrow.forumrow.LAST_POST}
      </span>
    </div>
  </div>
</div>
<!-- END forumrow -->
<!-- BEGIN catfoot -->

<!-- END catfoot -->
<!-- BEGIN tablefoot -->
</div>
<img src="{SPACER}" alt="" height="5" width="1" />
<!-- END tablefoot -->

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 :

Code:

   
*{
  box-sizing:border-box;    
}
/*********************CATEGORIES***********************/
.categorie{
  background : #4C5F85;
  border: 2px solid #000;
  width: 100%;
  margin: auto;
}

.titre_categorie h2{
  text-align:center;
  font-size:28px;
  padding:0;
  margin:0;
  line-height: 35px;
}
.forums{
  width:97%;
  background:#798CB0;
  border: 2px solid #000;
  margin:5px auto;
  padding:5px;
}
.forums_contenu{
  display:flex;
  position:relative;
  padding:0 20px;
  width: 100%;
  align-items: center;
}
.forums_contenu .contenu_gauche{
  width:85%;
}
.d-flex{
  display:flex;
}
.titre_image{
  width:100%;
  z-index:999;
}
.titre_image .titre{
  padding-left:25px;

}
.titre_image .titre a{
  font-size:20px;
   line-height:25px;
   text-decoration:none;
}
.titre_image .image{
  width:5%;
  padding-left:50px;
}

.description{
  width:100%;
}
.description p{
  max-height:80px;
  overflow:auto;
  text-align:justify;
  padding:5px 5px 5px 10px;
  text-indent:15px;
}
.contenu_droite{
  width:15%;
  padding:5px;
  text-align:center;
}

.lastpost-avatar img{
  width:50px;
  height:75px;
}

/*********************FIN CATEGORIES***********************/

La CSS est la même, on va simplement ajouter ceci :

Code:

.lastpost-avatar:after{
content:none;
}


Tu peux décider d'utiliser ce LS sur AwesomeBB, mais ce LS n'est pas terrible sur cette version...
Les couleurs de texte et de liens sont les couleurs de ton forum : c'est à cet endroit que tu dois les choisir.

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