Partagez | 
 

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

Voir le sujet précédent Voir le sujet suivant Aller en bas 
avatar

Miettes

Doyenne

Bons Points (BP) : 113
MessageSujet: [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é.
 

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

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Séparer les catégories
» [Nocturne] Demande: les catégories
» [Annulée] Demande de description des catégories.
» ['Christa] Regrouper les catégories en Onglet
» Niveau des catégories...

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants