Configuration des catégories

Avant de personnaliser les templates, veillez à ce que vos catégories soient séparées en allant la spécifier dans votre panneau d'administration, dans l'onglet Affichage puis le menu Page d'accueil » Structure et Hiérarchie :

Bien que ce réglage ne soit pas indispensable, il offre néanmoins plus de possibilités de mise en forme et est donc plus utilisé dans les différents tutoriels et codes à copier coller de CSSActif.

Le template

La première chose importante à savoir, le template associé à la structure des catégories et des forums est le template index_box. Vous pouvez le trouver dans votre panneau d'administration (si vous êtes fondateur), dans l'onglet Affichage puis Templates » Général

La partie qui nous intéresse pour personnaliser le tableau des forums est celle-ci :

Spoiler:

Comme mentionné un peu plus haut, on a donc un très grand tableau. Pour ceux d'entre-vous qui n'ont jamais eu affaire avec des tableaux, je vous conseille vivement d'aller lire le cours sur les tableaux, ça facilitera grandement votre compréhension !

Nous allons passer section par section pour analyser les différents éléments qui vous aideront.

Analyse du Template

En-tête et catégories

Nous étudierons donc le début de code que je vous ai donné ci-dessus :

Code:

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

Pour commencer :

Code:

<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">

Ceux qui connaissent déjà un peu les tableaux sauront que la balise <table> indique le commencement du tableau. Les informations que nous trouvons à l'intérieur de cette balise :

• forumline est la classe de ce tableau. C'est grâce à cette classe que lorsque vous allez dans votre panneau d'admnistration pour changer les couleurs de l'apparence de votre forum, c'est possible. Si vous voulez plus de précision quant-à cette classe, je vous invite à aller voir dans le CSS de base de votre forum disponible dans Affichage> Images et Couleurs > Couleurs > Feuille de Style > lien VOIR LE CSS DE BASE DE VOTRE FORUM, et puis vous cherchez la classe !
  
  
• width="100%" indique la largeur du tableau, soit 100% de l'espace.
  
  
• cellspacing="1" : l'attribut cellspacing crée une marge entre les cellules du tableau. Il agit un peu comme la propriété CSS margin.
  
  
• cellpadding="0" : l'attribut cellpadding crée une marge entre le contenu de la cellule et sa bordure. Il agit un peu comme la propriété CSS padding. Ici, on peut voir que sa valeur est de 0.

Ensuite, on passe à un peu plus concret avec l'en-tête des catégories :

Il correspond à cette partie du code :

Code:

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

Rappelons que <tr> est la balise qui forme une ligne dans un tableau, et que <th> est une cellule de titre (les cellules normales utilisent la balise <td>)

De fait, si vous enlevez entièrement cette partie du code de votre template, toute la ligne disparaîtra ! Par contre, vous ferez face à un problème de déformation des colonnes dû aux propriétés inscrites dans les balises que je vais traiter dans les prochains points.

Les différents attributs des différentes cellules :

• colspan="{catrow.tablehead.INC_SPAN}" : l'attribut colspan permet de fusionner plusieurs colonnes adjacentes. La variable entre crochets vaut normalement 2 ou plus (ça dépend du niveau de hiérarchisation que vous avez défini pour votre forum, cf première partie de ce tutoriel). C'est dans cette cellule qu'est écrit le titre de la catégorie. Par défaut, les 2 colonnes fusionnées pour obtenir ceci sont celles de l'image (Nouveau message, pas de nouveau message, forum verrouillé) ainsi que les cellules où sont inscrits les forums/sous-forums/descriptions.
  Note de 'Christa : Si vous avez choisi "aucune compression" pour l'affichage de vos catégories (cf première partie de ce tutoriel), alors le nombre de colonnes fusionnées s'adaptera en fonction de la "profondeur" des sous forums.
  
  
• width, comme on le sait, indique la largeur de la colonne. Comme mentionné plus haut, si vous enlevez les balises <th>, ça enlève l'entête, mais ça occasionne une déformation causée justement parce qu'on n'indique plus la taille de nos colonnes.
  
  Rappel : les chiffres indiqués à la suite de cette propriété sont des pixels, sauf présence de "%"
  
  Pour remédier au problème, vous pouvez simplement noter les largeurs de chaque colonne, et aller les réécrire dans les cellules ! (<td>)
  
  Edit de 'Christa : En réalité, cette valeur ne sert à rien (comme vous le verrez vous même en faisant vos tests), en particulier sous Firefox et Chrome. En effet, la première cellule est de dimension "100%" et force les autres cellules à être aussi petites que possible, quelle que soit la largeur qu'on leur a fixée. Pour pouvoir imposer une largeur aux cellules, il vous faudra y insérer un <div> avec une classe lui attribuant la largeur de votre choix.
  
  
• nowrap="nowrap" : l'attribut nowrap (dont la valeur est nowrap, oui) empêche le retour à la ligne si le texte contenu est plus grand que la taille de la cellule. En d'autres termes, la largeur de la cellule s'adaptera à son contenu.
  Edit de 'Christa : Cet attribut est obsolète et ne devrait plus être utilisé en principe. N'hésitez donc pas à le virer sans remords si vous en avez l'occasion
  
  
• {catrow.tablehead.L_FORUM} : contient le titre de votre catégorie
  
  
• {L_TOPICS} contient le texte "Sujets"
  
  
• {L_POSTS} contient le texte "Messages"
  
  
• {L_LASTPOST} contient le texte"Derniers messages"

Deuxième ligne

La deuxième "ligne" du tableau n'est utilisée que si vous utilisez l'affichage des forums sans séparation des catégories :

Code:

   <!-- 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"> </td>
   </tr>
   <!-- END cathead -->

On ne s'attardera pas trop sur cette partie.

Troisième ligne de tableau

On s'intéresse maintenant à la troisième ligne du tableau, qui contient ce qui nous intéresse le plus c'est à dire les icones de forums, le titre des forums, la description, les sous forums, le nombre de messages et de sujets et le dernier message posté.

Code:

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

► L'icone de forum :
Cette cellule, dans laquelle varieront les images 'NOUVEAUX MESSAGES", "PAS DE NOUVEAUX MESSAGES" et "FORUM VERROUILLÉ", correspond à cette partie du code:

Code:

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

On reconnaît le code relativement facilement à cause de la balise <img> (image).

Ce qui est utile à savoir dans ce code :

• align="center" ainsi que valign="middle" indiquent que le contenu de la cellule (donc l'image) est centré horizontalement et verticalement.
  
• {catrow.forumrow.FORUM_FOLDER_IMG} est la variable qui contient l'URL de l'icone de catégorie

► Forums, sous-forums et descriptions
On s'occupe à présent de la deuxième cellule de la ligne, à savoir cette partie du 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>

Ce qu'il y a d’intéressant à savoir sur cette partie de code :

• <h{catrow.forumrow.LEVEL} ...> est une balise de titre de la même façon que

  Code:

  <h1>Titre de niveau 1</h1>
  <h2>Titre de niveau 2</h2>
  etc...

  La variable {catrow.forumrow.LEVEL} change de valeur selon le degré hiérarchique du titre (en commençant au niveau <h2>).
  Note de 'Christa : La valeur de cette variable dépend du degré de compression (aucun/moyen/complet) que vous avez demandé pour l'affichage de vos forums, cf première partie de ce tutoriel.
  
  
• {catrow.forumrow.FORUM_NAME} est la variable qui contient le nom de votre forum. Il est important de remarquer aussi les balises <a> qui l'entourent : C'est un lien Quand vous modifierez votre template, il est très important de ne pas enlever les balises de liens !
  
  
• genmed et gensmall sont des classes qu'on rencontre assez régulièrement dans les templates : elles indiquent l'apparence de l'écriture (modifiable dans le panneau d'administration dans Couleurs. Si vous voulez le contrôler vous-même dans le CSS, vous n'avez qu'à modifier la classe
  Note de 'Christa : Dans l'administration des couleurs, la taille de genmed est gérée par l'option Taille police liens et la taille de gensmall est gérée par l'option Taille police principale). Méfiez vous cependant, genmed est généralement utilisé pour la taille de tous les textes du forum, et gensmall pour les "textes en petit". Je ne sais pas trop ce qu'ils ont fumé chez FA mais le titre de leurs options est parfois un peu hors sujet
  
  
• {catrow.forumrow.FORUM_DESC} est une variable qui contient de vos forums
  
  
• {catrow.forumrow.switch_moderators_links.L_MODERATOR}
{catrow.forumrow.switch_moderators_links.MODERATORS} : ces deux variables sont respectivement le texte "Modérateurs" et la liste des modérateurs d'un forum, si vous avez activé cet affichage dans votre panneau admin.
  
  
• {catrow.forumrow.L_LINKS}
{catrow.forumrow.LINKS} : ces deux variables sont respectivement le texte "Sous-Forums" et la liste des sous-forums d'un forum, si vous avez activé cet affichage dans votre panneau admin.

► Les colonnes "Sujets", "Messages" et "Derniers Messages"
Ces trois colonnes correspondent à cette partie :

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>

C'est la partie du code la plus facile selon moi !

• {catrow.forumrow.TOPICS} : cette variable de template contient le nombre de sujets dans le forum
  
  
• {catrow.forumrow.POSTS} : cette variable de template contient le nombre de messages dans le forum
  
  
• {catrow.forumrow.LAST_POST} : cette variable de template contient le sujet ayant reçu une réponse le plus récemment
  
  
• row3 et over sont des classes ayant pour propriété la couleur de fond de la colonne (entre-autres) telle que spécifiée dans l'administration des couleurs pour l'option "table rangée couleur 3 et séparations" (sachant que class="row3 over" veut dire que les DEUX classes .row3 et .over sont appliquées). La classe .over veut simplement dire qu'il y a un changement lorsque la souris survole la colonne

Conclusion

Bref, une fois que vous maîtrisez pleinement les tableaux en HTML et que vous connaissez les variables qui composent le tableau initial des forums, vous êtes fin prêt pour rendre votre forum unique !

C'était mon premier tutoriel donc j'espère qu'il était assez clair ! Si vous avez des questions, n'hésitez pas à venir les poser dans la section d'aide

Fire-fly