School of Pub, où la perfection est à la portée de chacun. (Dixit Audidounette)

AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

 


School of Pub :: Les cours :: Tutoriels :: Informatique :: Gestion d'un forumPartager | 
 

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

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

Miettes

Directrice

Voir le dossier scolaire

Directrice

Féminin Rang spécial: Designer professionnelle, formatrice analystes, codeurs, admins, animateurs, graphistes (photoshop, gimp)
Marraine

Rédactrice en chef du M-SoP

Chroniqueuse de l'émission de SoP

Nombre de messages: 44252
Age: 24
Localisation: Lille
$ops: 21164
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

 
MessageSujet: [Xooit] Séparer les catégories sur l'index   Lun 14 Mar - 13: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 -->


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

Un souci ? N'hésitez pas à le dire Smile

[Si vous avez un soucis, n'hésitez pas à venir poser vos questions par ici]
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/ En ligne
 

[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

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Pub :: Les cours :: Tutoriels :: Informatique :: Gestion d'un forum-


Aller en haut
Aller en bas