QEEL #1

Optimisé pour l'affichage de 6 groupes. N'hésitez pas à demander de l'aide pour en ajouter / retirer.

phpBB2

Dans votre panneau d'administration, Affichage > Templates > Général > index_body, trouvez le code suivant :

Code:

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
 <tr>
 <td class="catHead" colspan="2" height="28">
 <!-- BEGIN switch_viewonline_link -->
 <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
 <!-- END switch_viewonline_link -->

 <!-- BEGIN switch_viewonline_nolink -->
 <span class="cattitle">{L_WHO_IS_ONLINE}</span>
 <!-- END switch_viewonline_nolink -->
 </td>
 </tr>
 <tr>
 <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
 <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
 {TOTAL_USERS}<br />
 {NEWEST_USER}</span></td>
 </tr>
 <tr>
 <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
 {RECORD_USERS}<br />
 <br />
 {LOGGED_IN_USER_LIST}</span></td>
 </tr>
 {L_CONNECTED_MEMBERS}
 {L_WHOSBIRTHDAY_TODAY}
 {L_WHOSBIRTHDAY_WEEK}
 <tr>
 <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
 </tr>
 <!-- BEGIN switch_chatbox_activate -->
 <tr>
 <td class="row1">
 <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
 <!-- BEGIN switch_chatbox_popup -->
 <div id="chatbox_popup"></div>
 <script type="text/javascript">
 //<![CDATA[
 insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
 //]]>
 </script>
 <!-- END switch_chatbox_popup -->
 </span>
 </td>
 </tr>
 <!-- END switch_chatbox_activate -->
</table>
<!-- END disable_viewonline -->

Remplacez-le par :

Code:

<!-- BEGIN disable_viewonline -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cousine&family=Montserrat:wght@900&family=Roboto&display=swap" rel="stylesheet">
<div class="qeelFlat">
  <div class="qeelFlat-titre"><h2>Qui est en ligne ?</h2></div>
  <div class="qeelFlat-content">
  <div class="qeelFlat-connectes24" id="qeel-connectes24"><table>{L_CONNECTED_MEMBERS}</table></div>
  <div class="qeelFlat-mid">
  <div class="qeelFlat-dernier" id="qeel-dernier"><h3>Bienvenue sur Lorem ipsum</h3><div>{NEWEST_USER}</div></div>
  <div class="qeelFlat-groupes">
    <div><a href="">Groupe 1</a></div>
    <div><a href="">Groupe 2</a></div>
    <div><a href="">Groupe 3</a></div>
    <div><a href="">Groupe 4</a></div>
    <div><a href="">Groupe 5</a></div>
    <div><a href="">Groupe 6</a></div>
  </div>
  </div>
  <div class="qeelFlat-right">
  <div class="qeelFlat-stats" id="qeel-stats">{TOTAL_USERS_ONLINE}</div>
    <div class="qeelFlat-right-middle">
      <div class="qeelFlat-connectes" id="qeel-connectes"><div>{LOGGED_IN_USER_LIST}</div></div>
  <div class="qeelFlat-stats2" id="qeel-stats2"><div>{TOTAL_POSTS}</div><div>{TOTAL_USERS}</div></div>
    </div>
    <div class="qeelFlat-credits">Crédits : xxx - codage by <a href="http://terrible.forumactif.org/" target="_blank">awful</a></div>
    </div></div>
</div>
<div class="qeelFlat-index-links">
  <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a>
 <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
 <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
 <a href="/?mode=delete_cookies" rel="nofollow">Supprimer les cookies du forum</a>
</div>
<script type="text/javascript">
  $('#qeel-stats2').html($('#qeel-stats2').html().replace(/Nos membres ont posté un total de|Nous avons /ig," ").replace(/membre enregistré/,"membre").replace(/membres enregistrés/,"membres"));
  $('#qeel-dernier').html($('#qeel-dernier').html().replace(/L'utilisateur enregistré le plus récent est/ig," "));
  $('#qeel-connectes').html($('#qeel-connectes').html().replace(/Utilisateurs enregistrés : /ig," "));
  $('#qeel-connectes24').html($('#qeel-connectes24').html().replace(/Membres connectés au cours des 24 dernières heures : /ig," "));
  $('#qeel-stats').html($('#qeel-stats').html().replace(/Il y a en tout| :: /ig," ").replace(/utilisateur en ligne/,"<i>utilisateur en ligne</i> <u>>></u>").replace(/utilisateurs en ligne/,"<i>utilisateurs en ligne</i> <u>>></u>").replace(/Enregistré,/,"<i>Enregistré</i> <u>|</u>").replace(/Enregistrés,/,"<i>Enregistrés</i> <u>|</u>").replace(/Invisible et/,"<i>Invisible</i> <u>|</u>").replace(/Invisibles et /,"<i>Invisibles</i> <u>|</u>").replace(/Invité/,"<i>Invité</i>").replace(/Invités/,"<i>Invités</i>"));
</script>
<!-- END disable_viewonline -->

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/* QEEL PAR AWFUL*/

.qeelFlat {
   background: #e9e9e9;
   font-family: 'Cousine', monospace;
   margin: auto;
   position: relative;
   width: 900px;
}

.qeelFlat-content {
   display: flex;
   max-height: 250px;
   padding: 20px;
}

.qeelFlat a,
.qeelFlat a:hover,
.qeelFlat a:active,
.qeelFlat-index-links a,
.qeelFlat-index-links a:hover,
.qeelFlat-index-links a:active {
   text-decoration: none!important;
}


/* Titre du QEEL */

.qeelFlat-titre {
   align-items: flex-end;
   background: #3e3e3e;
   display: flex;
   flex: 100%;
   height: 130px;
   justify-content: flex-end;
}

.qeelFlat-titre h2 {
   color: #fff;
   font: 900 30px 'Montserrat', sans-serif;
   padding-right: 20px;
   text-transform: uppercase;
}


/* Case dernières 24 heures */

.qeelFlat-connectes24 {
   background: #f3f3f3;
   box-sizing: border-box;
   margin-right: 20px;
   overflow: auto;
   width: 140px;
}

.qeelFlat-connectes24 td.row1 {
   background-color: transparent;
   font-family: 'Roboto', sans-serif;
   padding: 5px;
}

.qeelFlat-mid {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin-right: 20px;
   width: 300px;
}


/* Dernier inscrit */

.qeelFlat-dernier {
   display: flex;
   flex: 1;
   flex-direction: column;
}

.qeelFlat-dernier h3 {
   font-family: "Montserrat", sans-serif;
   font-size: 12px;
   margin: 0;
   text-align: center;
   text-transform: uppercase;
}

.qeelFlat-dernier div {
   align-items: center;
   background: #f3f3f3;
   display: flex;
   flex: 1;
   justify-content: center;
   margin-top: 5px;
   min-height: 50px;
   width: 100%;
}

.qeelFlat-dernier div a strong {
   color: #7b7b7b;
   font-size: 20px;
   font-weight: 300;
   text-transform: uppercase;
}


/* Case liste des connectés */

.qeelFlat-connectes {
   background: #f3f3f3;
   box-sizing: border-box;
   flex: 1;
   font-family: 'Roboto', sans-serif;
   font-size: 11px;
   overflow: hidden;
   margin-right: 10px;
   padding: 5px;
   position: relative;
}

.qeelFlat-connectes>div {
   height: 100%;
   overflow: auto;
   position: relative;
   z-index: 2;
}

.qeelFlat-connectes::after {
   bottom: -14px;
   content: "En ligne";
   font-family: 'Montserrat';
   font-style: italic;
   font-size: 4em;
   font-weight: 900;
   opacity: .1;
   pointer-events: none;
   position: absolute;
   right: 0;
   text-transform: uppercase;
}


/* Les groupes */

.qeelFlat-groupes {
   display: flex;
   flex-wrap: wrap;
   gap: 3px;
   justify-content: space-between;
   margin-top: 10px;
}

.qeelFlat-groupes a {
   font-family: 'Montserrat';
   font-weight: bold;
   text-shadow: 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}

.qeelFlat-groupes div {
   align-items: center;
   border: 1px solid #c5c5c5;
   box-shadow: 0 0 0 3px #dddada inset;
   box-sizing: border-box;
   color: #a7a7a7;
   display: flex;
   font-size: 8px;
   height: 35px;
   justify-content: center;
   min-width: calc(100% / 2 - 2px);
   text-align: center;
   text-transform: uppercase;
}

.qeelFlat-groupes div:nth-child(1) a {
   color: #ed7171;
}

.qeelFlat-groupes div:nth-child(2) a {
   color: #c785d1;
}

.qeelFlat-groupes div:nth-child(3) a {
   color: #8ec5c9;
}

.qeelFlat-groupes div:nth-child(4) a {
   color: #78c69a;
}

.qeelFlat-groupes div:nth-child(5) a {
   color: #d2c853;
}

.qeelFlat-groupes div:nth-child(6) a {
   color: #dab15e;
}

.qeelFlat-right {
   display: flex;
   flex: 1;
   flex-direction: column;
}

.qeelFlat-right-middle {
   display: flex;
   flex: 1;
   height: 0;
   margin: 10px 0;
}


/* Statistiques messages et membres */

.qeelFlat-stats2 {
   display: flex;
   flex-direction: column;
}

.qeelFlat-stats2 div {
   background: #f3f3f3;
   display: flex;
   flex: 1;
   flex-direction: column;
   font-size: 10px;
   font-weight: 300;
   justify-content: center;
   margin-bottom: 9px;
   text-align: center;
   text-transform: uppercase;
   width: 80px;
}

.qeelFlat-stats2 div:last-child {
   margin-bottom: 0px;
}


/* Statistique des membres en lignes (x membres, x invités, x invisibles) */

.qeelFlat-stats {
   color: #aeaeae;
   font-size: 9px;
   font-weight: bold;
   text-transform: uppercase;
}

.qeelFlat-stats b {
   color: #bbb657;
}

.qeelFlat-stats i {
   color: #000000;
   font-style: inherit;
   font-weight: 300!important;
}

.qeelFlat-stats u {
   color: #000;
   font-weight: 300;
   text-decoration: none;
}


/* Crédits du QEEL */

.qeelFlat-credits {
   color: #7a7a7a;
   font-size: 9px;
   margin-top: auto;
   text-align: right;
   text-transform: uppercase;
}


/*Les liens en dessous du QEEL */

.qeelFlat-index-links {
   display: flex;
   justify-content: space-between;
   margin: auto;
   margin-top: 10px;
   width: 900px;
}

.qeelFlat-index-links a {
   align-items: center;
   border: 1px solid #c5c5c5;
   background: #fff;
   box-shadow: 0 0 0 3px #edecec inset;
   color: #ababab;
   display: flex;
   flex: 1;
   font-family: 'Cousine', monospace;
   font-size: 9px;
   height: 30px;
   margin-right: 10px;
   justify-content: center;
   text-transform: uppercase;
   transition: color 0.3s;
}

.qeelFlat-index-links a:hover {
   color: #ccc;
}

.qeelFlat-index-links a:last-child {
   margin-right: 0px;
}

En bas, dans les options du CSS, à "Optimiser votre CSS", cochez "non".

Créditez-moi quelque part sur votre forum si vous utilisez ces codes

phpBB2

Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".

Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@900&family=Raleway&display=swap" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="cat-wrap">
   <div class="titre-cate">
      {catrow.tablehead.L_FORUM}
      <div class="titre-cate-inner">{catrow.tablehead.L_FORUM}</div>
   </div>
   <div class="forums">
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <div class="wrap-forum">
         <div class="forum-top">
            <div class="forum-titre">
               <a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
            </div>
            <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
         </div>
         <div class="forum-desc">{catrow.forumrow.FORUM_DESC}</div>
         <div class="stats-forum">
            <div><b>{catrow.forumrow.TOPICS}</b> topics</div>
            <div>
               <b>{catrow.forumrow.POSTS}</b> posts
            </div>
         </div>
         <div class="avatar-forum">
            <div class="img-forum">
               <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
            </div>
            <!-- BEGIN avatar -->
            {catrow.forumrow.avatar.LAST_POST_AVATAR}
            <!-- END avatar -->
         </div>
         <div class="last-forum">
            {catrow.forumrow.LAST_POST}
         </div>
      </div>
      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
      <!-- END catfoot -->
      <!-- BEGIN tablefoot -->
   </div>
</div>
<!-- END tablefoot --><!-- END catrow -->
<script>
   $('img[title="Nouveaux messages"]').closest('.img-forum').addClass('new');
   $('.wrap-forum').each(function(){
     var noavatar = $(this);
      var avatar = $(this).find('.avatar-forum > div + img');
     if( avatar.length == 0){    
       $(noavatar).addClass("no-avatar");
   }
     });
   $('.sous-forum').each(function(){
  
   var awful = $(this).find('a').length;
  
   if( awful > 4){    
     $('a', this).eq(3).nextAll().hide().addClass('toggleable');
     $(this).append('<div class="more">+</div>');    
   $(this).addClass('moreSub');    
   }
  
   });
       $('.sous-forum').on('click','.more', function(){
  
   if( $(this).hasClass('less') ){    
     $(this).text('+').removeClass('less');    
   }else{
     $(this).text('-').addClass('less');
   }
  
   $(this).siblings('a.toggleable').toggle();
    
   });
</script>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*****************************************/
/* CUSTOMISATION CATÉGORIES ET FORUM PAR AWFUL */
/*****************************************/

:root {
 --accent-color: #ff858a;
 --accent-color-darker: #ff85826a;
}


/*titre de catégorie*/
.cat-wrap {
 margin: 0 auto;
 width: 850px;
}

.titre-cate {
 background: #272727;
 border-bottom: 4px solid #ccc;
 box-sizing: border-box;
 font-family: 'Montserrat', sans-serif;
 overflow: hidden;
 padding: 60px 30px 40px;
 position: relative;
 text-transform: uppercase;
}

.titre-cate h2 {
 color: #fff;
 font-size: 35px;
 font-weight: 900;
 letter-spacing: -2px;
 margin: 0;
}

.titre-cate-inner {
 pointer-events: none;
}

.titre-cate-inner h2 {
 bottom: -20px;
 font-size: 5.5em;
 font-style: italic;
 left: 45px;
 opacity: .05;
 pointer-events: none;
 position: absolute;
 white-space: nowrap;
}

.forums {
 background-color: #eee;
 padding: 10px;
}


/*bloc forum*/
.wrap-forum {
 background-color: #272727;
 border-radius: 5px;
 box-sizing: border-box;
 display: flex;
 flex-wrap: wrap;
 font-family: 'Roboto', sans-serif;
 margin: 0 auto 10px;
 min-height: 130px;
 padding: 10px 20px 20px;
 position: relative;
}

.wrap-forum:last-child {
 margin-bottom: 0;
}

.wrap-forum a,
.wrap-forum a:hover {
 text-decoration: none!important;
}

.wrap-forum.no-avatar .img-forum {
 display: none;
}


/*partie haute du forum */
.forum-top {
 display: flex;
 flex: 100%;
 justify-content: space-between;
 margin-bottom: 15px;
}


/*Titre forum*/
.forum-titre {
 align-self: flex-end;
}

.forum-titre a {
 color: #fff!important;
 font-family: 'Montserrat', sans-serif;
 font-size: 16px;
 font-weight: 900;
 text-transform: uppercase;
 transition: all 0.5s;
}

.forum-titre a:hover {
 color: var(--accent-color-darker)!important;
}


/*Suppression de l'image de nouveau message*/
.img-forum img {
 display: none;
}


/*remplacement de l'image de nouveau message par un 'x' rouge pour old*/
.img-forum:before {
 align-items: center;
 background: #f7f0ea;
 border-radius: 50%;
 color: #272727;
 content: "×";
 display: flex;
 font-size: 17px;
 height: 20px;
 justify-content: center;
 line-height: 15px;
 margin-top: -10px;
 position: absolute;
 width: 20px;
 z-index: 2;
}


/*changement du 'x' rouge en '✓' vert pour les nouveaux messages*/
.new:before {
 background: #8cb57b;
 content: "✓";
}


/*description de forum*/
.forum-desc {
 color: #eee;
 font-size: 11px;
 height: 50px;
 line-height: 12px;
 margin-right: 20px;
 overflow: auto;
 padding-right: 10px;
 text-align: justify;
 width: 450px;
}


/*Custom scrollbar (seulement pour Chrome !)*/
.forum-desc::-webkit-scrollbar {
 width: 3px;
}

.forum-desc::-webkit-scrollbar-track {
 background-color: #272727;
 border: 1px solid #444444;
}

.forum-desc::-webkit-scrollbar-thumb {
 background-color: var(--accent-color);
}


/*Statistiques topics et posts*/
.stats-forum {
 align-self: center;
 color: #eee;
 font-family: 'Raleway';
 font-size: 8px;
 letter-spacing: 1px;
 margin-bottom: 10px;
 text-transform: uppercase;
}


/*Dernier message*/
.last-forum {
 align-items: center;
 color: #9f9f9f;
 display: flex;
 font-size: 10px;
 height: 50px;
 text-transform: uppercase;
}

.last-forum a {
 text-transform: none;
}

.last-forum span>a:first-child {
 color: var(--accent-color);
 font-family: 'Raleway';
 font-size: 15px;
 font-weight: 700;
 transition: all 0.3s;
}

.last-forum span>a:first-child:hover {
 color: var(--accent-color-darker);
}

.last-forum:empty::before {
 content: "Pas de nouveaux messages";
 font-family: 'Raleway';
 font-size: 10px;
 width: 100px !important;
}


/*Sous-forums*/
.sous-forum {
 align-items: center;
 align-self: center;
 display: flex;
 flex-wrap: wrap;
 font-size: 0;
 justify-content: flex-end;
 min-height: 20px;
 position: relative;
 text-align: right;
 width: 450px;
 z-index: 3;
}

.sous-forum.moreSub {
 padding-right: 23px;
}

.sous-forum a {
 background: #111;
 color: #eee;
 display: inline-block;
 font: 700 9px 'Raleway';
 margin: 2.5px;
 text-transform: uppercase;
 transition: all 0.3s;
 padding: 5px 8px 4px;
 border-radius: 5px;
}

.sous-forum a:hover {
 background: #444;
 color: var(--accent-color);
}


/*Bouton "+" pour l'affichage des sous-forums supplémentaires*/
.more {
 background: #8cb57b;
 border-radius: 5px;
 box-sizing: border-box;
 color: #272727;
 cursor: pointer;
 display: inline-block;
 font-size: 16px;
 font-weight: bold;
 height: 18px;
 line-height: 17px;
 margin-left: 5px;
 padding: 0 5px;
 position: absolute;
 text-align: center;
 top: 2.5px;
 right: 0;
}


/*Couleur bouton "-"*/
.more.less {
 background: #c35050;
}


/*Avatar du dernier posteur*/

.avatar-forum {
 width: 50px;
 height: 50px;
 overflow: hidden;
 border-radius: 50%;
 background-size: 100%;
 margin-left: auto;
 margin-right: 20px;
 box-shadow: 0 0 0 5px #272727, 0 0 0 7px #ccc
}

.avatar-forum img {
 width: 50px;
}

.no-avatar .avatar-forum {
 display: none;
}

.no-avatar .last-forum {
 margin-left: auto;
}

Pour changer la couleur rose/rouge des liens et de la scrollbar, il faut modifier les valeurs --accent-color et --accent-color-darker dans votre CSS.
--accent-color : couleur de la scrollbar et des liens vers le dernier sujet
--accent-color-darker : couleur des liens vers le dernier sujet au survol et des sous-forums au survol

Créditez-moi quelque part sur votre forum si vous utilisez ces codes

Au survol des icônes sur le bloc des derniers messages, le nombre de topics et le nombre de messages apparaissent

Codes et explications

PhpBB2

Pour activer l'affichage des sous-forums, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Lien vers les niveaux inférieurs", cocher "oui".

Pour activer l'affichage de l'avatar, panneau d'administration > Affichage > Page d'accueil > Structure et hiérarchie. Dans le bloc en bas, à "Afficher les avatars dans la colonne 'Derniers messages'", cocher "oui".

Dans votre panneau d'administration, Affichage > Templates > Général > Overall_header, copiez et collez le code suivant, après l'ouverture de la balise head :

Code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Arimo&family=Cedarville+Cursive&family=Montserrat:wght@400;900&display=swap" rel="stylesheet">
<link href="https://cdn.lineicons.com/3.0/lineicons.css" rel="stylesheet">

Dans votre panneau d'administration, Affichage > Templates > Général > index_box, remplacez l'intégralité du template par le suivant :

Code:

<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
 <tr>
 <td valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <span class="gensmall">{LAST_VISIT_DATE}<br />
 {CURRENT_TIME}<br />
 </span>
 <!-- END switch_user_logged_in -->
 <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
 </td>
 <td class="gensmall" align="right" valign="bottom">
 <!-- BEGIN switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
 <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
 <!-- END switch_user_logged_in -->
 <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
 </td>
 </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><div class="cate">
<div class="titre-cate">{catrow.tablehead.L_FORUM}</div>
 <!-- END tablehead -->
 <!-- BEGIN cathead -->
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  
  <div class="forum-wrap">
    <div class="forum-top">
  <div class="forum-title">
    <h{catrow.forumrow.LEVEL} class="hierarchy">
 <a class="a-title" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </h{catrow.forumrow.LEVEL}></div>
    <div class="stats-forum">
      <div data_stats="{catrow.forumrow.TOPICS} topics"><i class="lni lni-book"></i></div><div data_stats="{catrow.forumrow.POSTS} posts"><i class="lni lni-pencil"></i></div>
  </div>
    </div>
    <div class="forum-desc">
      {catrow.forumrow.FORUM_DESC}
      
  </div>
  
     <div class="forum-last">{catrow.forumrow.LAST_POST}</div>
  <div class="forum-avatar"><!-- BEGIN avatar -->
            {catrow.forumrow.avatar.LAST_POST_AVATAR}
            <!-- END avatar -->
    </div>
  <div class="sous-forum">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
  <div class="forum-img"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </div>
</div>

  
 <!-- END forumrow -->
 <!-- BEGIN catfoot -->
<!-- END catfoot -->
 <!-- BEGIN tablefoot --></div>
<!-- END tablefoot --><!-- END catrow -->
<script>
const forums=document.querySelectorAll(".forum-wrap");forums.forEach(e=>{e.querySelector(".forum-last").innerText||e.classList.add("noMessage"),e.querySelector('img[title="Nouveaux messages"]')&&e.classList.add("new");const t=e.querySelectorAll(".stats-forum > div");t&&t.forEach(o=>{o.addEventListener("mouseenter",e=>{const t=document.createElement("div");t.id="stats-tooltip",t.innerText=o.getAttribute("data_stats"),document.body.appendChild(t)}),o.addEventListener("mouseleave",e=>{const t=document.getElementById("stats-tooltip");t.parentElement.removeChild(t)}),o.addEventListener("mousemove",function(e){var t=e.pageX+10,e=e.pageY+10;const o=document.getElementById("stats-tooltip");o&&(o.style.left=t+"px",o.style.top=e+"px")})})});
</script>

Enfin, dans Affichage > Images et couleurs > Couleurs et dans le petit onglet Feuille de style CSS, collez le code suivant :

Code:

/*Personnalisation des catégories par Awful*/

.cate {
  margin: auto;
  width: 800px;
}

/*Titre des catégories*/
.titre-cate h2 {
  color: #fff;
  font-family: "Cedarville Cursive", cursive;
  font-size: 50px;
  margin: auto auto -36px 20px;
  text-shadow: 1px 0 0 #f86c6d, -1px 0 0 #f86c6d, 0 1px 0 #f86c6d,
    0 -1px 0 #f86c6d;
}

/*Bloc forum*/
.forum-wrap {
  background-color: #f86c6d;
  border-radius: 5px;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  font-family: "Arimo", sans-serif;
  margin: 15px auto;
  min-height: 150px;
  padding: 15px;
  position: relative;
}
.forum-wrap a,
.forum-wrap a:hover {
  text-decoration: none !important;
}
.forum-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

/*Titre des forums*/
.forum-title .a-title {
  color: #fff !important;
  font-family: "Montserrat", sans-serif;
  font-size: 27px;
  font-weight: 900;
  letter-spacing: -1px;
  text-transform: uppercase;
}

/*Description des forums*/
.forum-desc {
  flex: 1;
  font-size: 12px;
  height: 70px;
  margin-top: 20px;
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
}

/*scrollbar sous chrome*/
.forum-desc::-webkit-scrollbar {
  width: 3px;
}
.forum-desc::-webkit-scrollbar-track {
  background-color: #ce5a5b;
}
.forum-desc::-webkit-scrollbar-thumb {
  background: #ffa5a6;
}

/*Avatar dernier forum*/
.forum-avatar {
  align-self: center;
  border: 4px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 8px #f66c6d;
  height: 60px;
  overflow: hidden;
  background: #fff;
  width: 60px;
}
.forum-avatar img {
  height: auto;
  margin-top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

/*Dernier message*/
.forum-last {
  align-items: center;
  align-self: center;
  background: #fff;
  border-radius: 5px;
  box-shadow: 20px 0 0 #fff;
  box-sizing: border-box;
  color: #000;
  display: flex;
  font-size: 10px;
  height: 60px;
  margin-left: 20px;
  padding: 8px 10px;
  width: 160px;
}
.forum-last span > a:first-child {
  color: #a7a7a7;
  font-weight: bold;
  text-transform: uppercase;
}
.forum-last span > a:first-child:hover {
  color: #ccc;
}
.forum-last:empty,
.forum-avatar:empty,
.noMessage .stats-forum {
  display: none;
}

/*Image nouveaux messages*/
.forum-img {
  align-items: flex-end;
  background: #efefef;
  box-sizing: border-box;
  display: flex;
  height: 50px;
  padding: 5px;
  position: absolute;
  right: 10px;
  top: -10px;
  width: 40px;
}
.forum-img:after {
  border-color: transparent transparent #ce5a5b transparent;
  border-style: solid;
  border-width: 0 0 10px 5px;
  content: "";
  height: 0;
  position: absolute;
  right: 40px;
  top: 0;
  width: 0;
}
.forum-img::before {
  color: #b1b1b1;
  content: "No new";
  font-family: "Montserrat";
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.new .forum-img {
  background: #ffaaaa;
}
.new .forum-img::before {
  color: #f66c6d;
  content: "New";
  text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.forum-img img {
  display: none;
}

/*Statistiques des forums*/
.stats-forum div {
  align-items: center;
  background: #f66c6d;
  border: 2px solid;
  border-radius: 50%;
  display: flex;
  font-family: "Montserrat";
  font-size: 13px;
  font-weight: 900;
  height: 25px;
  justify-content: center;
  position: absolute;
  right: 95px;
  top: 106px;
  width: 25px;
}
.stats-forum div:last-child {
  right: 130px;
}
#stats-tooltip {
  background: #fff;
  border-radius: 5px;
  font-family: "Montserrat";
  font-size: 10px;
  padding: 5px;
  pointer-events: none;
  position: absolute;
  text-transform: uppercase;
}

/*Sous forums*/
.sous-forum {
  font-size: 0;
  margin-top: 20px;
  width: 100%;
}
.sous-forum a {
  align-items: center;
  border: 1px solid #fff;
  border-radius: 7px;
  color: #fff;
  display: inline-flex;
  font-family: "Montserrat", sans-serif;
  font-size: 9px;
  height: 15px;
  padding: 0 8px;
  margin-right: 4px;
  text-transform: uppercase;
  transition: 0.3s;
}
.sous-forum a:hover {
  border-color: #ffa2a2;
  color: #ffa2a2;
}