présentation

difficulté → simple - vous devez disposer de quelques connaissances sur les tableaux html au préalable.
auteur → VortexStorm
but du tutoriel → Ce tutoriel a pour but de vous permettre de coder aisément vos catégories de façon simple et esthétique. La structure de base ne sera pas chamboulée, il s'agit surtout de réorganiser les informations à partir du tableau.
Note : vous devez avoir accès au compte fondateur afin de modifier le template.

Résultat final (ne pas tenir compte des couleurs, je les ai un peu choisies au hasard) :

Spoiler:

descriptif

Première étape : modification du template
Vous devrez vous trouver sur le compte fondateur du forum. De plus, les liens vers les sous forums et les modérateurs du forum ne doivent pas être affichés.

Vous devez d'abord accéder au template. Dans l'onglet Affichage de votre PA, choisissez la rubrique [Templates] Général. Une fois que vous aurez affiché la liste de vos templates, recherchez le template index_box et cliquez sur l'icône de modification

Une fois sur votre template, vous verrez un premier table (<table>) ; passez-le et rendez-vous directement à cette partie de code :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right">&nbsp;</td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

On va commencer par supprimer les colonnes suivantes (les informations seront transmises dans une autre colonne) :

Spoiler:

Ce qui correspond à deux cases.
Vous devrez d'abord supprimer les titres en enlevant ces deux lignes :

Code:

      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>

Puis supprimer les données en enlevant ces deux lignes :

Code:

      <td class="row3" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>

Ce qui donne :

Spoiler:

Nous allons ensuite rajouter ces informations dans la dernière colonne (derniers messages). Cette dernière colonne peut être renommée si nécessaire en remplaçant {L_LASTPOST} par le titre de votre choix.

Pour ce faire, repérez cette colonne :

Code:

<td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

On va commencer par ajouter une division (<div>) autour de la balise <span> et on lui donne une classe (ici, je l'appelle lastpost).

Code:

<td class="row3 over" align="center" valign="middle" height="50">
<div class="lastpost">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</div>
      </td>

Il suffit ensuite de rajouter les informations avant ou après le span (avant si vous vous le mettre au dessus, après si vous voulez le mettre en dessous des informations sur le dernier post). Là encore, je vais rajouter une classe (que j'appelle sujmes).

Code:

<td class="row3 over" align="center" valign="middle" height="50">
<div class="lastpost">
   <div class="sujmes"><strong>{catrow.forumrow.TOPICS}</strong> sujets + <strong>{catrow.forumrow.POSTS}</strong> messages</div>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</div>
      </td>

Ce qui donne :

Spoiler:

Enfin, nous allons nous occuper de la description et des titres de forums. Dans cette partie de code :

Code:

<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>

Nous allons supprimer le <span class="genmed"> pour le remplacer par une division afin de bien isoler cet élément. J'appelle ma classe description.

Code:

<div class="description">{catrow.forumrow.FORUM_DESC}</div>

Et je remplace le <span class="forumlink"> par un <div class="forumlink"> afin d'en faire un élément de bloc que je pourrai ensuite centrer.

Code:

<h{catrow.forumrow.LEVEL} class="hierarchy">
            <div class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </div>
         </h{catrow.forumrow.LEVEL}>

Voilà le résultat, il reste désormais à s'occuper du CSS :

Spoiler:

N'oubliez pas de valider votre template !

Deuxième étape : CSS
Votre feuille de style CSS est disponible dans l'onglet Affichage, rubrique [Images et Couleurs] Couleurs. Vous devez ensuite cliquer sur Feuille de style CSS pour y accéder.
Nous allons procéder dans le sens inverse, en commençant cette fois par la colonne 2.

Pour le titre du sous-forum, on va essayer de le mettre en valeur. Vous avez bien sûr le choix des effets que vous voulez mettre. Pour ma part, j'ai décidé de centrer mon titre et de le mettre en majuscules, police Times New Roman. Vous devez modifier la classe .forumlink
Voici le code CSS que j'ai utilisé pour la démonstration, et que vous pouvez enrichir (par exemple, en ajoutant une bordure) :

Code:

.forumlink {
  text-align: center;
  font: 25px Times New Roman, serif;
  text-transform: uppercase;
}

Résultat :

Spoiler:

Si je veux modifier la couleur du lien et/ou du lien survolé, je dois modifier la classe a.forumlink (n'oubliez pas la valeur !important qui permet d'annuler les autres valeurs fournies par le css de base de votre forum). Ici j'ai utilisé le code suivant :

Code:

a.forumlink {
  color: #000 !important;
}
a.forumlink:hover {
  color: #FFA34F !important;
}

Ce qui donne :

Sans survol:

Avec survol:

Occupons-nous à présent de la description. Utilisez la classe que vous avez définie pour celle-ci (chez moi, c'est description). Il vous reste à ajouter un fond, des espacements, une police, etc.
Pour ma démonstration, j'ai choisi de mettre un fond blanc, avec une police Verdana taille 11 de couleur noire, remplacée par Arial si Verdana n'est pas installée sur l'ordinateur, avec un espacement de 5 pixels à l'intérieur et une marge extérieure de 10 pixels.
Voici mon code :

Code:

.description {
  background: #FFF;
  color: #000;
  text-align: justify;
  font: 11px Verdana, Arial, sans-serif;
  padding: 5px;
  margin: 10px;
}

Et j'obtiens ceci :

Spoiler:

Si vous souhaitez donner une hauteur fixe ou maximale à vos descriptions afin de l'adapter à la taille de l'image à côté, vous devez ajouter une hauteur ou une hauteur maximale ainsi que l'attribut overflow: auto. J'ai ici mis une hauteur maximale :

Code:

.description {
  background: #FFF;
  color: #000;
  text-align: justify;
  font: 11px Verdana, Arial, sans-serif;
  padding: 5px;
  margin: 10px;
  max-height: 100px;
  overflow: auto;
}

Ce qui me donne ceci :

Spoiler:

A présent, passons à la troisième colonne.
Nous allons commencer par définir le cadre général en modifiant notre classe lastpost (ici, j'ai repris les mêmes attributs que pour la description, mais mon texte est centré au lieu d'être justifié ; cependant, vous pouvez changer ce que vous voulez, évidemment) :

Code:

.lastpost {
  background: #FFF;
  color: #000;
  font: 11px Verdana, Arial, sans-serif;
  padding: 5px;
  margin: 10px;
}

Et mon résultat :

Spoiler:

Là encore, vous pouvez définir une hauteur si vous en avez envie.

Enfin, il ne me reste plus qu'à modifier mon nombre de sujets et messages en modifiant la classe sujmes. Pour bien le séparer du dernier message, je lui ajoute une marge inférieure en plus d'un fond et d'une police spéciale en majuscules.

Code:

.sujmes {
  margin-bottom: 5px;
  background: #EEE;
  font: 9px Arial, sans-serif;
  text-transform: uppercase;
}

Pour mettre en valeur mes chiffres, j'ai également modifié la balise <strong> en lui ajoutant une couleur :

Code:

.sujmes strong {
  color: #FFA34F;
}

Ce qui vous donne :

Spoiler:

Enfin, vous pouvez modifier le titre de la catégorie pour le mettre en valeur (c'est bien sûr non obligatoire) en modifiant les attributs de la balise <h2> de la classe secondarytitle. Mon code :

Code:

.secondarytitle h2 {
  font: 700 15px Times New Roman;
  text-transform: uppercase;
}

Et le résultat final :

Spoiler:

Voilà, désormais vous pourrez coder vos catégories tout seul ! N'hésitez pas à personnaliser cette base selon vos goûts.