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.
- 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 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 :
- de http: jusqu'à la dernière barre de fraction : on trouve le chemin d'accès ;
- de cette barre jusqu'au point : le nom de fichier ;
- 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 :
- 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,
- un mot (toujours présent) indiquant la nature de la page (ici une page de catégorie) ,
- et, pour finir, une
identité
distinguant cette page de sessœ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