'Styler' les articles selon leur catégorie

Que propose OB pour donner un style aux articles ?

1. tous les articles portent la classe article (ou extraitArticle s'ils sont résumés) ;
2. de plus chacun porte un identifiant indiquant son rang : article1, article2, etc. (ou extraitArticle1, extraitArticle2, etc.) ;
3. 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.

1. Cliquez sur le bouton et sauvegardez le fichier sur votre ordinateur.
2. Ensuite stockez ce programme, sans rien y changer, dans l'espace  Mes Documents/Autres fichiers  de votre admin de blog.
3. 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 :

1. 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…
2. 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

Comments

[Sagan33]

"Auprès des femmes, la déraison ne nuit pas : plus qu'une anomalie, ce serait plutôt un trop-plein de vigueur intellectuelle ou même le génie qui dérangeraient".
A se demander si Arthur Schopenhauer ne possédait pas l'art de savoir.
Je n'y avais pas pensé...
Bonne journée électorale Bren,
J'espère que tu ne t'es pas trompé dans les urnes,
Tout le monde sait que c'est Nicolas qui va passer, qui dit le contraire ?:;,!;;ù

[AïmD!]

Aaaalors là ! Chapeau ! :-D Passer de CSS à Schop' avec autant d'aisance, c'est très fort ! Bon dimanche....

[Sagan33]

Je n'avais pas testé avec un background couleur. Tu vois ici : http://www.lemiroirauxessences.fr/article-l-utilisation-des-essences-98099079.html
le background khaki se met en haut et en bas pas dans le corps où il garde le BG snow.
Si je remplace dans le css .article par .contenuArticle le BG khaki n'apparaît plus dutout.
A l'occasion Bren,
Bon appêtit. Merci par avance.

[Aïe mes doigts !]

Logique... Tu donnes à l'article un fond kaki. L'article contient, successivement, un titre, un contenu, un pied d'article. Le titre et le pied sont transparents, on voit donc le kaki à travers.
Le contenu a un fond snow (opaque), il se superpose donc au kaki (et le masque).


Ayant compris ça, deux voies possibles (au moins) selon tes intentions de design :


rendre le contenu transparent pour tous les articles
.contenuArticle {background:transparent}

OU ne le rendre transparent que pour cette categorie
.categorie-11005561 .contenuArticle {background:transparent}



Valà...

[Sagan33]

Bonsoir Bren,
Je reviens pour te dire que tout a parfaitement bien fonctionné, exemple là : http://harmonylegend.over-blog.com/categorie-12343548.html
C'est top ... je suis r a v i e. Pour l'instant je commence par un BG right top pour ne pas gêner la lecture mais ensuite, on peut changer la couleur de la police, petites majuscules etc.
Vu comme c'était clair, j'ai réalisé ton code en 3 mn.
C'est grâce à ce temps que tu passes pour nous aider sur la pratique que vous pouvons faire toutes ces réalisations.
Merci encore et je te souhaite une bonne soirée.

[Sagan33]

Bonjour,
J'ai une catégorie boissons avec des sous-catégories, elle doivent être au nombre d'une quinzaine. Je voudrais que chaque S.gries ait le même BG et police bleue. Mais si je ne trompe pasil faut à
chaque fois remettre la ligne de css avec le numéro de la catégorie. L'idéal serait de mettre les chiffres séparés d'une virgule comme par ex. pour les font mais ça ne fonctionne pas. Mon BG n'est
pas pris en compte. Apparemment, il faut une ligne de css à la fois + les modifs par sous catégorie.
Je ne sais pas si j'ai été bien claire.
Ton blog est une mine inépuisable de renseignements.
Bonne journée à vous grand Maître...

[AïmD !]

Sachant qu'OB n'offre pas (je crois) la possibilité de sous-catégories, j'aimerais d'abord savoir comment tu t'y es prise pour obtenir l'équivalent : jouer sur des noms de catégories, autre
chose...


A part ça, et quelle que soit la technique employée, il est possible de regrouper des catégories (ou tout autre sélecteur) pour ne pas répéter les mêmes propriétés :


.vins_rouges, .vins_blancs {color:black}


équivaut strictement à


.vins_rouges {color:black}
.vins_blancs {color:black}


Cela répond-il à ta question ?

[Sagan33]

C'est vrai, on a vu plus compliqué. Sitôt dit, sitôt fait ! le résultat : http://harmonylegend.over-blog.com - catégories : gourmandises.
Excellent ! je vais le faire juste sur les catégories boissons les plus importantes car comme elles sont nombreuses, ça risque allonger énormément la css. Si on met plusieurs catégories les unes à
la suite des autres, ça ne fonctionne pas.
Merci beaucoup Bren pour cette science partagée.
Bon dimanche ensoleillé.
Geneviève

[AïmD !]

De rien, si je le fais c'est pour que ça serve à quelque chose !


"Allonger énormement le CSS" : tout dépend, en fait, du nombre de modifications liées à la catégorie de l'article.


S'il ne s'agit que de changer l'image de fond, la couleur du texte, l'épaisseur de la bordure... il n'y aura qu'une règle nouvelle par catégorie. 1 ou 25 règles ne changeront pas grand-chose. A
titre indicatif, la petite image (souvent animée) qui apparait en haut à gauche de mes articles dépend d'une telle règle (et aussi d'un bout de JS mais c'est une autre histoire). Je dois donc
avoir 10 ou 12 règles pour choisir cette image, elles ne pèsent rien.


S'il y a une profusion de règles pour chaque nouvelle catégorie (changer la présentation des images, celle des liens, celle de la date... que sais-je) il peut y avoir un effet plus sensible.


Tu dis "Si on met plusieurs catégories les unes à la suite des autres, ça ne fonctionne pas." Qu'est-ce à dire ?

[Boobalechat]

Vouais vouais vouais...ca me rapelle une suggestion que j'avais faite a l'époque..et dont j'aurais pas vraiment utilité maintenant...quoi que...

m'enfin, ca donne envie de gratter dedans quand meme cet article ^^

bon bah vu que j'ai lu ici même qu'il fallait éviter de multiplier les appels de js y'a plus qu'a essayer d'intégrer ca au bouzin sans tout faire péter ...ca devrait m'occuper un moment...

[AïmD !]

* réduction du nombre de js :
Ce n'est pas compliqué, calme-toi ! Il ne s'agit que de remplacer
[script src="prog1.js"][/script][script src="prog2.js"][/script][script src="prog3.js"][/script]

par
[script src="prog_total.js"][/script]

où prog_total n'est que la copie bout à bout des trois programmes, dans l'ordre. Ca ne change rien, en bien ou en mal, au fonctionnement du site, seulement ça n'ouvre qu'un fichier au lieu de
trois.
C'est la même raison qui conduit souvent à regrouper toutes les petites images de fond dans une seule grande qu'on place intelligemment (background-position) aux bons endroits.

[chaton]

ah j'avais mal lu! j'ai tout recopier intégralement : CSS + pied de page ya rien qui se passe ?

[AïmD !]

tu as recopié le script dans "mes documents/autres fichiers" : exact ?
Bon : quelle est l'url de ce fichier ? Toi seule peut le savoir, elle ressemble à

http://ddata.over-blog.com/xxxyyy/0/12/34/56/reclasseArticles.js

(les chiffres dépendent de ton blog, le nom de fichier est ce que tu as choisi)

Il faut *remplacer* URL_du_fichier par la vraie url du fichier - pas écrire 'URL_du_fichier' en toutes lettres dans le bas de page :-) (je le sais, je suis allé voir ton blog !)

Ensuite : le programme ne change rien à l'aspect de ton blog mais il donne une classe supplémentaire à chaque article :  categorie-nnnnn.
Là aussi le numéro de catégorie dépend de ton blog, tu peux le connaître en examinant le module catégories ou bien le lien vers la catégorie de chaque article.
Une fois que tu connais les numéros qui t'intéressent tu peux ajouter des règles dans ton CSS, à ta guise.

[chaton]

bonjour! tres belle bibliothèque que voici!

pour le script je n'ai pas compris par quoi je dois remplacerpour mon blog ? /* Jus de méninges - http://brendufat.over-blog.com/article-24280039.html */
function reclasseArticles()


et est ce que ce script ralenti le chargement mon blog est deja categorie poids lourds! merci et bonne journée :-)

[Aïe mes doigts !]

Merci pour la bibliothèque :-)
Pour la technique voir réponse au comm suivant. Non, ce script ne ralentit pas sensiblement le chargement de la page. Parce que c'est vrai que ton blog est lourd... Et encore, il y a du progrès : à
une époque je n'arrivais pas au bout de la page d'accueil !

[Vanille]

bonjour,
je vais paraitre nulle, mais c'est un français trop soutenu pour moi ton article, donc pour moi excuse moi, mais je ne comprends pas bien les termes employés surtout tout ce qui est informatique aie aie c'est du charabia
i'm sorry!!!

[AïmD !]

Tout le monde a commencé par être nul, donc pas de complexes :)
Seule la première partie (pas le "démontage") est utile pour employer le programme ; cette première partie est, je crois, courte et claire - en tout cas je m'y suis efforcé.
Alors oui, la deuxième partie est plus ardue et technique, mais le moyen de faire autrement ? L'informatique, c'est comme la cuisine ou le bâtiment ou la broderie : il y a des termes techniques,
précis, pour désigner des choses techniques, précises. Si tu débutes je ne peux que te conseiller le tutoriel du site du Zéro (l'adresse est un peu partout, et aussi dans mon article "quelques
sites") tu en ressortiras avec les idées plus claires et les articles de sorcellerie te sembleront plus abordables !

[Flo-Avril]

Ce n'est que moi qui passait voir ce script
"Liège, Belgique" ^^
Amitiés, Flo

[Aïe mes doigts !]

Et est-ce qu'au moins ça t'a plu ? :D