Bonjour, bonsoir -- voici les premières catégories en libre-service que je poste. Comme elles sont codées en flex, la largeur de votre forum ne devrait pas poser de problème comme elles se redimensionnent toute seule, mais je préfère quand même faire un petit tutoriel pour que vous puissiez l'installer sans problème.

VERSION LIVE DES CATÉGORIES
LIEN VERS LA PA QUI VA AVEC

---

(1) Avant toute chose, voici les informations importantes:

Avant toute chose, s'il vous plaît n'oubliez pas de créditer les catégories. Si je remarque qu'il n'y en pas, je vais le notifier à FA. Ce sont des catégories, pas une signature et ça m'a pris beaucoup de temps pour les terminer, du coup s'il vous plaît respectez le travail qui a été fait.


Si vous avez des questions je vous renvoie à mon tumblr et/ou ce sujet sur le forum.

---

(2) LES CODES

HTML

Pour installer l'HTML, il vous suffit d'aller dans le panneau d'administration, affichage, templates, général, index_box

Code:

<!--PARTIE LIENS EN HAUT (voir nouveaux messages, messages sans réponses, etc.)-->

<div class="liens_pa">
 <!-- BEGIN switch_user_logged_in -->
 <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
 <!-- END switch_user_logged_in -->
 <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 <!-- BEGIN switch_user_logged_in -->
 <a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a>
 <!-- END switch_user_logged_in -->
</div>

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->
<div class="cat_titre">
  {catrow.tablehead.L_FORUM}
</div>
<!-- END tablehead -->

<!-- BEGIN forumrow -->
<div class="cat_container">
  <div id="cate" class="liensforums">
    <!-- BEGIN switch_moderators_links -->
      {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
    <!-- END switch_moderators_links -->
    <span id="liensforums2">
      {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
    </span>
  </div>
  <div id="cate" class="imgnew">
    <img src="{catrow.forumrow.FORUM_FOLDER_IMG}"/>
  </div>
  <div id="cate" class="titredescriforum">
    <div class="titreforum">
      <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
    <div class="descricat">
      {catrow.forumrow.FORUM_DESC}
    </div>
  </div>

  <div id="cate" class="nbsujnotes">
    <div class="nbsujnotes2">
      {catrow.forumrow.TOPICS} <br/>SUJETS
    </div>
    <div class="nbsujnotes2">
      {catrow.forumrow.POSTS} <br/>NOTES
    </div>
  </div>
    
  <div class="derniermess">
      <div class="ti_derniermess">
        THE LAST SONG
      </div>
    <div class="avatarcat">
      <!-- BEGIN avatar -->
        {catrow.forumrow.avatar.LAST_POST_AVATAR}
      <!-- END avatar -->
    </div>
    <div class="txt_derniermess">
      <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}"><br>{catrow.forumrow.LATEST_TOPIC_NAME}</a>
      <!-- END switch_topic_title -->
      {catrow.forumrow.USER_LAST_POST}
  </div>
</div>
</div>
<!-- END forumrow -->
<!-- BEGIN tablefoot -->

 
 <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<div class="liens_pa">
 <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 <!-- BEGIN switch_delete_cookies -->
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

CSS

Pour installer le CSS, il faut que vous vous rendiez dans panneau d'administration, affichage, couleurs, onglet feuille de style css. Vous copiez/collez le code dans son entièreté.

Code:

:root {
    --acc1: #000;
    --acc2:#DD9F8C;
    --acc3:#fff;  
    --white: #fff;
    --black: #000;
    --border: #ededed;
    --border1: 1px solid #ededed;
    --background1: #f1f1f1;
    --background2: #ffffff;
    --background3: #000000;
    --degrade: linear-gradient(-45deg,#ccc9c7,#DD9F8C)!important;
    --degrag: #ccc9c7;
}

/* CATÉGORIES */

/*liens voir nouveaux messages, supp cookies (en haut et en bas des catés*/

.liens_pa {
 background: var(--background2);
    padding: 5px 0 7px;
    border-radius: 7px;
    margin-top: 9px;
    text-align: center;
}

.liens_pa a {
    background: var(--background1);
    border-radius: 7px;
    padding: 1px 10px;
    margin: 0 10px;
    text-transform: uppercase;
    font-size: 10px;
}

/*Titre de la catégorie*/

.cat_titre { background: var(--background3);
    border-radius: 7px 7px 0 0;
    color: #fff;
    font-weight: 300;
    letter-spacing: 3px;
    margin-top: 14px;
    padding: 9px 20px;
    text-transform: uppercase;}

.cat_titre h2 {color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 0;}

/*Rassemblement de balises répétitives*/

#cate {margin: 0 7px 0 0;
    border-radius: 7px;}

.liensforums, .imgnew, .txt_derniermess {
  border: var(--border1); }

/*Corps des catégories*/

.cat_container {  background: var(--background2);
    border-radius: 7px;
    height: 114px;/*à modifier seulement si vous la voulez plus haute*/
    padding: 10px;
    margin: 0 0 4px;
    display: flex;
font-size:14px;}

/*Partie liens forums*/

.liensforums { font-size: 0px;
    overflow: auto;
    width: 18%;
    padding: 5px;
    text-align: left;}

#liensforums2 a {
display: block;
    text-transform: lowercase;
    font-size: 14px;
}

#liensforums2 a::before {
    color: #DD9F8C;
    content: " ● ";
}

/*Partie image new, no new etc.*/

.imgnew {    padding: 3px;
    width: 5%;}

.imgnew  img {     border-radius: 7px;
height: 100%;
    object-fit: cover;
    width: 100%;}

/*Partie titre du forum et description*/

.titredescriforum {  
    width: 65%;}

/*titre forum*/
.titreforum {    background: var(--background1);
    border-radius: 7px;
    padding-left: 13px;
    text-transform: lowercase;
    text-align: left;}

.titreforum a {     font-size: 15px;
    font-weight: 700;
    color: #000;}

/*description*/
.descricat {    height: 67px; /*à modifier si vous changer la height de .cat_container*/
    margin-top: 4px;
    text-align: justify;
    overflow: auto;
    line-height: 20px;
    border-top: var(--border1);}

/*Partie nb de sujets et messages*/

.nbsujnotes {     display: flex;
    flex-wrap: wrap;
    max-width: 60px;}

.nbsujnotes2 {  background: var(--background1);
    border-radius: 4px;
    color: var(--acc1);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    min-width: 60px;
    display: flex;
    justify-content: center;
    align-items: center;}

.nbsujnotes2:nth-child(2) {margin-top:7px;
  color:var(--acc2);}

/*Partie dernier message posté*/

.derniermess {
        max-width: 164px;}

/* titre avec écrit last song*/
.ti_derniermess {       background-image: var(--degrade);
    border-radius: 4px;
    color: var(--acc3);
    font-size: 11px;
    margin: 0 0 0 21px;
    text-align: center;
    min-width: 140px;}

/*dernier avatar*/
.avatarcat {    background: var(--background2);
    border: var(--border1);
    border-radius: 50px;
    margin-top: -18px;
    padding: 2px;
    position: absolute;
}

.avatarcat img {        border-radius: 50px;
    width: 39px;
    height: 39px;
    object-fit: cover;}

/*lien vers dernier sujet et pseudo*/
.txt_derniermess {
    border-radius: 7px;
    margin: 5px 0 0;
    padding: 6px 0 7px 32px; /*possible que 32px ne soit pas assez selon la version utilisée, vous pouvez augmenter si avatar empiète sur le texte*/
    text-transform: lowercase;
    height: 73px; /*à modifier si vous changer la height de .cat_container*/
    display: flex;
    line-height: 13px;
    flex-wrap: wrap;
    align-items: center;
}

.txt_derniermess a {    font-size: 14px;}

.txt_derniermess br {
content: "";
    margin: 2em 0 0 4em;
    display: block;
    font-size: 24%;
}


---

(3) les éléments modifiables

Si vous souhaitez modifier la largeur en hauteur des catégories, il vous faudra modifier trois balises. Sachez que d'une version FA à une autre la hauteur de 92px (la hauteur actuelle des catégories) peut varier, chez les uns ce sera super large, chez d'autres non. il faut que vos catégories soient assez larges afin que le texte dans la partie dernier message soit en trois ligne.

D'abord la balise .cat_container qui est le container de tous les éléments de vos catégories. là vous pouvez modifier comme vous voulez.

Après avoir modifié la première balise, il vous faudra modifier la balise .descricat qui contient la description du forum. Attention à ne pas la faire trop haute, le texte va sinon dépasser.
(Dans l'exemple elle est actuellement à 67px)

En dernière étape il vous faudra modifier le height de la balise .txt_derniermess qui contient le lien vers le dernier message posté ainsi que le pseudo du posteur.
(Dans l'exemple elle est à 55px, si vous modifiez, il suffit de garder un écart de 12px à la balise .descricat).

---

(4) mes conseils perso

J'ai quelques préférences d'activées sur FA quand je code mes catégories, ce que je vous conseillerai de faire aussi.

MODIFIER LA LONGUEUR DE LA DATE
La date dans la partie dernier message posté peut faire un peu sauter le code si elle est trop longue, du coup je conseille d'activer la date en mode courte.

Ça se fait en deux étapes:

01. il faut aller dans Général > Forum > Configuration > Format de la date > 00.00.22 00:00
02. il faut aller dans le profil du compte admin: Profil > Préférences > Format de la date > 00.00.22 00:00

TAILLE DE LA FONT
Je mettrais la taille de la font à pas moins de 14px en standard de votre forum. Y a quelques éléments dans le CSS qui ont une taille de font plus petites, ce sont souvent les éléments qui sont en majuscule. Pour tout ce qui est texte (description, liens des sous-forums) je prendrais large afin que les utilisateurs puissent bien lire le texte.

ÉLÉMENTS DE BASE
Y a quelques éléments de base à activer afin qu'on puisse tout voir comme c'est dans l'exemple.

---

(5) mot de fin

Je le redis, mais vraiment si vous avez un problème ou une question, surtout n'hésitez pas. Je vous conseille dans un premier temps de reprendre la font utilisée si vous n'avez pas encore trop d'expérience dans le codage, comme ca vous avez très peu à modifier.

Je serais bien entendu très heureuse de voir le résultat final dans le cas où vous utilisez les catégories, donc n'hésitez vraiment pas à me l'envoyer. Vous pouvez également laisser une suggestion dans ce sujet.

FORMULAIRE CRÉÉ PAR ICE AND FIRE. (2021)