Un lot de fonctions toutes prêtes disponibles (leur liste complète se trouve dans la doc) rend très aisée la création de styles différents en fonction de paramètres tels que la catégorie du billet (ou de la page), tel ou tel tag, etc.

Exemple 1 : un style différent pour les pages d’une catégorie

Modification du fichier category.html

Le fichier html affichant tous les billets d’une catégorie s’appelle category.html. Depuis le thème par défaut, faites-en une copie puis placez-la dans le répertoire du thème que vous utilisez.

La ligne 34 est ainsi rédigée :

<body class="dc-category">

Modifiez-la de la façon suivante :

<body class="dc-category bo-{{tpl:CategoryShortURL}}">

Ce {{tpl:CategoryShortURL}} sera remplacé par le nom « URL-isé » de la catégorie (par exemple DC1-vers-DC2 pour la catégorie DC1 vers DC2), ce nom « URL-isé » figure dans le champ URL de la catégorie lorsque vous cliquez sur le nom de la catégorie après avoir choisi le menu Catégories dans votre espace d’administration. C’est aussi celui qu’on retrouve à la fin de l’URL pointant vers ses pages spécifiques, après /category/.

Note 1 : vous remarquerez au passage que le body possède déjà une class : dc-category, c’est le cas pour tous les fichiers du thème, permettant ainsi d’appliquer des sytles différents selon le contexte.

Note 2 : j’ai choisi de préfixer le nom de la class spécifique par bo- de façon à pouvoir la distinguer si par exemple je choisissais d’affecter également un style spécifique en fonction de la catégorie sur les billets de la home ou d’une autre page.

Modification des CSS

Les pages de chaque catégorie disposent désormais d’une class spécifique bo-Ma-categorie et comme cette class a été placée dans l’élément qui contient tout le reste on peut tout modifier dans la présentation de cette page. Ça se passe bien entendu dans le fichier style.css du thème choisi pour le blog. Quelques exemples :

Modifier la couleur du fond de page

Supposons que notre feuille de style comporte une règle attribuant un fond blanc à la page :

#page {
   background : #fff;
   margin : 0;
   padding : 0;
   width : 800px;
}

Et que l’on souhaite un ravissant rose bonbon pour le fond de la catégorie Ma vie mon œuvre. On écrira alors une règle supplémentaire pour la page contenue dans le body dont la class est "bo-Ma-vie-mon-oeuvre" :

.bo-Ma-vie-mon-oeuvre #page {
   background : #FF6EC7;
}

Note 1 : n’importe quelle propriété aurait pu être changée, le fond n’est qu’un exemple.

Note 2 : bien entendu, ce que vous avez fait pour une catégorie vous pouvez le refaire pour une autre puisque le body est affecté d’une class différente pour chacune d’elles.

Cas particulier

Il se peut que vous ayez déjà déterminé une règle pour les pages des catégories en général, par exemple avec la règle :

#page {
   background : #fff;
   margin : 0;
   padding : 0;
   width : 800px;
}
.dc-category #page {
   background #eee;
}

Ces règles affichent toutes les pages du blog avec un fond blanc, sauf celles des catégories avec un fond gris pâle. Pour donner la priorité à votre règle s’appliquant aux pages de Ma vie mon œuvre, précisez alors :

.dc-category.bo-Ma-vie-mon-oeuvre #page {
   background : #FF6EC7;
}

(Notez que les deux marqueurs de class sont collés .class1.class2)

Exemple 2 : un style différent pour les billets d’un auteur

Modification des fichiers html

Il va falloir dans un premier temps déterminer dans quel contexte on veut que le style différent par auteur soit appliqué et choisir les fichiers html à modifier en conséquence. Pour cet exemple, j’imaginerai que je souhaite appliquer un style différent aux billet de tel ou tel auteur sur la page d’accueil, dans les billets triés par catégories et dans le billet seul.

Je déplace donc vers le répertoire de mon thème une copie des fichiers :

  • home.html
  • category.html
  • post.html

Pour chacun d’eux, je remplace la portion de code :

<div class="post"

Par :

<div class="post po-{{tpl:EntryAuthorID}}"

Encore une fois, je choisis de préfixer le nom de la classe spécifique. Outre que ça réserve la possibilité d’autres class se servant de l’auteur (par exemple si l’on souhaite installer le plugin AuthorMode et styler les pages en fonction de leur auteur), ce préfixe sera aussi une bonne façon de me souvenir que j’ai affecté cette classe au bloc post quand je rouvrirai ma feuille de style dans six mois...

Je conseille vivement d’utiliser {{tpl:AuthorID}} pour spécifier la class plutôt qu’une autre fonction affichant le nom ou le pseudo : AuthorID correspond au login de l’utilisateur, il a peu de chances d’en changer et de plus il ne contient pas d’espace, ce qui nous embêterait bien !

Modification des CSS

Exactement comme on l’a vu plus haut avec les catégories, cette class "po-monlogin" va permettre d’appliquer un style différent par auteur. Par exemple Victor Hugo (dont le login est totor) ne jure que par les polices à empattement alors que vous avez choisi un joli "lucida grande" pour les caractères des billets. Qu’à cela ne tienne, vous ajoutez dans votre feuille de style la règle suivante :

.post.po-totor {
   font-family : Georgia, "Times New Roman", serif;
}

Si vous souhaitez d’autres exemples, parlez dans l’hygiaphone. Mais attention : vous devrez le réaliser sur votre blog et nous montrer le résultat ! ;)

Note : pour « récupérer » la langue d’un billet (sous la forme en / fr / fr-ca / fr-be etc.) la fonction template correspondante est {{tpl:EntryLang}}