Tout d'abord, et je pense ne pas vous surprendre avec ce conseil, ouvrez votre template topic_list_box. Vous le trouverez sur votre panneau d'administration, onglet Affichage, menu Templates » Général.

Supprimer les colonnes "vues" et "réponses"

1. Supprimer les cellules de titre

La première chose que nous allons faire, c'est supprimer les cellules qui contiennent les mots "Réponses" et "Vues". Il nous faut pour cela trouver où elles sont. Ce n'est pas très compliqué, une cellule de titre est toujours entourée par les balises <th> et </th> (au lieu de <td>). Et puisqu'il est question des réponses et des vues, c'est justement écrit dans les variables, en anglais, il vous faut donc repérer les mots REPLIES et VIEWS. Ce qui correspond donc à ces deux lignes :

Code:

<th align="center" nowrap="nowrap" width="80"> {topics_list_box.row.L_REPLIES} </th>

Code:

<th align="center" nowrap="nowrap" width="50"> {topics_list_box.row.L_VIEWS} </th>

Vous les avez trouvées ? Hé bien, supprimez-les maintenant !

2. Retirer les cellules contenant le nombre de vues et de réponses

Maintenant, il faut aussi supprimer les colonnes associées, celles qui contiennent les valeurs proprement dites. Repérez les cellules (parties de code entourées des balises <td> et </td>, pour rappel) qui contiennent le nombre de réponses (repérez le REPLIES) et le nombre de vues (repérez le VIEWS). Pas difficile à trouver, chacune ne fait qu'une seule ligne de code !

Code:

<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.REPLIES}</span></td>

Code:

<td class="row2" align="center" valign="middle"><span class="postdetails">{topics_list_box.row.VIEWS}</span></td>

Maintenant que vous les avez trouvées, supprimez-les, tout simplement.

Notez bien les deux variables de templates entre accolades, car nous allons devoir les réutiliser. Ce sont ces variables qui affichent le nombre de sujets et de vues.

Placer les statistiques

C'est désormais à vous de placer les deux variables {topics_list_box.row.REPLIES} et {topics_list_box.row.VIEWS} à l'endroit que vous souhaitez dans votre mise en page. Voici néanmoins quelques propositions.

1. A côté du titre du sujet

Pour les placer à côté du titre du sujet, nous allons devoir faire un tableau, et à partir de là ça se complique un peu, donc restez bien concentrés.

Cherchez la cellule qui contient le titre du sujet, sa description, et ainsi de suite :

Code:

      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <div class="topictitle">
            {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>
         </div>
         <!-- BEGIN switch_description -->
         <span class="genmed">
            <br />
            {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
         </span>
         <!-- END switch_description -->
         <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
         <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
      </td>

C'est là que nous allons faire notre tableau. Il comportera une seule ligne et deux cellules.
Sautez une ligne sous la première ligne du code que j'ai cité (le <td ... >). Nous allons ouvrir notre tableau ici, puis notre ligne, et enfin notre cellule. Et pour que notre tableau prenne toute la largeur disponible, nous allons rajouter l'attribut width="100%".
Les deux premières lignes du code précédent vont donc devenir :

Code:

      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
            <table width="100%"><tr>
               <td>
                  <div class="topictitle">

Un tableau devant être fermé, il nous faut rajouter la fermeture de cellule, ainsi que la cellule destinée à reçevoir nos statistiques, puis la de ligne et de table à la fin du code. Les deux dernières lignes deviennent alors :

Code:

            <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
            </td>
            <td>
               <!-- ICI ON VA RAJOUTER NOS STATISTIQUES -->
            </td>
         </tr></table>
      </td>

Nous allons à présent travailler là où j'ai mis mon annotation en commentaire.

On va devoir rajouter l'affichage de nos vues et de nos réponses, pour ça les deux variables signalées plus tôt dans ce tutoriel vont nous être utiles. On gardera également la classe .postdetails qui était utilisée pour leur affichage, et on rajoutera une classe .StatsTopics qui nous servira à faire des personnalisations plus poussées via le CSS du forum.
Vous allez donc remplacer le commentaire que j'avais mis plus haut :

Code:

<!-- ICI ON VA RAJOUTER NOS STATISTIQUES -->

Par ceci :

Code:

<div class="postdetails StatsTopics">
   Réponses : {topics_list_box.row.REPLIES}
   <br />
   Vues : {topics_list_box.row.VIEWS}
</div>

Si vous avez bien suivi mes indications, vous devriez donc avoir quelque chose comme ça :

Code:

      <td class="{topics_list_box.row.ROW_CLASS}" onmouseover='this.className="row2"' onmouseout='this.className="{topics_list_box.row.ROW_CLASS}"' width="100%">
         <table width="100%">
            <tr>
               <td>
                  <div class="topictitle">
                     {topics_list_box.row.NEWEST_POST_IMG}{topics_list_box.row.PARTICIPATE_POST_IMG}{topics_list_box.row.TOPIC_TYPE}
                     <h2 class="topic-title">
                        <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
                     </h2>
                  </div>
                  <!-- BEGIN switch_description -->
                  <span class="genmed">
                     <br />
                     {topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
                  </span>
                  <!-- END switch_description -->
                  <span class="gensmall">{topics_list_box.row.TOPIC_ANNOUNCES_DATES}{topics_list_box.row.TOPIC_CALENDAR_DATES}</span>
                  <span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>
               </td>
               <td>
                  <div class="postdetails StatsTopics">
                     Réponses : {topics_list_box.row.REPLIES}
                     <br />
                     Vues : {topics_list_box.row.VIEWS}
                  </div>
               </td>
            </tr>
         </table>
      </td>

Il ne vous reste à présent plus qu'à enregistrer le template, le publier, et vous pourrez voir vos modifications.

Nous avons maintenant nos statistiques qui vont s'afficher à droite du titre du sujet. Mais ce n'est pas encore très joli car cet affichage n'est pas aligné contre la cellule suivante, qui indiquera donc le nom de l'auteur du sujet. C'est là que le CSS entre en ligne de compte !

Rendez vous dans votre panneau d'administration, onglet Affichage puis Images et couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS. C'est le moment de définir la classe .StatsTopics qu'on a utilisée plus haut.

Code:

.StatsTopics {
   width:150px; /* largeur de la cellule */
   text-align:right; /* texte aligné à droite */
}

Vous pouvez rajouter d'autres propriétés CSS, couleur du texte, taille du texte, fond du bloc contenant les statistiques, marges internes et externes, et ainsi de suite. Enregistrez vos modifications CSS, et voilà !

2. Aligné à côté du titre du message, en flottant

Si vous souhaitez que vos statistiques "flottent" dans un coin de la cellule (en poussant le texte autour), comme ceci :



Dans votre template topic_list_box :
Cherchez cette ligne :

Code:

<div class="topictitle">

Juste avant, AJOUTEZ ce code :

Code:

<div class="postdetails StatsTopics">Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}</div>

(N'oubliez pas de sauter une ligne entre les deux histoire de pouvoir relire votre code plus facilement)

Puis, dans le CSS, ajoutez ceci :

Code:

.StatsTopics {
 float:right; /* flottant à droite, vous pouvez remplacer par left */
 /* et toute autre mise en page que vous voulez */
}

Notez que si vous ne mettez pas de propriété float, vos statistiques s'afficheront au dessus du titre, comme ça par exemple :

3 . Sur la même ligne que le titre du message

Si vous souhtaitez que les statistiques soient écrites à la suite du titre du message, comme ceci :


Dans votre template topic_list_box :
Cherchez le titre du topic :

Code:

            <h2 class="topic-title">
               <a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a>
            </h2>

Et juste après, ajoutez :

Code:

 <span class="postdetails StatsTopics">(Vu {topics_list_box.row.VIEWS} fois, {topics_list_box.row.REPLIES} réponses)</span>

Notez bien qu'ici on utilise une balise <span> et non plus <div>, ceci pour que les statistiques soient sur la même ligne que le titre (différent du bloc

Pour personnaliser la mise en forme, n'oubliez pas de définir la classe .StatsTopics dans votre CSS, par exemple :

Code:

.StatsTopics {
 font-weight:normal; /* pour éviter que le texte soit en gras par défaut */
 /* Et toute autre mise en page à votre goût */
}

4. Après la description du sujet

C'est exactement la même méthode que pour le point 2, mais cette fois vous devrez trouver cette partie :

Code:

<span class="gensmall">{topics_list_box.row.GOTO_PAGE}<!-- BEGIN nav_tree -->{topics_list_box.row.TOPIC_NAV_TREE} <!-- END nav_tree --></span>

Et juste après, sauter une ligne et ajouter ceci :

Code:

<div class="postdetails StatsTopics">Réponses : {topics_list_box.row.REPLIES} | Vues : {topics_list_box.row.VIEWS}</div>

Puis, dans le CSS, ajoutez ceci :

Code:

.StatsTopics {
 float:right; /* flottant à droite */
 /* et toute autre mise en page que vous voulez */
}

Laissez le flottant à droite, les autres mises en page ne sont pas super.

5. Dans la cellule du dernier message

Vous pourriez vouloir reproduire le même effet que dans ce tutoriel, ce qui vous donnerait ceci :

La procédure est très similaire à celle pour les forums, à quelques détails près. Dans votre template topic_list_box, cherchez cette fois la cellule qui contient le dernier message (avec LAST_POST comme point de repère) :

Code:

<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap"><span class="postdetails">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</span></td>

Pour éviter de coller les statistiques au lien du dernier message posté, histoire d'avoir un affichage un peu propre, on va les mettre chacun dans un bloc (un div) différent, ce qui nous donne :

Code:

<td class="row3Right" onmouseover='this.className="row1"' onmouseout='this.className="row3Right"' align="center" valign="middle" nowrap="nowrap">
   <div class="postdetails StatsTopics">{topics_list_box.row.VIEWS} vues | {topics_list_box.row.REPLIES} réponses</div>
   <div class="postdetails LastPost">{topics_list_box.row.LAST_POST_TIME}<br />{topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</div>
</td>

Vous noterez qu'au passage on s'est débarrassés des balises <span> au profit de balises <div>. Ceci nous épargne l'ajout d'un saut de ligne, il vous suffira simplement de jouer sur les marges (propriété CSS margin) pour espacer les deux blocs.
Chaque bloc utilise la classe .postdetails histoire de mettre à profit les réglages de base de ForumActif, mais se voit attribuer chacun une classe bien personnelle, à savoir .StatsTopics pour les statistiques et .LastPost pour le dernier message posté. A vous, ensuite, de les personnaliser via le CSS (couleur de fond, bordure, etc), non sans oublier de préciser leur largeur (de préférence la même pour les deux).

Ce qui pourrait vous donner ceci par exemple :

Code:

.StatsTopics {
   width:150px;
   background:#f0f0f0;
   border:1px dashed #000000;
}

.LastPost {
   width:150px;
}

Et c'est tout ! Bon courage pour la suite !