[Astuce CSS] Varier les styles selon la catégorie ...
yhugo
Member
Bonsoir à tous ...
Voici une petite astuce que j'utilise assez souvent dans mes projets Web ... Et c'est une technique qui peut s'appliquer aussi à un site Pluxml ...
Il s'agit donc de varier le style de vos thèmes selon la section (catégorie) de la page affichée :
En résumé, nous allons assigner un id à la balise <body> de la page template.php; Et ce id sera simplement le nom URL de votre catégorie que nous appellerons dynamiquement ... de cette façon nous pourrons nous servir de cet attribut dans la feuille de style du thème.
Pourquoi le nom URL ? Tout simplement parce que nous devons absolument éviter les noms de catégorie comportant des accents latin et des espaces. Donc au lieu d'appeler un nom de catégorie tel que : les têtes raides nous ferons plutôt une requête comme : les-tetes-raides ...
Vous me suivez ... ? Une fois que le concept est compris la manipulation est assez simple.
1. Dans votre fichier template.php juste en haut de la balise ouvrante <body> vous allez ajouter la ligne PHP suivante :
Si vous regarder dans votre navigateur Web le code source de l'une de vos pages vous remarquerai que la balise <body> ressemble maintenant à quelque chose comme ceci :
<body id="Viandes-blanches"> ...
"viandes-blanches" étant le nom URL de la catégorie associée à la page courante.
3. Bon rendu ici la manipulation HTML/PHP est terminée; Maintenant il nous suffit d'utiliser les IDs générés à la volée dans notre script CSS (style.css).
En voici un exemple :
Notez que le terme body devant #Bande-dessinee est facultatif ... Et que CSS/xHTML est sensible à la casse; Donc #Bande-dessinee n'est pas la même chose que #bande-Dessinee ...
Bon voilà ... J'espère que ce modeste truc servira à d'autre que moi.
Merci et bonne soirée
Voici une petite astuce que j'utilise assez souvent dans mes projets Web ... Et c'est une technique qui peut s'appliquer aussi à un site Pluxml ...
Il s'agit donc de varier le style de vos thèmes selon la section (catégorie) de la page affichée :
En résumé, nous allons assigner un id à la balise <body> de la page template.php; Et ce id sera simplement le nom URL de votre catégorie que nous appellerons dynamiquement ... de cette façon nous pourrons nous servir de cet attribut dans la feuille de style du thème.
Pourquoi le nom URL ? Tout simplement parce que nous devons absolument éviter les noms de catégorie comportant des accents latin et des espaces. Donc au lieu d'appeler un nom de catégorie tel que : les têtes raides nous ferons plutôt une requête comme : les-tetes-raides ...
Vous me suivez ... ? Une fois que le concept est compris la manipulation est assez simple.
1. Dans votre fichier template.php juste en haut de la balise ouvrante <body> vous allez ajouter la ligne PHP suivante :
<?php $section = $pluxml->uCats[$pluxml->result->f('cat_num')]['url'] ; ?>
<body id="<?php echo $section ;?>">
Si vous regarder dans votre navigateur Web le code source de l'une de vos pages vous remarquerai que la balise <body> ressemble maintenant à quelque chose comme ceci :
<body id="Viandes-blanches"> ...
"viandes-blanches" étant le nom URL de la catégorie associée à la page courante.
3. Bon rendu ici la manipulation HTML/PHP est terminée; Maintenant il nous suffit d'utiliser les IDs générés à la volée dans notre script CSS (style.css).
En voici un exemple :
h2 {font-size:1.3em;margin:15px 0 15px 0;}
body#Bande-dessinee h2 {font-size:50px;margin:555px 0 555px 0;}
Notez que le terme body devant #Bande-dessinee est facultatif ... Et que CSS/xHTML est sensible à la casse; Donc #Bande-dessinee n'est pas la même chose que #bande-Dessinee ...
Bon voilà ... J'espère que ce modeste truc servira à d'autre que moi.
Merci et bonne soirée
Connectez-vous ou Inscrivez-vous pour répondre.
Réponses
à plus,
Gzyg