Ce tutoriel vous aidera à créer un petit effet assez sympa, qui change de l'affichage habituel des forums. Au lieu des traditionnelles cases "messages" et "sujets" que nous voyons sur la plupart des forums - ou bien les "contient X messages dans X sujets" qui commencent à se répandre partout, votre forum pourra essayer de se distinguer par cet effet. Suffit juste de lire attentivement le tutoriel =)

Suppression des colonnes de statistiques (messages & sujets)

Dans la mesure où l'on va placer les statistiques ailleurs, les deux colonnes qui contiennent ces valeurs deviennent obsolètes. La première étape sera donc de s'en débarrasser.

Pour ceci, rendez-vous tout d'abord sur votre panneau d'administration, onglet Affichage, puis dans le menu Templates » Général et éditez le template index_box.

Cherchez, puis supprimez les lignes de code suivantes :

Code:

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

Le titre de la colonne "Sujets"

Code:

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

Le titre de la colonne "Messages"

Ce n'est pas tout, on a retiré le titre des deux colonnes mais les colonnes en elles-mêmes sont toujours là. Plus bas dans le code de votre template, cherchez, puis supprimez ce bout de code :

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>

Attention aux erreurs d'inattention, vous devez supprimer deux cellules, n'oubliez pas le </td> final par exemple.

Remarquez les variables {catrow.forumrow.TOPICS} et {catrow.forumrow.POSTS}, nous les réutiliserons plus tard, ce sont elles qui affichent respectivement le nombre de sujets et le nombre de messages des forums.

A ce stade, vous allez donc vous retrouver avec une seule case restante : celle des derniers sujets postés. Ces manipulations nous ont donc permis - pour l'instant - de passer de ceci à celà. Chouette non ?

Replacer les statistiques

Maintenant, il faut remettre les "messages" et "sujets" en place. Et pour cela nous avons besoin des deux variables mentionnées plus haut, à savoir {catrow.forumrow.TOPICS} (le nombre de sujets) et {catrow.forumrow.POSTS} (le nombre de messages)

Dans le code de votre template (toujours index_box), il faut donc localiser l'endroit où nous voulons mettre ce code, soit juste au-dessus de "dernier message posté". Le bout de code concerné est donc celui-ci :

Code:

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

Il suffit donc de rajouter nos statistiques à cet endroit pour avoir la base de notre effet et de personnaliser le texte comme on le souhaite (on peut remplacer 'messages' par autre chose par exemple).

Code:

<td class="row3 over" align="center" valign="middle" height="50">
 <div class="gensmall sujets_messages">Messages : {catrow.forumrow.POSTS} | Sujets : {catrow.forumrow.TOPICS}</div>
 <div class="gensmall derniers_sujets">{catrow.forumrow.LAST_POST}</div>
 </td>

Vous pouvez constater que j'ai placé les statistiques dans une balise <div> à laquelle sont attribuées deux classes : gensmall et sujets_messages. J'ai aussi modifié le <span> qui englobait la variable {catrow.forumrow.LAST_POST} pour en faire un <div> et je lui ai rajouté la classe derniers_sujets. Ceci nous permettra non seulement de récupérer la mise en forme "de base" du texte telle que vous l'avez définie dans votre panneau d'administration (grâce à la classe gensmall), mais aussi de spécifier une mise en forme personnalisée plus tard grâce à un peu de CSS !

Vous pouvez enregistrer et publier votre template
A présent, vous devez avoir ceci : clic. C'est pas super beau, mais on va arranger cela

C'est plus joli avec du CSS !

En effet, c'est plus joli avec du CSS, nous allons donc personnaliser tout cela. Faites donc chauffer vos cerveaux =) Déjà, il faut ouvrir la feuille CSS de votre forum : dans l'onglet Affichage de votre panneau d'administration, sélectionnez le menu Images et couleurs » Couleurs, puis l'onglet Feuille de style CSS. Souvenez-vous, à l'étape précédente nous avons attribué à nos <div> deux nouvelles classes : .sujets_messages et .derniers_sujets (le point qui précède ces noms de classe signifie, justement, qu'il s'agit de classes en notation CSS). Vous allez donc devoir les déclarer dans votre CSS et les personnaliser selon vos préférences :

Code:

.sujets_messages {
 padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

 /* après on peut rajouter ce qu'on veut : une bordure, une image de fond ... */
 border: 1px solid #000000;
 background-image: url('http://img411.imageshack.us/img411/4715/sanstitre3ex.png');
}


.derniers_sujets {
 margin-top: 3px; /* pour faire un léger espace entre la ligne des "messages & sujets" et "dernier message posté" */
 padding: 3px; /* pour ne pas que le texte se colle aux bords du cadre */

 /* après on peut rajouter ce qu'on veut : une bordure, une image de fond, des coins arrondis un peu originaux... */
 border: 1px dashed #000000;
 background-image: url('http://img411.imageshack.us/img411/4715/sanstitre3ex.png');
 border-radius:0 10px 0 10px;
 -moz-border-radius:0 10px 0 10px;
 -webkit-border-radius:0 10px 0 10px;
}

Tous les effets que vous souhaitez. ^^
Au final, ça donnera quelque chose comme ça : cliic (bon, mon exemple est pas du plus bel effet, mais ça peut rendre mieux avec d'autres codes et d'autres personnalisations )