[Astuce CSS] Varier les styles selon la catégorie ...

yhugoyhugo Member
février 2008 modifié dans Entraide et S.A.T
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 :
<?php $section = $pluxml->uCats[$pluxml->result->f('cat_num')]['url'] ; ?>
2. Ensuite dans la balise <body> mettez l'attribut ID avec la variable $section que nous avons déclaré à la première étape (L'expression echo permet d'afficher la variable $section):
<body id="<?php echo $section ;?>">
Bien sûr j'aurais pû mettre <?php echo $pluxml->uCats[$pluxml->result->f('cat_num')] ; ?> directement dans l'attribut ID de la balise <body> ... Mais bon je trouve que c'est plus clean comme ça; Chacun ses caprices ... :P Et d'un seul coup d'oeil on comprend qui est la variable $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;}
Ainsi les balises <h2> de votre site auront une taille de 1.3em et une marge du haut et du bas de 15px ... Sauf dans les articles de la catégorie Bande-dessinée qui eût auront une taille de 50 px et des marges de 555px.

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. :D

Merci et bonne soirée

Réponses

Connectez-vous ou Inscrivez-vous pour répondre.