Pour installer le HTML, rendez-vous dans votre panneau d'administration > Affichage > Templates > Général > le template "index-box". Remplacez tout ce que s'y trouve par :

Code:

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

<div class="hl_cat_total_title">
  <h2>{catrow.tablehead.L_FORUM}
  <div class="hl_cat_title_sub">Sous phrase ici de votre choix</div>
  </h2>
</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_sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}<strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}</div>
  <div class="hl_cat_middle">
    <div class="hl_cat_middle_title">
      <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="hl_cat_middle_desc">{catrow.forumrow.FORUM_DESC} </div>
  </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_right">
      <div class="hl_cat_right_ima"><img src="https://placehold.co/36x20"/><img src="https://placehold.co/36x20"/><img src="https://placehold.co/36x20"/></div>
      
      <!-- BEGIN switch_topic_title -->
      <div class="hl_cat_right_lastpost"><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a> {catrow.forumrow.USER_LAST_POST}</div>
      <!-- END switch_topic_title -->
      
      <div class="hl_cat_right_stats">{catrow.forumrow.TOPICS} sujets ⊰ {catrow.forumrow.POSTS} messages</div>
  </div>
</div>

<!-- END forumrow -->

<!-- BEGIN tablefoot -->

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

Pour ensuite installer votre CSS, allez dans > Panneau d'administration > Affichage > Images et couleurs > Couleurs & CSS < l'onglet "feuille de style CSS" et pensez d'abord à désactiver l'optimisation du CSS tout en cas. Puis, où vous le voulez, ajoutez ceci :

Code:

:root {
  --lavender: #e9e2d7;
  --pink: #e8d1cd;
  --sage: #e3e8cf;
  --thyme: #d6e6cf;
  --laurel: #96aace;
  --whazel: #c79cd3;
  --darkgrey: #1d2337;
  --blue: #c894ab;
  --purple: #c15d88;
  --line: #141416;
  --shadow: #363f4f;
  --linku: #d2d2d2;
}
.hl_cat_total_title {
  background-image: url(https://i.imgur.com/tjLMCQf.png);
  border-radius: 6px;
  margin: 15px 0px;
  padding: 5px 5px 8px 5px;
  background-position: bottom;
  text-align: center;
  color: var(--linku);
  font: 19px Playfair Display;
  background-size: 100%;
}
.hl_cat_total_title h2 {
  text-align: center;
  color: var(--linku);
  font: 19px Playfair Display;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px black;
}
.hl_cat_title_sub {
  text-shadow: 2px 2px 1px var(--darkgrey);
  letter-spacing: 8px;
  font: 9px Calibri;
  text-transform: uppercase;
  width: 600px;
  margin: 0px auto;
  border-radius: 6px;
  color: var(--blue);
}
.hl_cat_total {
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px;
  background: var(--darkgrey);
  position: relative;
  width:810px;
  margin:0px auto 8px auto;
}
.hl_cat_icon {
  border-radius: 6px;
  width: 29px;
  height: 115px;
  background-size: 144% !important;
  background-position: 50% 50% !important;
  margin-left: 4px;
}
.hl_cat_sousfo {
  border: solid 1px var(--shadow);
  border-radius: 6px;
  width: 163px;
  height: 105px;
  overflow: auto;
  font-size: 0px;
  padding-right: 5px;
  line-height: initial !important;
  transition: all 300ms;
}
.hl_cat_sousfo a {
  color: var(--linku);
  display: block;
  font: 10px Playfair Display;
  margin: 3px;
  border-bottom: 1px solid var(--blue);
  transition: all 300ms;
  text-align: left;
}
.hl_cat_middle {
  width: 320px;
}
.hl_cat_middle_title {
  background-image: linear-gradient(-225deg, var(--blue) 0%, var(--purple) 100%);
  border-radius: 6px;
  margin-bottom: 10px;
  padding:9px;
}
.hl_cat_middle_title a {
  letter-spacing: 1px;
  font: 11px Montserrat;
  color: var(--darkgrey) !important;
  font-weight: bold;
}
.hl_cat_middle_desc {
  border: solid 1px var(--shadow);
  padding: 5px 10px;
  height: 80px;
  overflow: auto;
  text-align: justify;
  color: var(--linku);
  font: 11px Arial;
  border-radius: 6px;
  line-height: 14px;
}
d {
  color: var(--pink);
  font: 12px playfair display;
    font-style: normal;
  letter-spacing: 1px;
  font-style: italic;
}
.hl_cat_ava {
  width: 80px;
}
.hl_cat_ava_inside {
  width: 80px;
  height: 115px;
  overflow: hidden;
  border-radius: 6px;
  opacity: 0.8;
}
.hl_cat_ava_inside img {
  width: 100%;
}
.hl_cat_right {
  border-radius: 6px;
  border: solid 1px var(--shadow);
  padding: 5px;
  width: 150px;
}
.hl_cat_right_ima {
  text-align: center;
}
.hl_cat_right_ima img {
  border-radius: 6px;
  width: 36px;
  height: 20px;
  margin: 2px 5px 5px 5px;
}
.hl_cat_right_lastpost {
  text-align: center;
  padding: 14px 2px 10px 2px;
  color: var(--linku);
  font: 9px Arial;
  margin-bottom: 5px;
  background: var(--line);
  border-radius: 6px;
  height: 60px;
}
.hl_cat_right_lastpost a {
  color: var(--blue);
  font: 9px Playfair Display;
  letter-spacing: 2px;
}
.hl_cat_right_stats {
  text-align: center;
  background-image: linear-gradient(-225deg, var(--blue) 0%, var(--purple) 100%);
  color: var(--darkgrey);
  font: 9px Calibri;
  text-transform: uppercase;
  border-radius: 6px;
}

Enjoy