Partagez | 
 

 [ForumActif] Encadrer les catégories

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

Miettes

Doyenne

Bons Points (BP) : 154
MessageSujet: [ForumActif] Encadrer les catégories   Ven 20 Avr - 16:06
Bonjour à tous Smile

Dans ce tutoriel, nous allons apprendre à faire ceci
Spoiler:
 

Idea Pré-requis :
  • Avoir accès aux templates du forum (forum en phpbb2),
  • Avoir quelques connaissances en HTML, concernant les tableaux & CSS,
  • Avoir les images nécessaires (haut et bas au minimum).


On y va.

Idea Avant toutes modifications, sauvegardez votre template actuel.
Arrow Pour ce tutoriel, je pars du template par défaut de FA (donc sans modification).

Tout va se jouer dans le template index_box.

Les images de base



En ce qui me concerne, j'ai 3 images :
-> l'image du haut
Spoiler:
 
-> l'image du milieu
Spoiler:
 
-> l'image du bas
Spoiler:
 

La modification du template



Pour commencer, on va s'occuper de template. On va juste modifier la structure Smile Toute la partie "habillage" sera travaillée dans le css dans le point suivant Wink

Ajouter une image en haut de la catégorie


Ici, une seule petite manip' à faire Smile On va tout simplement ajouter ceci :
Code:
<table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table>
juste après
Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->

Spoiler:
 

La largeur de la catégorie


On va devoir fixer la largueur de la catégorie afin que nos images collent parfaitement. Pour cela, on va remplacer ça
Code:
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
par ceci
Code:
<table class="forumline" width="Lpx" align="center" border="0" cellspacing="1" cellpadding="0">
En remplaçant L par la largeur de votre catégorie (par exemple, pour moi, j'ai un petit espace entre le bord de mon image et mon tableau. J'ai donc diminué la largeur)
Spoiler:
 

Ajouter une image de fond pour la catégorie


Ici, on va tout simplement mettre la catégorie dans un bloc (div). C'est sur ce bloc qu'on appliquera le style contenant notre image de fond Smile On va donc ajouter
Code:
<div class="milieu_cate">
juste avant
Code:
<table class="forumline"

et on va refermer ce bloc
Code:
</div>
juste avant
Code:
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

On va aussi devoir ajouter des noms de class à chaque td afin de supprimer la couleur de fond de ceux-ci. Pour cela, on va ajouter dans chaque
Code:
td class="{blablabla}"
ceci index_cate. Ce qui donnera
Code:
td class="{blablabla} index_cate"
Spoiler:
 
Il faut le faire pour tous les td se trouvant dans le tableau du bloc "milieu_cate"

Ajouter une image en bas de la catégorie


Ici, même principe que lorsqu'on a ajouté l'image du haut Smile On va tout simplement ajouter
Code:
<table class="bas_cate"><tr valign="center"><td> </td></tr></table>
juste avant
Code:
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->
Spoiler:
 


Au final, voilà à quoi devrait ressembler le template
Code:
<table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
   <tr>
      <td valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall">{LAST_VISIT_DATE}<br />
         {CURRENT_TIME}<br />
         </span>
         <!-- END switch_user_logged_in -->
         <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
      </td>
      <td class="gensmall" align="right" valign="bottom">
         <!-- BEGIN switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
         <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
         <!-- END switch_user_logged_in -->
         <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
      </td>
   </tr>
</table>
<!-- BEGIN catrow --><!-- BEGIN tablehead --><table class="haut_cate"><tr valign="center"><td>{catrow.tablehead.L_FORUM}</td></tr></table><div class="milieu_cate"><table class="forumline" width="685px" align="center" border="0" cellspacing="1" cellpadding="0">
   <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>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT} index_cate" colspan="{catrow.cathead.INC_SPAN}" width="100%">
         <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
               <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
         </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC} index_cate" colspan="3" align="right"> </td>
   </tr>
   <!-- END cathead -->
   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS} index_cate" 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 index_cate" 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 index_cate" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.TOPICS}</span>
      </td>
      <td class="row2 index_cate" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.POSTS}</span>
      </td>
      <td class="row3 over index_cate" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
   <!-- BEGIN catfoot -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.catfoot.inc.INC_CLASS} index_cate" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="spaceRow index_cate" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
   </tr>
   <!-- END catfoot -->
   <!-- BEGIN tablefoot -->
</table></div><table class="bas_cate"><tr valign="center"><td> </td></tr></table><img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

La modification du css



Ahhh la partie la plus fun. On va enfin voir les résultats de notre travail Very Happy

Tout d'abord, pour s'y retrouver dans notre CSS, on va ajouter un commentaire qui va délimiter notre style pour la modification de l'affichage des catégories (comme ça, si par la suite vous avez beaucoup de CSS, vous vous y retrouverez Smile )

Code:
/*|__________ DEBUT DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/

le css sera ici

/*|__________ FIN DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/

Le haut de la catégorie


Ici, on va devoir faire 2 manip'. La première c'est de centrer le tableau, lui donner une largeur et une image de fond qui ne se répétera pas.
Code:
table.haut_cate{
   width:Lpx;
   height:Hpx;
   background-image:url('image');
   background-repeat:no-repeat;
   margin:auto;
   }
Idea N'oubliez pas de remplacer L par la largeur de votre image, H par la hauteur de l'image et image par le lien de l'image.
Spoiler:
 

Ensuite, on va devoir placer comme il faut le titre de la catégorie et, travailler un peu sa mise en page Smile Pour cela, on va lui donner une largeur, et ensuite le décaler vers la gauche ou la droite pour le placer comme il faut.
Par exemple, sur mon image, j'ai un truc à gauche, je vais donc décaller mon texte du bord gauche de l'image (margin-left). Comme je lui donne une largeur de 600px, je lui dis de calculer automatiquement à combien de px il doit se décaller du bord droit.
Il ne me reste plus qu'à travailler un peu la mise en page Smile
Spoiler:
 

Le milieu de la catégorie


Pour cette partie du css, ça va aller très vite. On va tout simplement centrer notre bloc, lui donner une largeur et préciser que l'image ne se répetera que sur la verticale.

Code:
div.milieu_cate{
   background-image:url('image');
   background-repeat:repeat-y;
   width:Lpx;
   margin:auto;
   }

Idea N'oubliez pas de remplacer L par la largeur de votre image et image par le lien de l'image.

On va aussi prendre 10 secondes (oui, seulement 10) pour supprimer la couleur de fond du tableau de catégorie
Code:
table.forumline{
  background-color:transparent !important;
  border:0!important;
  }

et même chose pour les cases (vous vous souvenez, celles que nous avions appelées "index_cate")
Code:
 
table.forumline td.index_cate{ 
  background-color:transparent !important;
   }

Pour cette partie, votre css doit ressembler à ça
Spoiler:
 


Le bas de la catégorie


Même principe que pour l'image du haut Smile On va juste donner à notre tableau : une largeur, une hauteur, une image de fond et on va le centrer dans la page
Code:
table.bas_cate{
   width:Lpx;
   height:Hpx;
   background-image:url('image');
   background-repeat:no-repeat;
   margin:auto;
   }

Idea N'oubliez pas de remplacer L par la largeur de votre image, H par la hauteur de l'image et image par le lien de l'image.
Spoiler:
 


Au final, voilà à quoi devrait ressembler votre CSS
Code:
/*|__________ DEBUT DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/

table.haut_cate{
   width:708px;
   height:136px;
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/cate_haut.png');
   background-repeat:no-repeat;
   margin:auto;
   }
   
table.haut_cate h2{
   width:600px;
   margin-left:95px;
   margin-right:auto;
   font-variant:small-caps;
   font-size:14px;
   color:#fff;
   text-shadow: 1px 1px 2px #8f8175;
   }
   
div.milieu_cate{
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/cate_milieu.png');
   background-repeat:repeat-y;
   width:708px;
   margin:auto;
   }
   
table.forumline{
  background-color:transparent !important;
  border:0!important;
  }
 
table.forumline td.index_cate{ 
  background-color:transparent !important;
  border-bottom:1px solid grey;
   }
   
table.bas_cate{
   width:708px;
   height:66px;
   background-image:url('http://i912.photobucket.com/albums/ac325/Miettes_SoP/Tutos/cate_bas.png');
   background-repeat:no-repeat;
   margin:auto;
   }
   
/*|__________ FIN DES MODIFICATIONS DE L'AFFICHAGE DES CATEGORIES __________*/




Congratulations ! C'est terminé Very Happy

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

[ForumActif] Encadrer les catégories

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» [Nocturne] Demande: les catégories
» [Annulée] Demande de description des catégories.
» ['Christa] Regrouper les catégories en Onglet
» Niveau des catégories...
» [Phantasmagoria] Modification 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