Une idée venue du forum OB, merci Miawka pour ta patience pendant les essais…
Idée simple : donner un style particulier aux pages du blog qui parlent de cuisine, un autre à celles qui parlent de mécanique auto, etc. . Idée simple en apparence mais qui demande de l'attention : il s'agit des pages plutôt que des articles.
Pour styler les articles selon leur catégorie, j'ai déjà fabriqué quelque chose. Dans ce cas le fond de page (pour prendre cet exemple) n'a rien de spécial. En contrepartie, si plusieurs articles de catégories différentes figurent sur une même page, chacun sera stylé différemment.
Pour styler les pages selon leur nature
(en fait, leur URL) j'ai aussi fabriqué autre chose. Dans ce cas on peut, par exemple, styler les pages de catégorie selon leur catégorie : non seulement leurs articles (qui sont tous de la même catégorie, évidemment !) mais aussi le fond de page, les modules… tout.
Il reste un cas tordu mais pas si rare : si le blog est configuré en un article par page, chaque page index-nn.html (celles qui suivent la page d'accueil) contiendra des articles d'une même catégorie (puisqu'il n'y a qu'un seul article) mais il sera impossible de lui donner un design particulier. Même remarque pour la page de l'article lui-même (avec ou sans ses commentaires). Vous voyez le hic ?
Conclusion : je n'avais pas pensé à tout ! Voilà pourquoi j'ai fabriqué un troisième programme pour répondre à ce besoin précis.
Il donne à la page une classe correspondant à la catégorie de l'article. Dans le cas où vous affichez plusieurs articles par page, cela marche aussi si tous les articles sont de la même catégorie (ou absence de catégorie).
L'installation et l'emploi de ce programme ne sont pas plus compliqués que ceux des deux autres programmes. Prenez seulement le temps de réfléchir à ce dont vous avez exactement besoin pour choisir le programme qui vous convient le mieux. Si vous avez une demande encore plus tordue faites-moi donc signe : ça finira peut-être par un quatrième programme !
Installation
Vérifiez d'abord que, dans la config du blog, vous affichez bien la catégorie de l'article (le petit bout publié dans
). C'est bête je sais, mais…
Si vous n'avez jamais installé de JavaScript chez vous rendez-vous ici pour les détails.
- Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
- Ensuite stockez ce programme, sans rien y changer, dans l'espace
Mes Documents/Autres fichiers
de votre admin de blog. - Enfin, ajoutez une ligne au pied de page du blog :
<script type="text/javascript" src="URL_du_programme"></script>
Remplacez bien sûr URL_du_programme par l'url effective du fichier. Et c'est fini.
Mise en œuvre
Dès lors, le body des pages mono-catégorie
sera doté d'une classe categorie-nnnnn, où 'nnnnn' est le numéro de catégorie du ou des articles figurant sur la page. Pour connaître les numéros de vos catégories, vous pouvez par exemple regarder les URL du module "Catégories". Les articles non classés sont considérés comme de catégorie categorie-aucune.
Et puis ?
Et puis le reste se joue dans le CSS. Admettons que la catégorie cuisine
porte le numéro 123456 et que vous vouliez lui donner une image de fond particulière. Le blog a sans doute déjà une image de fond :
body { background-image:url(fond_general.jpg) } Pour définir l'image nouvelle il suffit de compléter le CSS comme suit :
body { background-image:url(fond_general.jpg) } .categorie-123456 { background-image:url(fond_cuisine.jpg) } Autre exemple : on veut donner une image de fond particulière aux modules. Quelque part dans le(s) fichier(s) CSS on trouve :
.box { background-image:url(module_general.jpg) } Donner une image particulière aux modules des pages cuisine
s'obtient ainsi :
.box { background-image:url(module_general.jpg) } .categorie-123456 .box { background-image:url(fond_cuisine.jpg) } Le principe est donc simple : on reprend ou crée une règle normale
et
- si elle porte sur body on remplace le sélecteur body par .categorie-xyz,
- si elle porte sur autre chose on préfixe le sélecteur avec .categorie-xyz.
Le CSS c'est bien.
Ne pas oublier
Deux points à garder en mémoire :
- l'attribution de la nouvelle classe n'a lieu qu'en fin de chargement. La page aura d'abord son aspect normal, ensuite seulement apparaîtront les changements. Si vos pages demandent dix minutes pour se charger complètement, voilà peut-être une bonne raison de chercher à les alléger…
- certains de vos lecteurs naviguent sans JavaScript, par choix ou par obligation. Ceux-là verront la présentation standard.
Démontage
Le présent article vous fournit le programme et son mode d'emploi. Son article jumeau démonte entièrement le programme si vous voulez comprendre comment il marche (lecture totalement facultative mais espérée intéressante !).
Mises à jour
- Octobre 2008 : 1ère publication
- Mai 2012 : amélioration et simplification du programme, mise à disposition du programme sous forme téléchargeable, report de la
dissection
du programme dans un article séparé.
- Guide de choix
- Styler un article
- Styler un groupe de pages
- Styler les articles par catégorie
- Styler son blog par catégorie
/idata%2F0386897%2FBulles%2Fbulle03_6.jpg)
/idata%2F0386897%2FVisages%2FDiablotines.jpg)
/idata%2F0386897%2FCiels%2FPanoCrepuscule.jpg)
/idata%2F0386897%2Fbatiments%2FPano-Pont-Neuf.jpg)
/idata%2F0386897%2FChlorophylle%2FRideauVigne.jpg)
/idata%2F0386897%2FVitrines-et-boutiques%2Farmures.jpg)