'Styler' les pages de blog selon leur URL

Si vous êtes arrivé ici en suivant un lien qui parlait de billet en page d'accueil, restez ! L'adresse est bonne mais j'ai étendu la technique utilisée. Le billet en page d'accueil n'est plus qu'un cas particulier, il a un article pour lui seul. Si vous ne voyez pas clairement ce qu'est une classe de CSS, je vous conseille de commencer par cet article sur le billet d'accueil. Et revenons au sujet.

---

Comment donner un aspect différent à des pages différentes ? En configuration classique, jouer sur le CSS permet bien sûr de personnaliser la présentation des articles, des commentaires, etc. mais, par exemple, l'image de fond du blog sera toujours la même. En configuration  avancée  d'un blog OB on peut nuancer davantage puisqu'on utilise des CSS différents pour trois sortes de pages du blog : la page d'accueil et ses suites (CSS "accueil"), les  pages  (CSS "pages"), tout le reste du blog (CSS "articles"). C'est un progrès mais quelquefois insuffisant, par exemple :

• rien ne distingue la "vraie" page d'accueil du blog de ses pages de suite (les n-index.html),
• rien n'est prévu pour la liste complète des articles,
• ni pour les archives, d'ailleurs,
• sans parler des CGU…

Bref, il manque toujours l'onglet particulier de CSS qui vous rendrait tellement service.

Le programme JS présenté ici pallie cette lacune (niveau Privilège ou Premium). Il ne crée pas de nouveaux onglets dans l'administration (faut pas rêver !) mais vous donne le moyen de traiter différemment, par des classes CSS, les pages qui vous intéressent.

---

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 début de l' en-tête (oui, ça change) du blog :

    <div><script type="text/javascript" src="URL_du_programme"></script></div> 

Remplacez bien sûr URL_du_programme par l'url effective du fichier. C'est tout.

Principe

Le programme attribue au body de chaque page du blog plusieurs classes déduites de l'URL de la page. Ces classes permettent de savoir si l'on est sur une page de catégorie plutôt que d'archive, sur une page de telle catégorie plutôt que de telle autre, sur la page numéro 1, 2, 3 ou autre. On peut dès lors, par le biais du CSS, styler chaque page comme on l'entend. Il y aura des exemples mais lisez d'abord la section suivante.

Les URL OverBlog

Prenons l'exemple d'une page de catégorie :

Trois parties dans cette URL, lue de gauche à droite :

1. de http: jusqu'à la dernière barre de fraction : on trouve le chemin d'accès ;
2. de cette barre jusqu'au point : le nom de fichier ;
3. du point jusqu'à la fin : le suffixe indiquant à quel type de fichier on a affaire – ici, évidemment, du langage HTML

Cette structure est très générale. Le chemin d'accès (tout ce qui se trouve avant le dernier slash) est à peu près toujours le même, c'est l'URL du blog. Le suffixe aussi est toujours le même : .html.

C'est le nom de fichier qui identifie la page, lui seul nous intéresse pour la suite. Il est formé d'un ou plusieurs  mots  séparés par des tirets :

1. un numéro d'ordre (pas toujours, considéré comme zéro s'il est absent), la numérotation commence à zéro et non un,
2. un mot (toujours présent) indiquant la nature de la page (ici une page de catégorie) ,
3. et, pour finir, une  identité  distinguant cette page de ses  sœurs  de même nature :
   • numéro de catégorie (ici 842083),
   • ou date d'archive pour une page d'archive,
   • ou (depuis octobre 2009 : titre et) numéro de l'article pour un article,
   • etc.

Si vous voulez, circulez dans votre propre blog et regardez ce que devient l'URL affichée dans la barre d'adresse du navigateur. L'exercice est simple et très instructif.

Premier exemple

Avec mon programme, le body de la page utilisée comme exemple recevra trois classes :

• pg_categorie indique qu'il s'agit d'une page de catégorie,
• pgid_842083 indique qu'il s'agit de la catégorie 842083,
• pgnum_33 indique qu'il s'agit de la page numéro 33 dans cette catégorie.

Et qu'est-ce qu'on peut en faire ? Voici un bout de CSS :

 .pg_categorie #footer {display:none} /* pas de pied de page sur toutes les pages de catégorie ... */ .pg_categorie.pgnum_0 #footer {display:block} /* ... sauf pour la 1ère page de la catégorie */ .pg_categorie.pgid_842083 .titreArticle {font-size:120%} /* de plus gros titres pour la catégorie 842083 */ 

Je ne dis pas que c'est un CSS réaliste ou utile ! Je dis seulement qu'il marche : la page prise en exemple n'aura pas de pied de page (car c'est une page de catégorie et pas la première) mais de gros titres d'articles (car c'est la catégorie 842083).

Toutes les classes possibles

Voici toutes les classes CSS que vous pouvez vous attendre à employer (si et seulement si vous en avez besoin) :

Nature de la page	Classe correspondante	dans pgid_XY, XY est…	dans pgsubid_ABC, ABC est…	dans pgnum_NN, NN est…	CSS concerné si configuration avancée
Accueil	pg_index	non défini, pas de classe	non défini, pas de classe	le numéro d'ordre de la page	Accueil
Page	pg_page	le numéro de la page	le titre de la page, s'il figure dans l'URL	0 (aucun intérêt)	Pages
Article seul	pg_article	le numéro de l'article	le titre de l'article, s'il figure dans l'URL	0 (aucun intérêt)	Articles
Article et ses commentaires	pg_comments	le numéro de l'article	le titre de l'article, s'il figure dans l'URL	le numéro d'ordre de la page	Articles
Catégorie	pg_catégorie	le numéro de la catégorie	non défini, pas de classe	le numéro d'ordre de la page	Articles
Archives	pg_archive	la date de l'archive	non défini, pas de classe	le numéro d'ordre de la page	Articles
Liste complète	pg_articles	pgid_blog (aucun intérêt)	non défini, pas de classe	le numéro d'ordre de la page	Articles
Articles les plus commentés	pg_top	pgid_articles (aucun intérêt)	non défini, pas de classe	le numéro d'ordre de la page	Articles
C.G.U	pg_reglement	pgid_blog (aucun intérêt)	non défini, pas de classe	0 (aucun intérêt)	Articles

Précision  : le numéro d'ordre est le numéro d'ordre du premier article affiché sur la page. Il dépend donc du nombre d'articles par page : si le blog est configuré en trois articles par page, les 'filenames' successifs de la catégorie 84203 seront 0-categorie-842083 (même page que categorie-84203), 3-categorie-84203, 6-categorie-84203 etc. .

Utilisation – quelques exemples

Ces classes, comme annoncé plus haut, permettent d'écrire des sélecteurs CSS propres à une page ou une famille de pages particulières, donc d'en ajuster la présentation à sa guise. Exemples :

un fond spécial pour toutes les pages "categorie"

Réponse : .pg_categorie {background: .....} (dans le CSS articles si configuration avancée)

un fond spécial pour toutes les pages d'une seule "categorie"

Réponse : .pg_categorie.pgid_1234 {background: .....} (dans le CSS articles si configuration avancée)

un fond spécial pour une certaine OB-page

Réponse : .pg_page.pgid_1234 {background: .....} (dans le CSS pages si configuration avancée)

supprimer tous les modules de la page des CGU

Réponse : .pg_reglement .box {display:none} (dans le CSS articles si configuration avancée)

ne montrer l'article d'accueil que sur la page d'accueil

Réponse :

 .pg_index #articleAccueil {display:none} /* cache l'article sur toutes les pages d'accueil... */ .pg_index.pgnum_0 #articleAccueil {display:block} /* ... sauf sur la première, la "vraie" */ 

(dans le CSS accueil si configuration avancée)(voir aussi l'article "Un billet en page d'accueil").

Synthèse : les classes de la première colonne du tableau vous permettent de faire un CSS propre à chaque genre de page.  Tout se passe comme si  vous aviez un onglet de CSS pour chaque page, et même davantage en utilisant les classes des autres colonnes : un onglet de CSS pour chaque catégorie, chaque article, chaque page…

---

Merci à Orties qui s'est prêtée aux essais cliniques.

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.
• Octobre 2009 : programme et article mis à jour pour tenir compte des nouvelles URL d'articles publiés depuis octobre 2009 (titre d'article inclus dans l'URL).
• Avril 2012 : clarification de l'article, 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]

Vouais c'est très juste... mais chacun son rôle,
Me, c'est pas écrit pigiste sur mon front (rire)... vous saurez parfaitement le faire vous-même, cher Maître, lors d'un de vos prochains et brillantissime article, comme vous nous avez habitué.
Bien cordialement.
Bonnes Pâques.
Encore merci pour l'aide,
au fil du temps, les données reçues se concrétisent.

[Bren du fat !]

Hum... bon, j'ai rien dit ! Juste content que tout ceci aboutisse à quelque chose :-)

[Sagan33]

Bonsoir Bren,
Je te donne le lien d'un article qui pourrait t'intéresser.
http://harmonylegend.over-blog.com/article-un-super-blog-102771751.html
Bonne lecture !
Bien cordialement.

[Bren du fat !]

Pardon de répondre aussi tard.


J'ai lu, c'est plus que gentil ! M'enfin, ne pas oublier que ce blog ne parle pas que de cuisine de blog... :-)

[Sagan33]

Tu savais bien que je reviendrai,

juste pour te dire qu'encore une fois tout est ok.

Juste sur les pages ça ne marche pas. J'ai tout essayé avec pg, j'ai mis pages, essayé avec catégories etc. mais ça m'enlève les modules d'en-tête (2 xdhtml


/*article accueil je le cache sur les pages suivantes */

#accueil {display:none;}
.pg_pages.pgnum_0 #accueil {display:block;}

#entete {display:none;}
.pg_pages.pgnum_0 #entete {display:block;}

à l'ouverture de la partie pages.

Comme pour l'accueil etles articles, il faudrait qu'ils soient à l'ouverture mais effacé quand on ouvre une catégorie de page.

http://www.lemiroirauxessences.fr/pages/Liste_de_la_categorie_des_pages_publiees--5873962.html

Pages doit être à part car on ne peut pas poster de commentaires,

Ce n'est pas très important vu que tout le reste est parfait (enfin pour moi !!!!!)
A bientôt Bren,
bon appêtit

[Sagan33]

ça y est Bren, j'y suis arrivée avec tes dernières indications... !

La partie de mes articles conserve son en-tête à l'ouverture sur la liste complète ensuite quand on clique pour lire un article, il remonte tout en haut. Exactement ce que je voulais.
Selon ta méthode : j'ai vue l'url, remplacé dans css articles index par articles, rajouté un margin-top pour la place de la vidéo.
Super...
Il me reste à voir cette vidéo qui n'en veut rien savoir et reste invariablement sur la gauche malgré mes désespérés, mais on va bien avoir raison d'elle....
Très très bonne journée Bren,
Mais ne te réjouis pas trop, je reviendrai encore t'ennuyer *:,;,;!,;,;ù*
Merci pour tout.

[Sagan33]

Tu es adorable,
bonne soirée à toi aussi,
merci pour tout ce temps que tu as consacré à chercher des solutions,
Je te tiens au courant des résultats.
A bientôt.

[Sagan33]

alors suis pas arrivée ! j'ai plus le haut du message de bienvenue de mes articles

je ne sais ce qu'il faut mettre pour remplacer index dans le css articles ; article ou categorie ou listarticle, rien ne marche,
Alors j'ai remis la petite ligne avant .pg_index comme ça ça a tout enlevé et je revois le haut du message de bienvenue des articles. Mais j'aimerais bien l'ôter sur les articles mais j'veux bien
mais j'peux point.....................
Byyyye

[AïmD !]

Regarde l'url de la page que tu veux cuisiner. Néglige le nombre par lequel elle commence, s'il y en a un. Regarde le 'mot' qui suit cet éventuel nombre : c'est ça la classe qu'il te faut


archive  : .pg_archive


article : .pg_article


articles-blog : .pg_articles


(d'ailleurs je ferai bien d'inclure un petit tableau dans l'article)


Donne donc l'url d'une page à problème, dis ce que tu n'arrives pas à obtenir, et on avisera.


Bonne soirée !

[Sagan33]

ça m'en ouvre... que c'est compliqué Maître;;; je vais revenir

[AïmD !]

C'est pas compliqué, c'est riche en possibilités ! :-D

[Sagan33]

Le problème est revenu sur l'autre blog http://harmonylegend.over-blog.com soit qu'en fait je n'ai plus dutout de message d'accueil sur la partie articles, à l'ouverture de la liste complète. Il
faudrait que le message d'accueil soit occulté à l'ouverture de l'article issu de la liste mais pas à l'ouverture de la 2ème partie du blog, le css articles.
Par contre aucun problème n'est sur la partie accueil. Message d'accueil à l'ouverture, effacé ensuite à l'ouverture de la pagination.
Le problème vient certainement du fait qu'il a 2 css, même 3 avec les pages.
La formule ne cible peut-être que l'accueil c'est pour cela que ça ne marche pas pour le css articles.
A ++ Bren,

[AïmD !]

Réponse aux 2 comms  et conseils simples déduits de l'emploi d'une configuration avancée :


- d'abord le script doit figurer dans *tous* les en-têtes :-) Sur le miroir aux essences je ne l'ai pas vu dans l'affichage d'un article


- ensuite il faut mettre dans chaque CSS des règles pertinentes :


le CSS accueil ne s'applique qu'aux pages 'accueil', donc seulement des pages qui auront la classe pg_index

le CSS pages ne concernent que les OB-pages, donc seulement la classe pg_page

le CSS article couvre tout le reste du blog, donc toutes les classes pg_truc sauf pg_index et pg_page.



Donc dans ton CSS d'article il y aura des règles en .pg_article ou pg_categorie mais sûrement pas en .pg_index. Ca t'ouvre des horizons ?

[Sagan33]

Par contre sur mon autre blog, http://www.lemiroirauxessences.fr, je n'arrive à rien.
Ce que je veux faire c'est dans ma partie articles, quand on arrive sur la liste d'articles, j'ai mis 2 messages d'accueil. Mais dès qu'on ouvre un article de la liste, je voudrais qu'ils
disparaissent comme ils le font sur l'autre blog mais que ces 2 messages restent bien en accueil de la liste complète des articles(mise en carrés modules résumés). Je n'ai pas eu de problème sur
l'autre blog. Mais sur ce blog, si je mets les lignes
#msgBienvenue {display:none}
.pg_index.pgnum_0 #msgBienvenue {display:block}

ça m'enlève les 2 messages d'accueil à l'arrivée sur la partie css articles avec la liste complète et ensuite sur chaque article ouvert. En fait ma partie articles n'a plus d'accueil du tout.

Et si je mets les lignes css dans la css accueil, rien ne bouge mais c'est secondaire.Surtout ce que je voudrais c'est que la lecture des articles (à l'ouverture juste de l'article) soit très haute
sans rien au-dessus. Mais sur ce blog rien ne marche.
Tous mes articles sont en résumés, peut-être est-ce la raison.
Bonne fin d'après-midi Bren.

[Sagan33]

En fait, ne te penche pas sur ce que je viens d'écrire, bizarre, maintenant ça le fait plus. Soit liste articles avec le message de bienvenue, occulté après l'ouverture des articles.
Cela vient peut être de mon fond d'image assez lourd qui ne s'affiche pas.
Tout est ok Bren, oublie les message précédent,
en fait tout est parfait.
C o m m e D' h a b.

[AïmD !]

J'ai pas tout compris mais j'ai une question : le message de bienvenue se trouve sans doute dans l'en-tête du blog ? Si oui, il y a une astuce pour éviter qu'il s'affiche avant de se refermer.


D'abord pourquoi s'affiche-t-il avant de se refermer ? Parce que l'éditeur OB déplace d'autorité les éléments à la fin du module d'en-tête du blog (ou de n'importe quel module
texte libre où l'on inclut un script). De ce fait le script ne s'exécute qu'après le passage du message de bienvenue, et n'ajoute donc la classe 'effaçante' qu'après l'affichage du message.


Parade pour empêcher la descente du script : le mettre dans un div pour lui tout seul. C'est-à-dire ajouter au tout début de l'en-tête





au lieu de





Et ton message de bienvenue devrait se tenir tranquille.