Que propose OB pour donner un style aux articles ?
- tous les articles portent la classe article (ou extraitArticle s'ils sont résumés) ;
- de plus chacun porte un identifiant indiquant son rang : article1, article2, etc. (ou extraitArticle1, extraitArticle2, etc.) ;
- enfin, une deuxième classe distingue les articles de rang pair (classe article_even ou article_summary_even) des articles de rang impair (classe article_odd ou article_summary_odd)
C'est déjà quelque chose, mais un blogueur souhaitait que la présentation de ses articles dépende de leur catégorie. Malheureusement il n'y a pas de classe pour ça.
Si votre blog est en "Privilège" ou "Premium", mon programme fournit une solution : il ajoute à chaque article une troisième classe indiquant le numéro de sa catégorie. Une application toute simple dans ce blog : je mets une image de fond particulière aux articles des Briques.
Installation
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. Voilà.
Mise en œuvre
Dès lors, chaque article ou résumé sera doté d'une classe supplémentaire categorie-nnnnn, où 'nnnnn' est le numéro de sa catégorie. 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 recevront la classe categorie-aucune.
Le reste est affaire de CSS. Un exemple ? La petite notice expliquant l'installation se trouve dans la rubrique Briques
. Cette rubrique porte le numéro 10643692. Vous avez vu son image de fond (des briques…) ? Vous ne la trouverez que dans les articles de cette rubrique, il a suffi d'une ligne nouvelle dans le CSS :
.article.categorie-10643692 {background-image: url(gnagnagna..../briques.jpg); background-position: right top; background-repeat: no-repeat}
On a déjà vu plus compliqué.
Ne pas oublier
Deux points à garder en mémoire :
- l'attribution des nouvelles classes n'a lieu qu'en fin de chargement de la page. Elle aura donc d'abord son aspect normal, ensuite seulement apparaîtront les changements. Si ça pouvait vous inciter à faire des pages pas trop monstrueuses, qui se chargent vite…
- certains de vos lecteurs naviguent sans JavaScript, par choix ou par obligation, veillez donc à ce que votre blog reste lisible même dans ce cas.
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
- Avril 2012 : prise en compte des articles résumés et des articles non classés, 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