Partagez | 
 

 [ForumActif] Un index à 2 colonnes

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

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [ForumActif] Un index à 2 colonnes   Dim 15 Jan - 15:26
Hello hello Smile

Comme beaucoup se posent la question, nous allons voir ici comment réaliser ce type de mise en page :


On prépare le template



Tout va se passer dans le template index_box.

On va devoir faire 2 étapes :
  • Supprimer la ligne "titre de la catégorie, Sujets, Messages et Derniers Messages" pour ne garder que "titre de la catégorie".
  • Ne faire que 2 colonnes (une avec l'image d'état du forum, et une avec la description, les stat' et le dernier message).
  • Préparer nos blocs.


La structure


On va commencer par "supprimer" la ligne "titre de la catégorie, sujets, messages et derniers messages". Celle-ci correspond à ce code dans notre template :
Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="50">{L_TOPICS}</th>
      <th nowrap="nowrap" width="50">{L_POSTS}</th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>

On va donc tout remplacer ce code par :

Code:
<tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
   </tr>

Ensuite, on va modifier nos colonnes en remplaçant ça :
Code:
<tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3" 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="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>

Par ça :

Code:
<tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>

Nous n'avons donc plus que 2 colonnes.

Les blocs



On va maintenant mettre les infos dans des blocs Smile On va donc commencer par :

1/ Mettre la variable correspondant à la description dans un bloc avec un nom
Code:
<div class="description">la variable description à mettre ici</div>

2/ a. Les stat' et dernier message dans un bloc
Code:
<div class="stats">les stats ici</div>
b. Dernier message dans un bloc
Code:
<div class="dernier_msg">la variable dernier message</div>
c. le nombre de sujet/message dans un bloc aussi
Code:
<div class="infos_forum">Les variables sujets + messages</div>
=> ce qui donne pour ce bloc
Code:
<div class="stats"><div class="dernier_msg">la variable dernier message</div><div class="infos_forum">Les variables sujets + messages</div></div>

Ce qui va nous donner avec les variables intégrées :

Code:

<div class="description">{catrow.forumrow.FORUM_DESC}</div>
<div class="stats">
  <div class="dernier_msg">{catrow.forumrow.LAST_POST}</div>
  <div class="infos_forum">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets</div>
</div>

On va donc remplacer ça :

Code:
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>

Par ça :
Code:
<td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
         <h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
               <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
            </span>
         </h{catrow.forumrow.LEVEL}>
         <div class="description">{catrow.forumrow.FORUM_DESC}</span>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
         </div>
<div class="stats">
  <div class="dernier_msg">{catrow.forumrow.LAST_POST}</div>
  <div class="infos_forum">{catrow.forumrow.POSTS} messages pour {catrow.forumrow.TOPICS} sujets</div>
</div>
      </td>


La mise en page


Il ne nous reste plus maintenant qu'à travailler la mise en page de nos blocs Smile (à adapter selon vos envies ^^)

Ici, je vais faire quelque chose de simple et qui s'applique à mes 3 blocs.
-> une bordure
-> une couleur de fond
-> des coins arrondis

On code une bordure comme ça :

Code:
border: épaisseur type couleur;

La couleur de la typo se définit tout simplement comme ça :
Code:
color: #code_couleur;

Donc j'sais pas trop ce que tu voulais dire ici :
Code:
font-color: #FFFFFF;
color: #FFFFFF;

Ensuite pour avoir des coins arrondis, c'est ce code (attention, ça ne marche par sous IE) :
Code:
  border-radius:12px;
-webkit-border-radius:12px;
-moz-border-radius:12px;

En sachant que :
-> border-radius (logiquement, ça marche avec les versions récentes de la plupart des navigateurs sauf IE).
-> -webkit-border-radius (pour chrome et safari il me semble).
-> -moz-border-radius (pour mozilla).

Ce qui va me donner dans mon css :
Code:
div.description, div.dernier_msg, div.infos_forum{
   border: 2px solid #000000;
   color: #000000;
   background-color: #FFFFFF;
   border-radius:12px;
   -webkit-border-radius:12px;
   -moz-border-radius:12px;
}

Maintenant le placement des blocs Smile

Pour éviter que le texte ne soit collé à la bordure, on va ajouter du remplissage (= padding), par exemple 4/5 px. ^^

Code:
padding:5px;

Maintenant, on va bosser les largeurs. ^^

1/ Le bloc descriptions prend un peu moins que toute la place, donc on lui donne une largeur de 90%
Code:
div.description{
   width:90%;
   }

2/ Ensuite, on va dire que le bloc "stat" occupe uniquement 50% de la largeur et qu'on le place à 10% du bord droit de la case :
Code:
div.stats{
   width:50%;
   margin-right:10%;
   margin-left:auto;
   }

3/ Et dans ce bloc "stat", on va dire que :
-> les blocs se placent l'un à coté de l'autre et s'alignent au bord droit du bloc stats
Code:
div.stats div{
   float:right;
   }
-> chacun des ces 2 blocs représentent 30% de la largeur du bloc "stats"
Code:
div.dernier_msg, div.infos_forum{
   width:30%;
   }




Maintenant, il ne reste plus qu'à travailler le texte et le tour est joué. Voilà le CSS complet :
Code:
div.description, div.dernier_msg, div.infos_forum{
   border: 2px solid #000000;
   color: #000000;
   background-color: #FFFFFF;
   border-radius:12px;
   -webkit-border-radius:12px;
   -moz-border-radius:12px;
   padding:5px;
}

div.description{
   width:90%;
   font-size:12px;
   }
   
div.stats{
   width:50%;
   margin-right:10%;
   margin-left:auto;
   }
   
div.stats div{
   float:right;
   }

div.dernier_msg, div.infos_forum{
   width:30%;
   font-size:10px;
   text-align:center;
   }




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

Corrigé par Morwen.
 

[ForumActif] Un index à 2 colonnes

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» You can return to the index...
» [Ketsuka] Un petit Qeel pour Wild wide
» Afficher les catégories en onglet sur un forumactif
» MAJ ForumActif 05/02/2013
» [PHPBB3] Supprimer les colonnes sujets messages et derniers messages des sous forums

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