Sweet Purple
Admin
Messages : 131
Date d'inscription : 12/07/2010
Age : 29
 | Sujet: Personnaliser les titres de catégorie Bazzart  Jeu 28 Avr - 23:05 | |
| | Personnaliser les titres de catégorie Niveau : Moyen ▬ Aperçu : Ici ▬ Auteur : Alison Bonjour à tous ! Personnaliser les titres de catégorie pour avoir ce que vous voyez en aperçu, ce n'est pas si compliqué ! Allons-y ! D'abord, commençons par les templates... Panneau d'administration > Affichage > Templates > GénéralOuvrir le template index_box et trouver cette partie du code | Code: | <!-- BEGIN tablehead --><table class="forumline" width="100%" 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 --> |
On va extraire la variable correspondant au titre des catégories et la copier juste avant le tableau et centrer, ce qui va donner
| Code: | <!-- BEGIN tablehead --><center>{catrow.tablehead.L_FORUM}</center><table class="forumline" width="100%" 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 --> |
Dans le cas présent, le titre de catégorie sera écrit deux fois. Libre à vous de l'enlever ainsi que les autres titres des colonnes mais nous verrons cela plus tard parce qu'il faut bidouiller d'autre chose pour un résultat optimal donc nous verrons ça dans le tuto que je vais faire juste après pour enlever les colonnes "sujets" et "messages"  Pour l'instant, continuons avec nos titres, ils sont déplacés et centrés, parfait ! Mais comment obtenir ce que nous avons en exemple ? Nous allons encadrer notre variable d'une class que j'ai appelé titrecat.
| Code: | <!-- BEGIN tablehead --><center><div class="titrecat">{catrow.tablehead.L_FORUM}</div></center> |
Maintenant, on enregistre et publie le template. =) Et on passe au CSS.
Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Dans son CSS, on ajoute donc notre class précédemment nommé titrecat. Voici le code a écrire pour obtenir le résultat de l'aperçu.
| Code: | /* TITRE CATEGORIE */
.titrecat {
text-align: center;
padding-top: -15px;
padding-bottom: 15px;
display: block;
width: 80%;
border-top: 10px solid #FACDAE;
border-right: 10px solid #FACDAE;
border-left: 10px solid #FACDAE;
background-color: #FACDAE;
color: #FFF;
-moz-border-radius-topleft: 60px;
-moz-border-radius-topright: 60px;
margin-top: 12px;
height: 30px;
font-weight: bolder;}
/* FIN */ |
Enregistrer et... regarder le résultat
Évidemment, vous pouvez changer comme vous le souhaitez ! Mettre une image, ou que sais-je encore ! Aucune limite
Si il y a un problème, n'hésitez pas
_________________
| |
|
