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] Modification de l'affichage des colonnes 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: 44215
Age: 24
Localisation: Lille
$ops: 21138
Points: 505
Date d'inscription: 01/02/2008
Distinctions: Membre de l'EST-SoP
*** Co-Rédactrice en Chef du M-SoP ***

 
MessageSujet: [Xooit] Modification de l'affichage des colonnes sur l'index   Mer 2 Mar - 15:16
Bonjour à tous

Dans ce tutoriel, nous allons apprendre à modifier l'index de notre forum xooit pour avoir ceci :



Modification de la structure



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

Tout d'abord, on va s'occuper de n'afficher que 2 colonnes sur notre index. Pour cela, repérez cette partie dans votre template :

Code:

<table width="100%" cellpadding="2" cellspacing="1" border="0" class="forumline">
  <tr>
   <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
   <th width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
   <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>
  <!-- BEGIN catrow -->
  <tr>
   <td class="catLeft" colspan="2" height="28" style="background-image:url('http://i66.servimg.com/u/f66/12/46/69/40/sepa10.jpg');"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right" style="background-image:url('http://i66.servimg.com/u/f66/12/46/69/40/sepa10.jpg');"> </td>
  </tr>
  <!-- BEGIN forumrow -->
  <tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"  alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>

     </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}

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


-> Essayons de comprendre ce code. Cette ligne du tableau :

Code:
 <tr>
   <th colspan="2" class="thCornerL" height="25" nowrap="nowrap"> {L_FORUM} </th>
   <th width="50" class="thTop" nowrap="nowrap"> {L_TOPICS} </th>
   <th width="50" class="thTop" nowrap="nowrap"> {L_POSTS} </th>
   <th class="thCornerR" nowrap="nowrap"> {L_LASTPOST} </th>
  </tr>


correspond à ça :

Spoiler:
 


-> Cette partie

Code:
 
<tr>
   <td class="catLeft" colspan="2" height="28" style="background-image:url('http://i66.servimg.com/u/f66/12/46/69/40/sepa10.jpg');"><span class="cattitle"><a href="{catrow.U_VIEWCAT}" class="cattitle">{catrow.CAT_DESC}</a></span></td>
   <td class="rowpic" colspan="3" align="right" style="background-image:url('http://i66.servimg.com/u/f66/12/46/69/40/sepa10.jpg');"> </td>
  </tr>


correspond à ça :

Spoiler:
 


-> et pour finir, on affiche les forums et sous forums

Code:
 
<tr>
   <td class="row1" align="center" valign="middle" height="50"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}"  alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
   <td class="row1" width="100%" height="50"><span class="forumlink"> <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumlink">{catrow.forumrow.FORUM_NAME}</a>

     </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}

     </span><span class="gensmall">{catrow.forumrow.L_MODERATOR} {catrow.forumrow.MODERATORS}</span></td>
   <td class="row2" 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="row2" align="center" valign="middle" height="50" nowrap="nowrap"> <span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  </tr>


Spoiler:
 


Nous, on ne veut que 2 colonnes. On va donc supprimer les colonnes : "sujets" {L_TOPICS} et "messages" {L_POSTS} et on va mettre ses éléments après la descriptions des forums.

Code:
 {catrow.forumrow.FORUM_DESC}
{catrow.forumrow.TOPICS} sujets & {catrow.forumrow.POSTS} messages



On aura donc :

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

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

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


Ce qui nous affiche :

Spoiler:
 


Modification de la mise en page



Maintenant qu'on a notre structure qui est correct, travaillons un peu la mise en page des infos sur le nombre de messages et de sujets. Tout d'abord, on va modifier un peu notre ancien code en le mettant dans un bloc avec un nom

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




Visuellement, ça ne change rien

On va maintenant attaquer notre CSS. Tout d'abord, notre bloc a une id. On va le coder comme ça :

Code:
.infos_stats{les propriétés;}


1/ On va lui dire que le texte est aligné à droite

Code:
 text-align:right;


2/ On donne une couleur de fond au bloc

Code:
 background-color:#B8D0DC;


3/ On lui met des bordures

Code:
border-bottom: 1px solid #587EA5;
border-top: 1px solid #587EA5;
border-left: 3px solid #587EA5;
border-right: 3px solid #587EA5;


4/ Comme on ne veut pas que le texte soit collé au bord du cadre, on ajoute un peu de remplissage (padding)

Code:
padding:4px;


5/ On met le texte en italique

Code:
font-style:italic;


6/ Finalement, on ajoute un peu d'espace avant le bloc pour éviter qu'il ne soit collé à la description du forum

Code:
margin-top:2px;


ce qui nous donne comme code :

Code:
.infos_stats{
text-align:right;
background-color:#B8D0DC;
border-bottom: 1px solid #587EA5;
border-top: 1px solid #587EA5;
border-left: 3px solid #587EA5;
border-right: 3px solid #587EA5;
padding:4px;
font-style:italic;
margin-top:2px;
}


Nous allons maintenant ouvrir le template "overall_header.tpl". Repérez ceci :

Code:
</style>


Mettez votre CSS juste avant ce code

Code:
.infos_stats{
text-align:right;
background-color:#B8D0DC;
border-bottom: 1px solid #587EA5;
border-top: 1px solid #587EA5;
border-left: 3px solid #587EA5;
border-right: 3px solid #587EA5;
padding:4px;
font-style:italic;
margin-top:2px;
}



Et enregistrez.

Le tour est joué !

----------------

Des questions ? Remarques ? Problèmes ?

Je vous écoute


Basé sur une aide spécifique demandée par Newteen


Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://pvereecken.fr/
 

[Xooit] Modification de l'affichage des colonnes 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