Testé sous : google chrome, Firefox
Version(s) du forum : phpBB2
Rendu :

Aperçu du rendu:

Ne pas retirer le copyright

Introduction

Ce code de catégorie est optimisé pour une largeur de 800px.
Les polices d'écritures se mettent bien entendu au préalable dans le template overall_header.
Les images se redimensionnent normalement automatiquement, les avatars des derniers membres sont en 66x109 et l'image news/no news/lock mesure 165x17
J'ai également codé un qeel assorti, que vous pourrez retrouver [url=xxxx]ici[/url] si le coeur vous en dit.

Codes et Explications

Prérequis. Installation des polices personnalisées

Dans votre panneau d'administration, allez dans la section Affichage → Templates → Général et éditez le template overall_header.
Cherchez la balise </head> et juste avant ajoutez le code suivant :

Code:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Gupter&family=Playfair+Display&display=swap" rel="stylesheet">

Note: Cette ligne sert à ajouter la police Gupter et Playfair display sur votre forum. Si vous souhaitez changer les polices d'écriture utilisées dans le CSS, pensez à retirer ou modifier cette ligne, Google Fonts vous donnera le code à utiliser.
Note 2: La première ligne (celle qui contient "preconnect") n'est nécessaire qu'une seule fois, donc si vous avez installé d'autres modifications sur votre forum, vérifiez que qu'elle n'y est pas déjà.
Enregistrez vos modifications et publiez votre template.

Template index_box

Dans votre panneau d'administration, allez dans la section Affichage → Templates → Général et éditez le template index_box.
Remplacez le code du template par celui qui suit :

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="categorie1">
 <div class="titrecategorie">{catrow.tablehead.L_FORUM}</div>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
<span class="cattitle">
 <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
 </span>
 <!-- END cathead -->
 <!-- BEGIN forumrow -->
  <div class="blocForum">
 <!-- BEGIN inc -->
{catrow.forumrow.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" alt="." />
 <!-- END inc -->
 <div class="stats">{catrow.forumrow.TOPICS} Sujets | {catrow.forumrow.POSTS} Posts </div>
<div class="titreforum"><h{catrow.forumrow.LEVEL} class="hierarchy">
 <span class="forumlink">
 <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
 </span>
  </h{catrow.forumrow.LEVEL}></div>
  <div class="categoriedescription">{catrow.forumrow.FORUM_DESC}</div>
  
  <div class="listecategories">
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
</div>

  <div class="avatarcate"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div>
  
 <div class="derniermessage">{catrow.forumrow.LAST_POST}
</div>
  <div class="imgcategorie">
 <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 -->

 <!-- BEGIN inc -->
  {catrow.catfoot.inc.INC_CLASS}<img src="{SPACER}" height="0" width="46" />
 <!-- END inc -->
 <!-- END catfoot -->
 <!-- BEGIN tablefoot -->
</div><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
<script type="text/javascript">$('.listecategories').each(function(){$(this).html($(this).html().replace(/,/g,""));});</script>


Enregistrez vos modifications et publiez votre template.

Installer le CSS

Dans votre panneau d'administration, allez dans la section Affichage → Images et Couleurs → Couleurs et cliquez sur l'onglet Feuille de style CSS.
Ajoutez-y le code CSS qui suit :

Code:

/*** ARYA CATEGORIE ***/
.categorie1 {
background-color: #f3f3e8;
width: 750px!important;
margin: auto; }

.blocForum {
position:relative;
height: 130px;
width: 100%; }

.titrecategorie {
background-color:#85986c!important;
background-position: center;
width: 750px;
height: 30px;}

.titrecategorie h2 {
color: #f2f2f2;
text-align: center;
font-family: 'Playfair Display', serif;
font-size: 30px;
line-height: 30px;
font-weight: normal; }

.categoriedescription {
background: #fafaf0;
height: 80px!important;
font-size: 12px;
font-family: 'Gupter', serif;
color: #272b2c;
border: 3px solid #e9e9da;
padding: 5px;
overflow: auto;  
position: absolute;
width: 300px!important;
left: 5px;
top: 25px; }

.titreforum {
 height: 15px;
 line-height: 15px;
 width: 310px;
 left: 5px;
 position: absolute;
 bottom: 15px;
 top: 10px;  }

.titreforum a {
font-size: 15px!important;
font-family: 'Playfair Display', serif;
font-weight: normal;  
text-decoration: none!important;
color:#d26d8f!important; }

.derniermessage{
background-color: #fafaf0;
border: 3px solid #e9e9da;
color: #1f2b2f!important;
font-family: 'Gupter', serif;
font-size: 10px!important;
height: 35px;
left: 570px;
line-height: 11px;
position: absolute;
text-align: center;
top: 35px;
width: 155px;
padding: 5px; }

.derniermessage a, .derniermessage a:hover {
font-family: 'Gupter', serif;
font-size:14px!important;
text-align: center;
Font-weight: normal;
color:#293740!important;
text-decoration: none!important; }

.derniermessage strong {
font-family: 'Gupter', serif;
font-size: 12px!important;
text-align: center; }

.derniermessage img {
width: 10px!important;
height:10px!important;
    object-fit: cover;}

.listecategories {    
align-content: center;
background: #fafaf0;
border: 3px solid #efefe1;
height: 110px!important;
justify-content: center;
overflow-x: hidden;
overflow-y: auto;
width: 150px!important;
position: absolute;
left: 325px;
top: 6px;}

.listecategories a {
 font-family:'Gupter', serif;
  color: #fff;
font-size: 11px;
  text-transform: uppercase;
background-color: #ecbdcc!important;
    border: 1px solid #ecbdcc!important;
  width:150px;
  font-weight: normal;
  line-height: 18px;
  text-align:center;
  display:block ;}

.listecategories a:hover {
color: #fff;
text-decoration: none!important;
background-color:#d06f90!important;
border: 1px solid #d06f90!important; }

.stats {      
background: #c4d6a4;
    border: 3px solid #c4d6a4;
    color: #fff;
    font-family:  'Gupter', serif;
    font-size: 13px;
    font-style: normal;
    text-align: center;
    top: 10px;
    width: 163px;
    position: absolute;
    left: 570px;}

.imgcategorie {
    width: 165px!important;
border: 3px solid #e9e9da;
    height: 17px!important;
position: absolute;
    top: 98px;
    left: 570px;}

.imgcategorie > img {
    width: 165px;
    height: 17px;
    object-fit: cover;}

.avatarcate {
position: absolute;
    top: 6px;
    left: 485px;
height: 100px;
width: 62px;}


.avatarcate img {
 border: 3px solid #e9e9da;
    border-radius: 0;
    height: 109px;
    width: 66px; }

/*** CATEGORIE ARYA FIN ***/