Pour le HTML, remplacez l'intégralité de votre template index_box par ce code :

Code:

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

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

<div class="categories">
  <div class="newsmessages"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="imgFRM" /></div>
<!-- BEGIN avatar -->
<div class="lastvava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div>
 <!-- END avatar -->
  
  <div class="description">{catrow.forumrow.FORUM_DESC}</div>
  <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <div class="titreFRM"><a href="{catrow.forumrow.U_VIEWFORUM}"> {catrow.forumrow.FORUM_NAME}</a></div>
  <div class="lastpost">{catrow.forumrow.LAST_POST}</div>
  
</div>

<!-- END forumrow -->
<!-- END catrow -->

Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :

Code:

/*********CATEGORIES********/
  @font-face {
    font-family: jasper;
    src: url(https://files.jcink.net/uploads/keepsakerp/Jasper.ttf);
}
.tleCAT {
  text-align:right;
}
.tleCAT h2 {
    -webkit-transform: rotate(2deg);
    -moz-transform: rotate(2deg);
    font: 86px jasper;
    background: -webkit-linear-gradient(#b65757, #773b3b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    height: 150px;
    margin-top: -90px;
}
.categories {
    width: 950px;
    height: 200px;
    background-image: url(https://imgur.com/gWhzQ6P.png);
    background-size: 100%;
    margin-top: -100px;
    margin-bottom: 110px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    box-shadow: 0 15px 20px -12px rgb(76, 44, 44);
position:relative;
}
.newsmessages {
    position: absolute;
    margin-left: -407px;
}
.newsmessages img {
  height:200px;
}
.lastvava {
    width: 200px;
    height: 80px;
    overflow: hidden;
    margin: 10px;
    border: solid 5px #8f4545;
    box-shadow: 0 15px 20px -12px rgb(76, 44, 44);
}
.lastvava img {
    object-fit: cover;
}
.description {
    width: 480px;
    height: 70px;
    margin: 10px;
    padding: 10px;
    overflow: auto;
    text-align: justify;
    color: black;
    font: 12px calibri;
    background: rgba(237, 230, 228, 0.7);
}
.titreFRM {
    text-align: center;
    position: absolute;
    top: 112px;
    width: 554px;
    color: #ede6e4;
}
.titreFRM a {
    background: -webkit-linear-gradient(#ede6e4, #a29696);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font: 25px jasper;
}
.sous-forum {
    width: 160px;
    background: #7a3d3c;
    text-align: center;
    overflow: auto;
    height: 180px;
    padding: 10px;
    font-size: 0px;
}
.sous-forum a {
    background: #9a858b;
    color: #0a0c0e;
    font: 11px calibri;
    margin: 2px;
    padding: 6px;
    text-align: center;
    text-transform: uppercase;
    width: 134px;
    display: block;
    border: solid 2px #824040;
    position: relative;
}
.lastpost {
    background-image: url(https://imgur.com/Xbs8pBn.png);
    background-size: 100%;
    width: 670px;
    margin-left: -137px;
    margin-top: -50px;
    height: 28px;
    font: 7px calibri;
    color: black;
    padding-left: 40px;
}
.lastpost a, .lastpost strong {
    text-transform: uppercase;
    font: 12px calibri;
    padding-left: 5px;
}
.lastpost br {
  display:none;
}
.lastpost img {
    padding-left: 236px;
    width: 18px;
    position: relative;
    top: 5px;
}

Icone "pas de nouveaux messages" :

Code:

https://imgur.com/pYrIpBw.png

Icone "nouveaux messages" :

Code:

https://imgur.com/Zdaf9ZE.png