Vous allez devoir éditer votre template index_box. Pour cela, allez dans le Panneau d'Administration, onglet Affichage puis dans le menu Templates » Général, et sélectionnez le template index_box dans la liste (ne pas confondre avec index_body).

I. La théorie

Il va falloir localiser deux éléments : le titre de la colonne, et son contenu.

Titres des colonnes

Les en-têtes se trouvent dans la section tablehead du template, au sein du bloc catrow qui définit l'entité "forum".

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 -->

Ici, les variables correspondent chacune à l'intitulé d'une colonne :

{catrow.tablehead.L_FORUM}	Titre de la catégorie
{L_TOPICS}	Titre de la colonne "Sujets"
{L_POSTS}	Titre de la colonne "Messages"
{L_LASTPOST}	Titre de la colonne "Derniers messages"

Il va suffire de supprimer, ou mettre en commentaire, les cellules <th> que l'on désire masquer. Par exemple, pour mettre en commentaire le ligne des "Derniers messages", nous ferions comme suit :

Code:

<!--th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th-->

Contenu des colonnes

Le contenu des colonnes se trouve à la fin de la section forumrow du template, toujours au sein du bloc catrow.

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>
<td class="row3 over" align="center" valign="middle" height="50">
   <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
</td>

Ces trois dernières cellules correspondent aux colonnes : "Sujets", "Messages" et "Derniers messages". Pour déplacer les informations, on va tout simplement récupérer les variables concernées :

{catrow.forumrow.TOPICS}	Nombre total de sujets
{catrow.forumrow.POSTS}	Nombre total de messages
{catrow.forumrow.LAST_POST}	Informations "Derniers messages"

Sur le même principe que le titre, on supprime ou met commentaire la cellule <td> que l'on ne veut plus voir s'afficher. Par exemple, pour les "Derniers messages" :

Code:

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

On sait retirer nos colonnes, on a nos variables... Il ne reste plus qu'à les utiliser.

II. La pratique

Cette méthode est une astuce pour fusionner les en-têtes. Elle dépend de la façon dont vous aurez modifié votre template par le passé, et ainsi du nombre de colonnes que vous avez.

Un peu de HTML

Tout d'abord, comme vu plus haut, on supprime ou met en commentaire les titres de colonne <th> comportant les variables {L_TOPICS}, {L_POSTS} et/ou {L_LASTPOST}. A priori, seule devrait rester la cellule <th> comportant le titre de la catégorie.

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 -->

Si vous vous arrêtez là et que vous testez, vous remarquerez que les largeurs des colonnes ont changé. En effet, elles étaient définies par la largeur des cellules d'en-tête.

Si vous faites bien attention, vous remarquerez d'ailleurs des attributs width (bien que seule la <div> de {L_LASTPOST} fixe véritablement une largeur). Nous allons reprendre ces valeurs et les passer en CSS aux cellules <td> des colonnes correspondantes.

Pour ce faire, nous allons avoir besoin d'ajouter des classes aux cellules concernées. Un peu plus bas dans le template, dans les <td> "Sujets", "Messages" et "Derniers messages", nous changeons les <span> en <div> et ajoutons des classes : .statsforums pour "Sujets" et "Messages", .derniersmessages pour "Derniers messages".

Code:

<td class="row3" align="center" valign="middle" height="50">
   <div class="gensmall statsforum">{catrow.forumrow.TOPICS}</div>
</td>
<td class="row2" align="center" valign="middle" height="50">
   <div class="gensmall statsforum">{catrow.forumrow.POSTS}</div>
</td>
<td class="row3 over" align="center" valign="middle" height="50">
   <div class="gensmall derniersmessages">{catrow.forumrow.LAST_POST}</div>
</td>

Un peu de CSS

Rendez-vous dans Affichage > Images & Couleurs : Couleurs > onglet "Feuille de style CSS". Nous stylons les deux classes nouvellement créées dans notre CSS, afin de donner une largeur à nos trois colonnes.

Code:

.statsforum {
  width: 50px; /* largeur des colonnes "Sujets" et "Messages" */
}
.derniersmessages {
  width: 150px; /* largeur de la colonne "Derniers messages" */
}

Nous avons repris ici les valeurs déterminées dans le HTML. Toutefois à vous de choisir quelle taille donner à vos colonnes.

Un peu de Javascript

Il nous reste à modifier la valeur de l'attribut colspan de notre <th> "titre de catégorie".

Cet attribut détermine sur combien de colonnes s'étend une cellule ; dans notre cas, elle doit s'étendre sur l'ensemble des colonnes du tableau. Par défaut, sa valeur est déterminée par une variable qu'il serait sage de ne pas modifier. Nous allons donc passer par un code javascript pour la prendre en compte.

Rendez-vous dans Modules > HTML & Javascript : Gestion des codes Javascript. Créez un nouveau code, nommez-le, et donnez-lui un placement "sur l'index" et "sur les sous-forums". Enfin, collez ce qui suit :

Code:

$(function(){
  $('th.secondarytitle').each(function(){
    var inc = $('th.secondarytitle').attr('colspan');
    var total = parseInt(inc) + 3; // modifier le chiffre en fonction du nombre de th retirés
    $('th.secondarytitle').attr('colspan', total);
  });
});

Ici, le code récupère tout simplement la valeur passée par la variable pour chaque entête de catégorie, lui ajoute le nombre de cellules ayant été retirées (soit le nombre de colonnes supplémentaires sur lequel doit s'étendre le titre de catégorie), puis renvoie le résultat.


Dans notre cas, nous avons retiré 3 cellules <th> ("Sujets", "Messages", "Derniers messages") : nous mettons donc le chiffre 3 dans le code.

Prenons un autre cas très courant : si vous avez auparavant modifié votre template pour déplacer les informations "Sujets" et "Messages" (comme dans ce tuto-ci ou celui-là), vous avez sans doute entièrement supprimé ces deux colonnes.

Dans ce cas-ci, vous n'auriez eu à masquer que l'en-tête de la colonne "Derniers messages" : 1 seul <th> retiré, on met donc la valeur 1.