[SPIP 2.0] Ce plugin répond à un besoin extrêmement fréquent (en tout cas pour moi) de la manière la plus simple possible : il s’agit de pouvoir indiquer une couleur différente pour chaque rubrique (en général : pour les grands secteurs du site).
Jusqu’à présent, je m’en sortais en ajoutant un champ #EXTRA aux rubriques : solution parfaitement fonctionnelle, mais pas très amusante au niveau de l’interface...
Fonctionnement général
Une fois activé, ce plugin ne demande aucune configuration supplémentaire. Il ajoute simplement un pavé supplémentaire dans la colonne de gauche des pages des rubriques (naviguer) :
Voici le détail de ce pavé :
La roue chromatique permet de sélectionner directement la couleur. La valeur hexadécimale de cette couleur apparaît alors dans une case juste en dessous.
On peut modifier la couleur de deux façons :
— visuellement, en cliquant et glissant dans la roue chromatique ; la valeur hexadécimale est immédiatement reportée dans le champ texte en dessous ;
— en modifiant directement la valeur hexadécimale dans le champ texte (par exemple pour recopier une valeur récupérée depuis Photoshop ou The Gimp) ; la roue chromatique change immédiatement.
Une fois la couleur correctement sélectionnée, il suffit de cliquer « Enregistrer ». (Cette fonction n’est pas AJAX : enregistrer provoque le rechargement de la page.)
Utilisation dans les squelettes
Pour récupérer la couleur d’une rubrique, il suffit d’indiquer dans le squelette :
On peut utiliser, évidemment, cet fonction :
– dans les feuilles de style,
– dans les filtres d’images (par exemple coloriser une image en gris 50% avec image_sepia) et d’images typographiques (fixer la couleur de l’image typo).
Il faut bien noter que ce filtre retourne la valeur hexadécimale sans le dièse qui accompagne habituellement de telles valeurs. En effet, les filtres d’image, les filtres typo et les filtres de couleurs de SPIP fonctionnent sans le dièse.
Si l’on veut utiliser cette fonction pour régler les CSS, il faut donc penser à ajouter le dièse. Ce qui donne par exemple :
Rubrique sans couleur
Par défaut, une rubrique n’a pas de couleur. Dans ce cas, le pavé de la roue chromatique apparaît plié. Quand une rubrique est dotée d’une couleur, le pavé apparaît déplié.
Une fois qu’on a fixé une couleur à une rubrique, on peut la supprimer en cliquant, sous la roue chromatique, sur « Supprimer la couleur ».
Si une rubrique n’a pas de couleur, le filtre pb_couleur_rubrique ne retourne rien (chaîne vide). Cela permet d’utiliser toutes les subtilités habituelles des filtres SPIP : ajouter un filtre |sinon pour indiquer une couleur par défaut, ou jouer avec les éléments conditionnels des balises.
L’intérêt de cette fonction est, évidemment, de ne pas avoir à fixer une couleur pour toutes les rubriques et sous-rubriques du site. Le cas typique consiste à fixer des couleurs pour les secteurs du site, les sous-rubriques héritant de la couleur du secteur dans lequel elles se trouvent.
Ce plugin ne propose pas de fonction pour qu’une sous-rubrique « hérite » de la couleur d’une rubrique parente. Cependant, cela se réalise facilement avec une boucle :
(Vraiment, j’adore les boucles de SPIP : il y a toujours des bidouilles sympathiques à trouver pour éviter de coder en PHP.)
Note : en règle générale, lorsqu’on commence à jouer avec des couleurs, je recommande fortement d’utiliser les variables SPIP avec #GET, cela rend le code beaucoup plus facile à maintenir. C’est d’ailleurs ce que nous faisons pour les feuilles de style de la dist.
Pourquoi une seule couleur ?
J’ai déjà vu quelques outils pour choisir des couleurs dans SPIP, et tous permettent de sélectionner plusieurs couleurs. Autant dire que j’ai préféré prendre le contre-pied avec ce plugin : ici, on ne peut attribuer qu’une seule couleur à une rubrique.
Pourquoi ?
• D’abord parce que je suis un adepte forcené de la technologie KISS. C’est-à-dire : « Keep it simple, stupid ! ». Je pense que plus une fonction est simple, plus elle sera utile. L’interface doit être évidente.
• Parce que, dans tous les sites sur lesquels je suis intervenu, le besoin est de changer une seule couleur pour chaque rubrique. D’abord par besoin de cohérence : généralement la charte de couleur est globalement fixe, et une seule couleur change. Ensuite, si j’ai besoin de plus de couleurs, je les calcule automatiquement à partir de ma couleur de base.
Exemple type : je souhaite écrire du texte dans un pavé dont le fond est la couleur. Inutile de régler la couleur du texte (contraste maximum) à la main, il suffit de faire :
Ainsi, si la couleur du fond est foncée, le texte apparaîtra en blanc ; si la couleur est claire, le texte apparaîtra en noir.
