LE PLUGIN PB COULEUR RUBRIQUE
LE PLUGIN PB COULEUR RUBRIQUE
Techniques SPIP

Vous trouverez ici des trucs et astuces destinés aux développeurs de sites sous SPIP.

La majorité de ces trucs est consacrée aux filtres graphiques introduits dans SPIP 1.9. Il y a là en effet un vaste champ d’expérimentation pour les webmestres et les graphistes.

Chaque truc est suivi d’un forum auquel nous vous invitons à participer.

N.B. La présence de ces trucs et astuces sur notre site professionnel est destinée à faire connaître notre activité de création de sites sous SPIP. Vous pouvez librement utiliser les morceaux de code fournis ici dans vos propres squelettes. Vous pouvez reprendre ces exemples sur votre site ou dans les forums d’un autre site ; dans ce cas, nous vous demandons simplement d’avoir la courtoisie de référencer la page d’où est tiré le code repris.

XML
Zip - 23.3 ko
Le plugin Pb Couleur Rubrique

[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 :

  1. [(#ID_RUBRIQUE|pb_couleur_rubrique)]

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 :

  1. [color: #(#ID_RUBRIQUE|pb_couleur_rubrique);]

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 :

  1. <BOUCLE_principale(RUBRIQUES){id_rubrique}>
  2.         <BOUCLE_hier_couleur(HIERARCHIE){id_rubrique}>
  3.                 <BOUCLE_couleur_rubrique(RUBRIQUES){id_rubrique}{doublons gauche}>
  4.                         [(#SET{couleur,[(#ID_RUBRIQUE|pb_couleur_rubrique|sinon{[(#GET{couleur})]})]})]
  5.                 </BOUCLE_couleur_rubrique>
  6.         </BOUCLE_hier_couleur>
  7.         [(#SET{couleur,[(#ID_RUBRIQUE|pb_couleur_rubrique|sinon{[(#GET{couleur})]})]})]
  8.  
  9. Couleur: [(#GET{couleur})]
  10. </BOUCLE_principale>

(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 :

  1. [background-color: #(#GET{couleur});]
  2. [color: #(#GET{couleur}|couleur_extreme|couleur_inverser);]

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.

Juin 2008
Le plugin PB Couleur Rubrique
Fil (fil chez rezo.net)

Autre solution :

[(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_SECTEUR|couleur_rubrique)]})]

Suggestion : permettre (avec un cfg par exemple) de désactiver le sélecteur dans les sous-rubriques.

Juin 2008
Le plugin PB Couleur Rubrique
ARNO* (arno chez rezo.net)

Oui, mais c’est différent de ma boucle : là, tu prends la couleur de la rubrique si elle existe, sinon tu prends celle du secteur. Si tu as une rubrique entre les deux qui contient une couleur, tu ne la voies pas.

L’avantage de ma boucle est de bien parcourir toute la hiérarchie. Même logique que #LOGO_RUBRIQUE.

Pour ce qui est de configurer, oui, mais quand on aura documenté complètement CFG. Là, ça m’épuise rien qu’à l’idée de songer à y penser.

Juin 2008
Le plugin PB Couleur Rubrique
Nicolas Hoizey (nicolas chez hoizey.com)

Joli !

Juste une coquille, ce devrait être « dans la colonne de gauche des pages rubrique » plutôt que « dans la colonne de gauche des pages article », au début de ton article...

Août 2008
Le plugin PB Couleur Rubrique
micheljo (mi.joseph chez laposte.net)

Bonjour, Voila ce qui est affiché à la place du pavé

Fatal error : Call to undefined function : pb_couleur_rubrique() in /mnt/102/sdb/e/f/bookainss/livrels/plugins/couleur_rubrique/pb_couleur_rubrique.php on line 18

Squelette ABC SPIP Je suis un débutant SPIP Merci

Août 2008
Le plugin PB Couleur Rubrique
ARNO* (arno chez rezo.net)

MichelJo, vous avez bien la version 2.0 beta de SPIP ? Le plugin n’est pas compatible 1.9.2.

Août 2008
Le plugin PB Couleur Rubrique
naima (naima_k2007 chez hotmail.fr)

svp je ne sais pas comment activer le plugin ?merci pour m’aider.

Août 2008
Le plugin PB Couleur Rubrique
naima (naima_k2007 chez hotmail.fr)

bon jour tt le monde, je suit debutante en spip j’ai activer maintenant le plugin mais il na fonctionne pas, est ce quelqu’un peut m’expliquer exactement comment je peut ajouter extra aux rubriques ??? merci d’avance.

Novembre 2008
Le plugin PB Couleur Rubrique
Loiseau2nuit (l.oiseau2nuit chez gmail.com)

Hello ARNO*

Super initiative ! Ca faisait un moment que j’y pensais aussi, ma réponse à moi résidait dans des classes CSS ajoutées à la volée sous forme de mots-clés.

Enfin bref, là je bloque sur la syntaxe pour colorer mon body directement dans mon code XHTML. La syntaxe <body class="page_rubrique" [style="background-color: #(#ID_RUBRIQUE|pb_couleur_rubrique);"]> ne me renvoit rien et Firebug n’a pas l’air d’apprécier non plus. lorsque je check le code de la page la seule chose qu’il me ressort c’est style="" et là je vois pas où je pêche... C’est grave Docteur ?

Merci d’avance pour tes retours ;)

Novembre 2008
Le plugin PB Couleur Rubrique
bibi (julfeanor chez msn.com)

salut à tous,

Je vais sans doute poser une question bette mais comment est ce que je peut installer ce plugin ? Je l’ai télécharger mais je n’ai pas trouver de read me ou d’install ???

Merci d’avance ;)

Novembre 2008
Le plugin PB Couleur Rubrique

Il y a une doc à ce sujet sur spip.net. Attention : ce plugin ne fonctionnera qu’avec SPIP 2.0.

Janvier 2009
Le plugin PB Couleur Rubrique
jlj (jlj.champagne chez wanadoo.fr)

Bonsoir,

Je travaille sur SARKA 3.0.0 ; j’ai installé le plugin couleur_rubrique et çà ne fonctionne pas.

J’ai bien une petite boite de dialogue "couleur rubrique" mais pas de roue chromatique.

Je rentre un code couleur et c’est sans effet.

Avez vous une idée ?

MCI

Janvier 2009
Sur des class’s css
nico4peace (nicolas chez cappaix.org)

Bonjour et merci por cet article.

Ma question est la suivante comment récuperer le code couleur pour le coller sur des class’s d’une feuille css ?

Je suis pas un pro donc je ne comprend pas tout mais j’ai compris que ca peut nous donner une grande flexibilité !

d’avance merci pour toutes pistes !

++

Février 2009
Le plugin PB Couleur Rubrique
Le Monolecte (monolecte chez gmail.com)

La soluce de Fil me plaisait plutôt, pour éviter de se prendre le chou et aussi parce que la gestion des couleurs de rubrique doit commencer dans inc_entete pour moi, puisque j’ai besoin que le nom du site, généré par image_type change de couleur selon le secteur. Premier problème : inc_entete étant inclus dans la page qui l’appelle, il faut envoyer id_rubrique dans l’inclure pour que ça marche. <INCLURE{fond=inc-entete} {id_rubrique}  {id_secteur}> Second problème, si la soluce de fil marche pour toutes les rubriques, ça ne marche pas pour l’accueil, qui n’a pas de numéro de rubrique. D’où l’idée finale d’un sinon imbriqué comme suit : [(#NOM_SITE_SPIP|image_typo{police=Diavlo_BLACK_II_37.otf,taille=30,couleur=[(#ID_RUBRIQUE|couleur_rubrique|sinon{[(#ID_SECTEUR|couleur_rubrique|sinon{[(#VAL{0}|couleur_rubrique)]})]})]})]

Au final, un truc qui marche plutôt bien.

Février 2009
[resolu]sur les class’s css
Nico4peace

intégration du style non pas dans la css mais dans les pages du squelette genre

<style type="text/css">body {        [background: #(#ID_RUBRIQUE|pb_couleur_rubrique);]}#container{        [background: #(#ID_RUBRIQUE|pb_couleur_rubrique);]}</style>
Mars 2009
Le plugin PB Couleur Rubrique
salvi (j.salvi chez wanadoo.fr)

Bonjour, J’ai bien installé Couleur rubrique et je peux choisir la couleur voulue. L’enregistrement semble se faire mais la couleur n’est pas modifiée. Malgré plusieurs essais je ne vois pas de solution. J’utilise d’autres plugins simultanément comme enluminures, couteau suisse,cfg. Y a t-il une incompatibilité. J’utise aussi le squelette ahuntsic. Merci pour votre aide

Mars 2009
Couleur Rubrique : g la roue mais pas la couleur... !
amande (amandecrazy chez hotmail.com)

bonjour et merci pour ce blog,

j’ai le mem pb que le precedent internaute ; le changement de couleur ne s’effectue pas, dois je renoncer a ce plugin tro pratique... ?

merci d’avance, amande.

Avril 2009
Le plugin PB Couleur Rubrique
nawel (nawel_isd chez yahoo.fr)

comment installer le pugin de couleur sur mon site spip

Mai 2009
Le plugin PB Couleur Rubrique
Julien (julien_99 chez hotmail.com)

Bonjour et merci por cet article.

Juillet 2009
Couleur Rubrique dans CSS
Clo7 (ac.guellec chez gmail.com)

Bonjour, pour pouvoir récupérer la couleur du secteur dans la feuille de style, faut-il la "squelettiser", comme indiqué sur http://www.guiderdoni.net/Comment-faire-une-feuille-de-style.html ?

J’ai suivi ces étapes, mais cela ne donne rien (il ne va pas chercher la feuille de style), qqun a-t-il une idée ? Merci d’avance.

1) nommer la feuille de style macss.css.html

2) l’appeler dans inc-head.html par :

[<link rel="stylesheet" href="(#CHEMIN{macss.css}|direction_css)" type="text/css" media="projection, screen, tv">]

3) remplir la feuille de style :

#CACHE{3600*100,cache-client}#HTTP_HEADER{Content-Type: text/css; charset=#CHARSET}#HTTP_HEADER{Vary: Accept-Encoding}#menu ul li:hover ul li a {display:block; background-color:#(#ID_SECTEUR|couleur_rubrique)}#menu ul li ul li a:hover {float:none; color:#fff; font-weight:bold; background-color:#(#ID_SECTEUR|couleur_rubrique|foncer)}<BOUCLE_couleur(RUBRIQUES){id_rubrique}{id_secteur}>body {background-color:#(#VAL{0}|couleur_rubrique)}.col0 {width:180px; background-color:#(#VAL{0}|couleur_rubrique)}.col1 {width:180px; background-color:#(#ID_SECTEUR|couleur_rubrique)}</BOUCLE_couleur>
Juillet 2009
Le plugin PB Couleur Rubrique
ARNO* (arno chez rezo.net)

Bonjour Clo7,

Je ne vais pas pouvoir te répondre longuement, je suis à l’aéroport pour prendre l’avion des vacances.

À première vue, je suspecte que c’est l’appel de ta feuille de style depuis ton squelette d’origine qui ne va pas. #CHEMIN se contente d’appeler le fichier source, pas de l’interpréter en tant que squelette.

Essai avec #URL_PAGE à la place, comme c’est décrit dans la page que tu donnes en ligne.

Par ailleurs, il va falloir que tu passes la valeur de ta rubrique dans l’appel du squelette de CSS, sinon celui-ci n’a aucune raison de savoir dans quelle rubrique tu te trouves. Comme je n’utilise pas d’habitude #URL_PAGE, et que je suis pris par le temps, je te laisse chercher de ton côté comment le faire.

il y a 6 mois
Le plugin PB Couleur Rubrique
Johann (johann.vallet chez agglo-niort.fr)

Bonjour Arno (et Clo7)

Voilà je suis exactement dans le même cas de figure, et j’ai pris aussi le même tuto...

Pour faire simple, je fais un SET sur ma racine avec ma page rubrique. Dans laquelle j’ai un URL_PAGE vers ma css en html. (ca va tout le monde suit ? cf tuto)

<B_racinel><BOUCLE_racinel(HIERARCHIE){id_rubrique}><BOUCLE_chartel(MOTS){id_rubrique}{id_groupe=4}>#SET{style, #TITRE}</BOUCLE_chartel>#SET{Sect, #ID_RUBRIQUE}#SET{couleurRub, #ID_RUBRIQUE|couleur_rubrique}</BOUCLE_racinel></B_racinel>#SET{style, 'can'}<//B_racinel>                <!-- css -->[<link href="(#CHEMIN{css/habillage_[(#GET{style})].css})" rel="stylesheet" type="text/css" />]<link rel="stylesheet" href="#URL_PAGE{css/habillage_menugauche.css}" type="text/css" media="projection, screen, tv" />

Ma page html (css) se charge bien, par contre, pas moyen de transmettre avec un GET ou un ENV la valeur de du secteur ou de la rubrique ... du coup dans ma css impossible de récupérer la valeur. Autre chose, les boucles ne donnent rien dans cette page css.html ...

Please help ... :/

PS : pris pour exemple squelette sunny et pas moyen de reproduire l’inclusion ... je désespère ...

Votre message :
Un message, un commentaire ?

(Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)