[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 pos­sible : il s’agit de pouvoir indiquer une couleur dif­fé­rente pour chaque rubrique (en général : pour les grands sec­teurs du site).

Jusqu’à présent, je m’en sortais en ajoutant un champ #EXTRA aux rubriques : solution par­fai­tement fonc­tion­nelle, mais pas très amu­sante au niveau de l’interface…

Fonctionnement général

Une fois activé, ce plugin ne demande aucune confi­gu­ration sup­plé­men­taire. Il ajoute sim­plement un pavé sup­plé­men­taire dans la colonne de gauche des pages des rubriques (naviguer) :

La roue chro­ma­tique permet de sélec­tionner direc­tement la couleur. La valeur hexa­dé­cimale de cette couleur apparaît alors dans une case juste en dessous.

On peut modifier la couleur de deux façons :
— visuel­lement, en cliquant et glissant dans la roue chro­ma­tique ; la valeur hexa­dé­cimale est immé­dia­tement reportée dans le champ texte en dessous ;
— en modi­fiant direc­tement la valeur hexa­dé­cimale dans le champ texte (par exemple pour recopier une valeur récu­pérée depuis Pho­toshop ou The Gimp) ; la roue chro­ma­tique change immédiatement.

Une fois la couleur cor­rec­tement sélec­tionnée, il suffit de cliquer « Enre­gistrer ». (Cette fonction n’est pas AJAX : enre­gistrer pro­voque le rechar­gement de la page.)

Utilisation dans les squelettes

Pour récu­pérer la couleur d’une rubrique, il suffit d’indiquer dans le squelette :

On peut uti­liser, évidemment, cette fonction :
— dans les feuilles de style,
— dans les filtres d’images (par exemple colo­riser une image en gris 50% avec image_sepia) et d’images typo­gra­phiques (fixer la couleur de l’image typo).

Il faut bien noter que ce filtre retourne la valeur hexa­dé­cimale sans le dièse qui accom­pagne habi­tuel­lement de telles valeurs. En effet, les filtres d’image, les filtres typo et les filtres de cou­leurs de SPIP fonc­tionnent sans le dièse.

Si l’on veut uti­liser 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 chro­ma­tique 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 sup­primer en cliquant, sous la roue chro­ma­tique, sur « Sup­primer la couleur ».

Si une rubrique n’a pas de couleur, le filtre couleur_rubrique ne retourne rien (chaîne vide). Cela permet d’utiliser toutes les sub­ti­lités habi­tuelles des filtres SPIP : ajouter un filtre |sinon pour indiquer une couleur par défaut, ou jouer avec les éléments condi­tionnels 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 cou­leurs pour les sec­teurs 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 faci­lement avec une boucle :

(Vraiment, j’adore les boucles de SPIP : il y a toujours des bidouilles sym­pa­thiques à trouver pour éviter de coder en PHP.)

Note : en règle générale, lorsqu’on com­mence à jouer avec des cou­leurs, je recom­mande for­tement d’utiliser les variables SPIP avec #GET, cela rend le code beaucoup plus facile à main­tenir. 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 cou­leurs dans SPIP, et tous per­mettent de sélec­tionner plu­sieurs cou­leurs. 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 tech­no­logie 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é­ra­lement la charte de couleur est glo­ba­lement fixe, et une seule couleur change. Ensuite, si j’ai besoin de plus de cou­leurs, je les calcule auto­ma­tiquement à partir de ma couleur de base.

Exemple type : je sou­haite é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 appa­raîtra en blanc ; si la couleur est claire, le texte appa­raîtra en noir.

Versions

1.5 : La fonction pb_couleur_rubrique devient couleur_rubrique. La roue chro­ma­tique est désormais pré­sente à la racine du site, per­mettant de sélec­tionner la « couleur prin­cipale du site », que l’on récupère avec :

1.6 : L’extension jQuery Farb­tastic devient une librairie, de façon à faci­liter le partage avec d’autres plugins. Pour per­mettre l’installation auto­ma­tique, penser à créer un dossier </lib à la racine du site.