Le concept

L’idée de base est inspirée d’un article publié par ARNO* sur son site Paris-Beyrouth, dans lequel il explique que le système de plugins, introduit par Spip 1.9, c’est bien, mais que trop de plugins, tue le plugin. Si vous voulez éviter de transformer votre site en grosse usine à gaz, parfois mieux vaut reconsidérer ses besoins en fonctionnalités additionnelles, et réfléchir pour chacune d’entre elles, si une solution alternative au plugin n’est pas envisageable (Enfin ca c’est ce qu’il dit, ENTRE AUTRE !)

Pour ma part, il s’agissait de pouvoir gérer plusieurs thèmes graphiques pour ce site, en fonction du secteur où l’on se trouvait. La question s’est bien évidement posée d’installer un des nombreux plugins de gestion de thèmes disponibles sur Spip-contrib afin de créer ces univers graphiques, MAIS l’expérience précédente de telles solutions m’a déjà montré les écueils d’instabilité que cela pouvait engendrer, à plus forte raison sur un site dont la vocation première est de tester toutes les bidouilles du moment parmi celles qui pourraient me servir un jour.

De plus, l’intérêt de Spip étant justement cette séparation qu’il offre nativement, du core et de l’esprit et des templates, je trouvais dommage d’enquiquiner le core avec moultes surcharges et dérivations, pour lui faire faire un job qui finalement ne prendrait qu’une ligne de boucle ou deux bien placées dans un squelette natif.

J’ai donc réfléchis un peu et j’ai finis par trouver un moyen d’adjoindre en 2 clics à un objet Spip (Article, rurbique, sites …) un à plusieurs nouveaux sélecteurs CSS !

Le principe

"Mais Jean Pierre, quelle est donc cette merveilleuse fonctionnalité que vous nous proposez aujourd’hui ?"

Et bien Maryse, sachez que le principe de base est déjà disponible par défaut dans les squelettes de la dist fournie en standard avec SPIP. Je l’ai juste un peu étendu sur la base d’une option découverte dans un autre CMS [1].

Si vous décortiquez un peu vos templates (ou squelettes) html, vous pouvez déjà constater que ceux-ci prévoient une class CSS pour le body de chaque objet : page_sommaire, page_rubrique, page_article, .... Ceci vous permet déjà, dans une certaine mesure de styler selon vos gouts ces pages là et de conditionner l’affichage de certains de leurs éléments à l’écran.

Là, il est question d’aller ENCORE plus loin et de donner aux designers la possibilité de créer jusqu’à autant de class CSS pour leur body, qu’il y a d’articles ou de rubriques publiées dans un site ! Et oui !

Mais Pourquoi Jean-Pierre ?

Mais Maryse, pour pouvoir styler chacun d’entre eux à convenance et conditionner des éléments un peu moins généralistes que ceux présent par défaut dans les squelettes de Spip bien-sûr ! Il se peut que votre site publie à l’occasion des articles qui sortent un peu du cadre, ou bien que vous désiriez étendre un poil les affichages graphiques de vos rubriques. Par exemple, ajouter un bandeau graphique EN PLUS du traditionnel #LOGO_RUBRIQUE de Spip ? Possible ?

Et bien oui ! Alors étudions ensemble…

…La méthode !!!

Le body, l’incontournable grâce à qui tout devient possible !

Lorsqu’il s’agit de façonner une page dans ses grandes lignes, il convient en général de s’attaquer directement à la source de celle-ci. Pour un document XHTML, c’est donc le body, point de départ du document, qui sera l’objet de notre choix.

Le but de cet exercice (si j’ose m’exprimer ainsi) sera d’y ajouter des class CSS persos de manière totalement dynamique en utilisant des mot-clés SPIP à vocation techniques.

Créer les mot-clés

Nous allons commencer par créer un groupe de mot-clés, appelons le "_css_class" [2]

Ajoutons-y maintenant autant de mot-clés que nous souhaitons créer de class (par exemple, une class par secteur, ou une class spécifique à la rédaction d’un article). Attention tout de même à la syntaxe : pas de majuscule, pas d’accent, pas d’espace, juste du alpha-numérique et éventuellement du underscore [3] :

• ma_class_css
• ma_seconde_class_css
• and so on…

Si vous utilisez la "configuration avancée des groupes de mot-clés", cochez les objets (articles, rubriques, sites, …) auxquels vous souhaitez que s’appliquent vos nouvelles class et, conseil d’ami : restreignez leur usage aux seuls administrateurs, ça évitera les "Kwak" [4].

Cochez le "label technqiue" si le plugin qui va bien est activé et hop, le tour est joué !

Voilà, ça, c’est fait ! Je ne vous fais pas de dessin

La boucle

Pour associer la nouvelle class CSS au body de votre objet SPIP, il suffira ensuite d’une simple boucle dans vos squelettes, au niveau du tag <body>.

Exemple pour le squelette rubrique.html

par défaut, le tag body se présente comme suit :

Nous ajoutons donc la boucle comme suit :

• {id_rubrique}

pour récupérer le contexte

• {id_groupe = 11}

correspond à l’idée du groupe de mot "_class_css", remplacez 11 par votre propre numéro de groupe

• {" "}

joue ici le rôle de séparateur entre tous vos mot-clés (oui, cette boucle vous permet si vous le désirez d’ajouter plusieurs class. A vous après de ne pas vous emmêler les pinceaux dans votre feuille de style)

La feuille de style

Bon, je pense que si vous lisez ce topo c’est que vous savez manipuler les feuilles de style mais à tout hasard…

Admettons que vous veniez de créer le mot-clé ma_class_css, et que vous ayez installé la boucle, ensuite il convient naturellement de l’exploiter dans vos feuilles de styles.

Voila, c’est aussi simple que cela

Woaw ! C’est cool ! Mais est-ce que ça marche aussi pour les menus ?

Tout à fait Maryse ! Sur le même principe que celui exposé plus haut, vous pouvez tout à fait adapter cette boucle à un tag <li> afin d’obtenir des listes à puce, dont chaque entrée pourra alors avoir un style bien à elle :

Ce code récupère donc pour chaque entrée li le mot-clé _css_class attribué aux rubriques du site, générant ainsi le HTML suivant, côté navigateur, lors du calcul de la page :

Génial ! J’en veux encore plus !!! Parce que moi j’suis un ouf !!!

Maryse, vous êtes une petite gourmande, vous alors ! Vous passerez sous mon bureau… me voir en fin d’émission s’il vous plait…

Alors soit ! Admettons que vous ayez créé une class de cette manière, et que vous l’ayez attribué à plusieurs objets de SPIP. Or là, vous vous rendez compte que sur les 5 éléments de class .ma_class_css, il vous faille une personnalisation que ne prévoit pas cette class sur un seul de ces éléments.

Là, 2 possibilités :

1. Si vous avez paramétré votre groupe de mot-clés pour que l’on puisse en attribuer plusieurs au même élément, vous créez un nouveau mot clé et le tour est joué.
2. Si à tout hasard, en configurant le groupe de mot-clé, vous avez coché l’option "On ne peut sélectionner qu’un seul mot-clé à la fois dans ce groupe.", alors là ça se complique un peu mais une solution existe. Nous allons créer un id CSS en utilisant le numéro SPIP de l’élément

exemple sur l’article n°500

Prenons le squelette article.html. Afin de fonctionner correctement, le code de chaque squelette Spip est encadré par ce qu’on appelle une boucle principale dont le rôle est de récupérer le contexte environnemental de l’objet (ID de l’article notamment …) :

afin que les éléments qui vont s’afficher sur la page soient cohérents par rapport à l’article demandé.

Là, nous allons donc simplement recoder légèrement le <body> de ce squelette article.html pour exploiter l’ID de l’article affiché.

Au départ, dans le squelette, il se présente donc comme suit :

Ajoutons lui donc un nouveau sélecteur plus ponctuel et qui ne servira pas ailleurs, j’ai nommé l’ID :

Et bien, vous me croirez ou pas, mais ce n’est pas plus compliqué que cela !

Le html généré côté navigateur au calcul de l’article numéro 500 aura alors cette allure :

Et vous voila désormais en medure de créer si vous en avez envie autant de feuille de style que vous avez d’article publié dans Spip !

Conclusion

Vous voila maintenant avec un site stylable au doigt et à l’oeil, et ce, sans avoir installé le moindre plugin !!! Fort, non ?

Bon… bien évidement, plus vous en ajoutez et plus le risque est grand de transformer votre site en usine d’instabilité graphique si vous faites n’importe quoi avec ce que je viens de vous donner. Notament le tuyau sur les ID, c’est bien mais quand vous publiez 10 articles / jour, vous n’allez pas vous amusez à créer systématiquement une feuilles de style pour aller avec, sinon vous allez finir par vous perdre, et abandonnerez votre site avec votre santé mentale.

Mais pour quelques publication de type évènementielle, ça peut toujours servir.

Ensuite, comme je vous le disais, cette contrib ne réinvente pas l’eau chaude. Elle est d’une extrême simplicité et les plus terre-à-terre diront "d’une évidence logique à toute épreuve !!!"
OUI MAIS il fallait y penser !

Et j’ai beau utiliser SPIP depuis plusieurs années, c’est là une affaire de philosophie de son utilisation : issue des petites trouvailles, partagées ça et là par tout un chacun dans la communauté, et qui font que Spip avance depuis tant d’années déjà.

Alors puisse ce morceaux de retour d’expérience vous servir comme il m’a servis et a révolutionné mon utilisation de ce merveilleux outil.

Au revoir Maryse

PS : bien évidement, je ne prétend pas avoir la science infuse et tout feedback sera le bienvenu !!!