Forum de Graph, aide Html et Css
 
AccueilAccueil  FAQFAQ  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Partagez | 
 

 Personnaliser les titres de catégorie Bazzart

Aller en bas 
AuteurMessage
Sweet Purple
Admin
avatar

Messages : 131
Date d'inscription : 12/07/2010
Age : 23

MessageSujet: 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éral
Ouvrir 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" Wink 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 Wink

Évidemment, vous pouvez changer comme vous le souhaitez ! Mettre une image, ou que sais-je encore ! Aucune limite Wink

Si il y a un problème, n'hésitez pas Wink

_________________
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://couleurs-en-folies.forumsactifs.net
 
Personnaliser les titres de catégorie Bazzart
Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Couleurs En Folie :: Codage :: Astuce &' Aide :: Templates-
Sauter vers: