Header
Partagez | 

[Xooit] Séparer les catégories sur l'index

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur

Message Sujet: [Xooit] Séparer les catégories sur l'index   Lun 14 Mar - 14:46

Bonjour bonjour Smile

C'est encore moi Very Happy

Pour ce tutoriel, je vais vous expliquer comment séparer vos catégories sur l'index de votre forum, pour avoir ceci

Spoiler:
 

Vous allez voir, c'est très facile Very Happy

Pour cela, nous allons travailler dans le template "index_body.tpl"

Remarque : votre code n'est peut être pas tout à faire similaire au mien : pas de panique ! Le forum que j'utilise pour ces tutoriels me sert aussi de forum de test. Des modifications sont peut être déjà faites donc Wink

On repère le code



Dans le template, voici le code qui correspond à l'affichage des catégories :

Code:
  <!-- BEGIN catrow -->
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50">
        <!-- BEGIN switch_ficons -->
        <table style="padding:0;margin:0;" cellspacing="0" cellpadding="0"><tr><td style="width:{FICONSW}px;padding:3px">{catrow.forumrow.FORUM_ICON}</td><td>
        <!-- END switch_ficons -->
        <h1 class="titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></h1> <div class="description_forum">{catrow.forumrow.FORUM_DESC}</div><span class="genmed">
          <!-- BEGIN switch_has_subforums -->
         

          <!-- END switch_has_subforums -->
          <!-- BEGIN subforumrow -->
          <img src="{catrow.forumrow.subforumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.subforumrow.L_FORUM_FOLDER_ALT}" /><b><a href="{catrow.forumrow.subforumrow.U_VIEWFORUM}" class="postlink">{catrow.forumrow.subforumrow.FORUM_NAME}</a></b>
          <!-- END subforumrow -->
         

       <div class="infos_stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span></div>


     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span>
          <!-- BEGIN switch_ficons -->
          </td></tr></table>
          <!-- END switch_ficons -->
</td>
   <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
  <!-- END catrow -->

Tout ce code appartient à un tableau

Code:
<table width="100%" border="0">
  <tr>
   <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
  <!-- BEGIN catrow -->
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50">
        <!-- BEGIN switch_ficons -->
        <table style="padding:0;margin:0;" cellspacing="0" cellpadding="0"><tr><td style="width:{FICONSW}px;padding:3px">{catrow.forumrow.FORUM_ICON}</td><td>
        <!-- END switch_ficons -->
        <h1 class="titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></h1> <div class="description_forum">{catrow.forumrow.FORUM_DESC}</div><span class="genmed">
          <!-- BEGIN switch_has_subforums -->
         

          <!-- END switch_has_subforums -->
          <!-- BEGIN subforumrow -->
          <img src="{catrow.forumrow.subforumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.subforumrow.L_FORUM_FOLDER_ALT}" /><b><a href="{catrow.forumrow.subforumrow.U_VIEWFORUM}" class="postlink">{catrow.forumrow.subforumrow.FORUM_NAME}</a></b>
          <!-- END subforumrow -->
         

       <div class="infos_stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span></div>


     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span>
          <!-- BEGIN switch_ficons -->
          </td></tr></table>
          <!-- END switch_ficons -->
</td>
   <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
  <!-- END catrow -->
</table>

Je sépare mes catégories



Ici, on va essayer de communiquer avec ce tableau. On va lui dire : "je ne veux pas que tu sois dans le tableau, mais je veux que chaque catégorie soit un tableau". On va donc changer de place le "begin catrow" et "end catrow" (début de la catégorie, fin de la catégorie). On va les placer avant le début du tableau et après la fin du tableau. Ce qui nous donne :

Code:
  <!-- BEGIN catrow -->
<table width="100%" border="0">
  <tr>
   <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50">
        <!-- BEGIN switch_ficons -->
        <table style="padding:0;margin:0;" cellspacing="0" cellpadding="0"><tr><td style="width:{FICONSW}px;padding:3px">{catrow.forumrow.FORUM_ICON}</td><td>
        <!-- END switch_ficons -->
        <h1 class="titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></h1> <div class="description_forum">{catrow.forumrow.FORUM_DESC}</div><span class="genmed">
          <!-- BEGIN switch_has_subforums -->
         

          <!-- END switch_has_subforums -->
          <!-- BEGIN subforumrow -->
          <img src="{catrow.forumrow.subforumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.subforumrow.L_FORUM_FOLDER_ALT}" /><b><a href="{catrow.forumrow.subforumrow.U_VIEWFORUM}" class="postlink">{catrow.forumrow.subforumrow.FORUM_NAME}</a></b>
          <!-- END subforumrow -->
         

       <div class="infos_stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span></div>


     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span>
          <!-- BEGIN switch_ficons -->
          </td></tr></table>
          <!-- END switch_ficons -->
</td>
   <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
</table>
  <!-- END catrow -->

Pour ajouter un espace entre chaque tableau, on va ajouter un "br" (= saut de ligne) avant la fin de l'affichage de la catégorie, juste après le tableau

Code:
</td>
   <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
</table>


  <!-- END catrow -->

Pour le moment, on en est là :

Spoiler:
 

1 seule barre forum & stat'



Pour le moment, chaque catégorie est surmonté d'une ligne "forum" et "derniers messages". On va donc essayer de régler ça Smile

Pour enlever cette double barre, c'est cette partie qui va nous intéresser :

Code:
 <!-- BEGIN catrow -->
<table width="100%">
  <tr>
   <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->

Ici, on dit au code: "pour chaque catégorie (begin catrow) tu crées un tableau avec comme "en-tete" (les "th") : forum et dernier message, puis tu affiches les forums et sous forums (begin forumrow)."

Nous on ne veut pas d'en-tête pour chaque catégorie. On va donc déplacer les th que l'on va mettre avant le début des catégories et dans une table à part. On va aussi devoir fixer une largeur de 8% à la colonne qui correspond à "dernier message"

Ce qui nous donne :

Code:
<table width="100%" style="border:0;">
  <tr>
   <th class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th class="thCornerR" width="8%" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
 </table>

  <!-- BEGIN catrow -->
<table width="100%">
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->

C'est déjà fini ?



Et oui !

Voici donc le code du début modifié :

Code:
 <table width="100%" style="border:0;">
  <tr>
   <th class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th class="thCornerR" width="8%" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
 </table>

  <!-- BEGIN catrow -->
<table width="100%">
  <tr>
   <td class="catLeft" colspan="2" height="28"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right"> </td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" width="46" height="25" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50">
        <!-- BEGIN switch_ficons -->
        <table style="padding:0;margin:0;" cellspacing="0" cellpadding="0"><tr><td style="width:{FICONSW}px;padding:3px">{catrow.forumrow.FORUM_ICON}</td><td>
        <!-- END switch_ficons -->
        <h1 class="titre"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a></h1> <div class="description_forum">{catrow.forumrow.FORUM_DESC}</div><span class="genmed">
          <!-- BEGIN switch_has_subforums -->
         

          <!-- END switch_has_subforums -->
          <!-- BEGIN subforumrow -->
          <img src="{catrow.forumrow.subforumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.subforumrow.L_FORUM_FOLDER_ALT}" /><b><a href="{catrow.forumrow.subforumrow.U_VIEWFORUM}" class="postlink">{catrow.forumrow.subforumrow.FORUM_NAME}</a></b>
          <!-- END subforumrow -->
         

       <div class="infos_stats"><span class="gensmall">{catrow.forumrow.TOPICS} sujets - {catrow.forumrow.POSTS} messages</span></div>


     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span>
          <!-- BEGIN switch_ficons -->
          </td></tr></table>
          <!-- END switch_ficons -->
</td>
   <td class="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>
  <!-- END forumrow -->
</table>


  <!-- END catrow -->

[center]Bon, ce fut long, mais le résultat est là n'est ce pas ?




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Miettes,  accepte qu'un directeur reposte le tutoriel "[Xooit] Séparer les catégories sur l'index" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Séparer les catégories sur l'index
Page 1 sur 1
 Sujets similaires
-
» [Nocturne] Demande: les catégories
» [Annulée] Demande de description des catégories.
» ['Christa] Regrouper les catégories en Onglet
» Niveau des catégories...
» [Phantasmagoria] Modification des catégories
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+