• Il y a un léger changement de couleur au passage de la souris sur les sous-forums
• La phrase derrière le titre (ici "the middle of the story") est modifiable directement dans le template.
• Si vous souhaitez, comme sur le modèle, avoir une petite phrase d'accroche en début de description des catégories (ici "Hello hello"), rajoutez ceci avant de mettre la description de votre catégorie :

Code:

<d>Hello hello + </d>

• Toutes les couleurs se trouvent dans le "root" au début du CSS. Pour comprendre ce que c'est, rendez-vous sur le petit tuto ici > www.

Pour installer ces catégories, rien de plus simple. Rendez-vous dans Panneau d'administration > Affichage > Templates > Général > index_box et remplacez la totalité de ce qui s'y trouve par :

Code:

<!-- BEGIN catrow -->
<!-- BEGIN tablehead -->

<div class="hl_cat_total_title">{catrow.tablehead.L_FORUM}<div class="hl_cat_sous_sub">anything's possible if you've got enough nerve</div></div>


<!-- END tablehead -->
<!-- BEGIN forumrow -->


<div class="hl_cat_total">
  
  <div class="hl_cat_icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll 100%;"></div>
  
  <div class="hl_cat_ava">
      <!-- BEGIN avatar -->
      <div class="hl_cat_ava_inside">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
      <!-- END avatar -->
    </div>
  
  <div class="hl_cat_middle">
    
    <div class="hl_cat_middle_title"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="hl_cat_middle_desc">{catrow.forumrow.FORUM_DESC}</div>
    
    <div class="hl_cat_right_lastpost">
        <!-- BEGIN switch_topic_title -->
        <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
        <!-- END switch_topic_title -->
        {catrow.forumrow.USER_LAST_POST}
      </div>
    
    </div>
  
    <div class="hl_cat_right">
      
      <div class="hl_cat_sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS} <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
      
      <div class="hl_cat_right_stats">{catrow.forumrow.TOPICS} {L_TOPICS} ⊰ {catrow.forumrow.POSTS} {L_POSTS}</div>

  </div>
</div>
  


<!-- END forumrow -->

<!-- BEGIN tablefoot -->

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


<div class="hl_bottomcat_links">
  <!-- BEGIN switch_on_index -->
  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a>
  <!-- END switch_on_index -->
  <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
  <!-- BEGIN switch_on_index -->
  <!-- BEGIN switch_delete_cookies -->
  <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">supprimer les cookies</a>
  <!-- END switch_delete_cookies -->
  <!-- END switch_on_index -->
  <!-- BEGIN switch_user_logged_in -->
  <a href="{U_MARK_READ}" accesskey="m">{L_MARK_FORUMS_READ}</a>
  <!-- END switch_user_logged_in -->
</div>


Ensuite, rendez-vous dans Panneau d'administration > Affichage > Images et Couleurs > Couleurs & CSS > Feuille de style CSS (et pensez bien, tout en bas, à cocher "non" à "Optimiser votre CSS", puis copiez collez ce qui suit :

Code:

:root {
  --red:#bf928e;
  --pinkyred:#c4b3b3;
  --text:#A6A6A6;
 --wrap:rgba(22, 22, 22, 0.8);
--deentre:#242424;
}
d {
  color: var(--red);
  font: 12px playfair display;
  letter-spacing: 1px;
  font-style: italic;
}
.hl_cat_total_title {
  border-radius: 6px;
  margin: 15px 0px;
  padding: 50px 20px;
  text-align: center;
  color: var(--text);
  font: 19px Playfair Display;
  background-image: url(https://imgur.com/7Bhze2O.png);
  background-size: 100%;
  background-position: 50% 50%;
  position: relative;
  z-index: 9;
}
.hl_cat_total_title h2 {
  text-align: center;
  color: var(--text);
  font: 23px Playfair Display;
  letter-spacing: 2px;
  text-transform: uppercase;
  background: -webkit-linear-gradient(-225deg, var(--red) 0%, var(--pinkyred) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hl_cat_sous_sub {
  text-align: center;
  width: 100%;
  position: absolute;
  top: 28px;
  z-index: -1;
  font: 30px Hijrnotes;
  text-transform: lowercase;
  opacity: 0.3;
  margin-left: -20px;
}
.hl_cat_total {
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  background: var(--wrap);
  position: relative;
  margin-bottom: 5px;
}
.hl_cat_icon {
  border-radius: 6px;
  width: 30px;
  height: 130px;
  background-size: 120% !important;
  background-position: 50% 50% !important;
  margin-left: 4px;
}
.hl_cat_sousfo {
  border: solid 1px var(--deentre);
  border-radius: 6px;
  margin-bottom: 9px;
  transition: all 300ms;
  font-size: 0;
  height: 105px;
  overflow: auto;
  padding:5px;
}
.hl_cat_sousfo a {
  display:block;
  color: var(--text);
  font: 10px Playfair Display;
  margin: 3px;
  border-bottom:1px solid var(--red);
  transition: all 300ms;
}
.hl_cat_sousfo a:hover {
  transition:all 300ms;
  border-bottom: 1px solid var(--text);
}
.hl_cat_middle {
  width: 520px;
}
.hl_cat_middle_title {
  margin-bottom: 10px;
  padding: 5px 10px 5px 0px;
  border-bottom: 1px solid var(--text);
}
.hl_cat_middle_title a {
  letter-spacing: 1px;
  font: 11px Playfair Display;
  color: var(--text);
  font-weight: bold;
  text-transform: uppercase;
}
.hl_cat_middle_desc {
  border: solid 1px var(--deentre);
  padding: 5px 10px;
  height: 68px;
  overflow: auto;
  text-align: justify;
  color: var(--text);
  font: 11px Arial;
  border-radius: 6px;
  line-height: 14px;
}
.hl_cat_ava {
  width: 110px;
  border-radius: 6px;
}
.hl_cat_ava_inside {
  width: 110px;
  height: 128px;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0.8;
  border: solid 1px var(--pinkyred);
  transition: all 800ms;
}
.hl_cat_ava_inside img {
  width: 100%;
  filter: grayscale(60%);
  transition: all 800ms;
}
.hl_cat_ava_inside img:hover {
  transition:all 800ms;
  filter: grayscale(0%);
}
.hl_cat_right {
  width: 180px;
}
.hl_cat_right_lastpost {
  padding: 2px 2px 2px 8px;
  color: var(--text);
  font: 9px Arial;
  background: var(--black);
  border-radius: 6px;
  border: solid 1px var(--deentre);
  margin-top: 6px;
}
.hl_cat_right_lastpost a {
  color: var(--pinkyred);
  font: 10px Playfair Display;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0px 4px;
}
.hl_cat_right_lastpost br {
  display:none;
}
.hl_cat_right_lastpost strong {
  letter-spacing: 0px;
  text-transform: initial;
  margin-left: 3px;
}
.hl_cat_right_stats {
  text-align: center;
  background-image: linear-gradient(-225deg, var(--red) 0%, var(--pinkyred) 100%);
  color: var(--black);
  font: 9px Playfair Display;
  text-transform: uppercase;
  border-radius: 6px;
  padding: 1px;
  letter-spacing: 1px;
}
.hl_bottomcat_links {
  text-align: center;
  padding: 10px 0px 25px 0px;
}
.hl_bottomcat_links a {
  color: var(--text);
  margin: 0px 10px;
  font: 12px Playfair Display;
  text-transform: lowercase;
}

Pour les images des catégories, je vous en propose déjà réalisées. Naturellement, vous pouvez en changer. Si vous souhaitez garder celles déjà faites, voici où les installer et les images.
Rendez-vous dans Panneau d'administration > Affichage > Images et Couleurs > Gestion des images > Mode avancé > Icônes du forum :

Pour les images de "pas de nouveaux messages", mettez le lien suivant dans les cases "Catégorie" et Forum"

Code:

https://zupimages.net/up/23/26/534i.png

Pour les images de "nouveau message", mettez le lien suivant dans les cases "Catégorie - Nouveau" et "Forum - Nouveau" :

Code:

https://zupimages.net/up/23/26/yjie.png

Enjoy