Header

Partagez | 

[Xooit] Modification de l'affichage des colonnes sur l'index

Message Sujet: [Xooit] Modification de l'affichage des colonnes sur l'index   Mer 2 Mar - 16:16

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Miettes

Doyenne
Bons Points (BP) : 233
Voir le profil de l'utilisateur
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




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] Modification de l'affichage des colonnes sur l'index" tel que je l'ai rédigé.
Revenir en haut Aller en bas
[Xooit] Modification de l'affichage des colonnes sur l'index
Page 1 sur 1
 Sujets similaires
-
» Modification de l'affichage d'un post
» Modification de l'affichage des permissions dans un forum
» Modification de l'affichage des catégories
» Modification de l'affichage des groupes (Variables user et group)
» Non affichage du message de l'index aux visiteurs
Réponse rapide

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

Qui est en ligne ?

SoP en quelques chiffres

Nos étudiants ont posté un total de @messages@ messages.

Nous avons @membres_enregistres@ étudiants inscrits dans l’école.

Le dernier dossier validé est celui de @dernier_membre@.

@@membres_anniversaire_aujourdhui?@membres_anniversaire_aujourdhui=Il/Elle fête son anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$&@$Ils fêtent leur anniversaire aujourd'hui : @membres_anniversaire_aujourdhui$, @@$Aucun membre ne fête son anniversaire aujourd'hui. @@

Ils étaient là hier

@derniers_membres_connectes$, @

Liste de présence

@membres_connectes$, @

La DirectionLes AssistantsLes SurveillantsLes ArtistesLes InspecteursLes PitresLes IntervenantsLes Doyens