Avant de se compliquer la vie : La méthode simple

La suite de ce tutoriel vous fera déplacer le titre des catégories en dehors du tableau qui liste tous les forums d'une catégorie. Mais avant de vous lancer dans des modifications complexes, si vous avez simplement besoin de les mettre en forme sans toucher au reste de la structure de base de votre forum, vous pouvez vous contenter de quelques lignes de CSS. Dans votre panneau d'administration, rendez-vous dans l'onglet Affichage puis dans le menu Images & Couleurs » Couleurs et enfin dans l'onglet Feuille de style CSS, puis collez le code suivant (exemple à personnaliser vous-même évidemment) dans le champ de texte :

Code:

.secondarytitle h2 {
 text-align: center; /*alignement du texte par rapport au bloc qui le contient */
 letter-spacing:2px; /* espacement entre les lettres */
 font-variant:small-caps; /* texte en petites majuscules */
   color:#ffffff; /* couleur du texte */
   font-family: Geneva, Tahoma, Verdana, sans-serif;
   font-size:16px;
}

Vous voulez en faire plus ? Dans ce cas, c'est maintenant que ça se corse !

Etape 1 - modifier le template

Pour modifier l'apparence du titre des catégories, il faut modifier le template index_box. Pour cela, dans votre panneau d'administration, rendez-vous dans l'onglet Affichage, puis dans le menu Templates » Général et dans la liste cliquez sur le nom du template que vous voulez éditer, à savoir index_box.

Dans le dit template, trouvez ce bout de code {catrow.tablehead.L_FORUM} (c'est le titre de la catégorie) et supprimez-le. Nous allons placer le titre de la catégorie en dehors du tableau qui contient la liste des forums de la dite catégorie. Pour cela, repérez cette partie du code :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Juste après, ajoutez le code suivant :

Code:

<div class="TitreCategorie">{catrow.tablehead.L_FORUM}</div>

Vos modifications terminées, enregistrez votre template et n'oubliez pas de le publier en cliquant sur le petit "+" vert à côté de son nom.

La première partie est terminée. Il faut maintenant personnaliser le tout avec du CSS.

Etape 2 - La mise en forme avec le CSS

C'est avec le CSS que vous pourrez faire tout le travail de mise en forme de votre titre de catégorie. Voici donc un code CSS de base modifiable à votre convenance :

Code:

/* Mise en forme du "bloc" qui contient le titre */
.TitreCategorie {
 background: #DEE3E7; /*fond*/
 /* Des coins arrondis */
 border-radius:50px 50px 0 0;
 -moz-border-radius:50px 50px 0 0;
 -wekbit-border-radius:50px 50px 0 0;
 width: 500px; /*largeur à modifier selon vos goûts*/
 margin:auto; /* on centre le bloc */
 padding:2px; /*espace entre la bordure et le texte*/
   border:2px solid #006699;
   border-bottom:0px;
}

/* mise en forme du titre lui-même */
.TitreCategorie h2 {
 margin:0; /* le titre a des marges par défaut, pour éviter de 'casser' nos réglages, on remet à zéro ici */
 text-align: center; /*alignement du texte par rapport au bloc qui le contient */
 letter-spacing:2px; /* espacement entre les lettres */
 font-variant:small-caps; /* texte en petites majuscules */
   color:#006699; /* couleur du texte */
   font-family: Geneva, Tahoma, Verdana, sans-serif;
   font-size:16px;
}

Et si on retirait la première ligne ?

Il se peut qu'à ce stade vous souhaitiez carrément supprimer la première ligne du tableau, celle qui contenait le titre à l'origine, et qui contient aussi le titre des autres colonnes. Pour ça, retournez dans votre template index_box et cherchez la première ligne du tableau (rappelez vous, une ligne de tableau, ce sont les balises <tr>), qui devrait ressembler à ceci, si vous avez suivi le tutoriel à la lettre près :

Code:

<tr>
 <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle">  </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>

Supprimez toute cette partie. Et hop, vous avez supprimé la première ligne, joie !

Cependant, vous allez avoir droit à quelques surprises : les colonnes seront de largeurs un peu hasardeuses ! Pour cela, il vous faut fixer à nouveau les largeurs des trois colonnes contenant respectivement le nombre de sujets (repérez le mot TOPIC), le nombre de messages (repérez le mot POSTS) et le dernier message (repérez le LAST_POST), c'est à dire en modifiant cette partie du 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>
 <td class="row3 over" align="center" valign="middle" height="50">
 <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
 </td>

Inutile de remettre la largeur directement dans les attributs des cellules (genre width="50"), ça ne marchera pas. Au lieu de ça on va utiliser encore un peu de CSS, similaire à ce <div style="width:150px;"> qui entourait le titre de la colonne des derniers messages, qu'on va reproduire de façon un peu différente. En effet, nous allons encadrer le contenu de ces cellules avec des <div>...

Code:

<td class="row3" align="center" valign="middle" height="50">
 <div class="gensmall NbTopics">{catrow.forumrow.TOPICS} sujets</div>
 </td>
 <td class="row2" align="center" valign="middle" height="50">
 <div class="gensmall NbPosts">{catrow.forumrow.POSTS} messages</div>
 </td>
 <td class="row3 over" align="center" valign="middle" height="50">
 <div class="gensmall LastPost">{catrow.forumrow.LAST_POST}</div>
 </td>

Comme vous pouvez le constater en comparant les deux versions, ce ne sont plus des <span> mais des <div> qui entourent les trois variables entre crochets. La classe .gensmall est toujours là, mais elle est accompagnée d'une classe supplémentaire, différente pour chaque cellule, que l'on va s'empresser de définir dans le CSS en rajoutant ces lignes de code :

Code:

/* Largeur de la cellule du nombre de sujets */
.NbTopics { width:80px; }
/* Largeur de la cellule du nombre de messages */
.NbPosts { width:100px; }
/* Largeur de la cellule du dernier message posté */
.LastPost { width:150px; }

L'avantage d'utiliser des classes, c'est que si vous voulez modifier la largeur des colonnes, vous n'avez plus besoin d'éditer les templates pour le faire. Au final, ça vous donne ceci :
Evidemment, si vous aviez déjà modifié votre template, par exemple en utilisant ce tutoriel supprimant les colonnes "Messages" et "Sujets", il vous faudra vous adapter en conséquence.

...Oui mais j'y arrive pas ToT

*soupir* Bon, si vous aviez retiré les colonnes "Messages" et "Sujets" dans votre template, la première chose à faire est toujours de retirer la première ligne du tableau. Celle ci a peut-être changé, mais souvenez vous, une ligne de tableau ça commence par <tr> et ça finit par </tr>. Reste à savoir où elle est cette ligne, me demanderez vous. En principe, elle est un peu après cette partie du code :

Code:

<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Cherchez le premier <tr> qui suit, ainsi que le premier </tr>, et effacez les, de même que tout ce qu'il y a entre.

Maintenant, le même problème est toujours là, vous devez donner une largeur à la dernière cellule (celle contenant le lien du dernier message posté, en principe) sinon ça va être tout compressé. Pour ça, repérez ladite cellule et faites les modifications comme expliquées plus haut...

Si vous avez suivi ce tutoriel il n'y a pas de grande différence, vous devez juste modifier ce code :

Code:

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

Même principe qu'expliqué plus haut, et votre code devient donc :

Code:

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

Si vous aviez utilisé ce tutoriel, le code correspondant à colonne des derniers messages devrait ressembler à ceci :

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>

Oh mais, voilà qui est intéressant, vous aviez déjà transformé les span en div et je vois déjà deux classes que vous pouvez personnaliser, .sujets_messages et .derniers_sujets. Vous n'avez même pas besoin de définir une nouvelle classe, du coup ! Il vous suffit simplement de fixer une largeur pour l'une des deux classes que je viens de citer, et le problème sera réglé.

Ce tutoriel est désormais terminé, bon courage !