Contactez-nous

1

Le plugin PB Couleur Rubrique

20 juin 2008
par ARNO*
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>

Télécharger

(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);]

Télécharger

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.

  • Fil
    Juin 2008

    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.

  • ARNO*
    Juin 2008

    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.

  • Nicolas Hoizey
    Juin 2008

    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...

  • micheljo
    Août 2008

    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

  • ARNO*
    Août 2008

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

  • naima
    Août 2008

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

  • naima
    Août 2008

    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.

  • Loiseau2nuit
    Novembre 2008

    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 ;)

  • bibi
    Novembre 2008

    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

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

  • jlj
    Janvier 2009

    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

  • nico4peace
    Janvier 2009

    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 !

    ++

  • Le Monolecte
    Février 2009

    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.

  • Nico4peace
    Février 2009

    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>
  • salvi
    Mars 2009

    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

  • amande
    Mars 2009

    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.

  • nawel
    Avril 2009

    comment installer le pugin de couleur sur mon site spip

  • Julien
    Mai 2009

    Bonjour et merci por cet article.

  • Clo7
    Juillet 2009

    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>
  • ARNO*
    Juillet 2009

    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.

  • Johann
    Septembre 2009

    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)

    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 ...

  • Loiseau2nuit
    Mars 2010

    Hello ARNO*

    Joli boulot, comme j’avais déjà du te le dire par ailleurs ;)

    Mais voila, ya un truc qui bloque chez moi :

    sous SPIP 2.0.10 avec squelettes ZPIP + le plugin : le tout en dernière version (SVN) à l’heure où j’écris ces lignes, je n’arrive aucunement à récupérer la bonne couleur de rubrique pour colorer mes CSS

    En fait la seule couleur que je ressort est la dernière appelée au cas ou les 2 premières ne répondent pas, à savoir la #VAL{0}

    Pour ce qui est du code, pourtant je ne vois pas du tout ce que j’ai pu oublier :

    Appel de ma CSS :

    Dans ma habillage.css.html :

    écrit juste sous les infos de #CACHE et de #HEADER

    et je ne récupère QUE la couleur générique, quelque soit la page sur laquelle je navigue :-(

    Une idée de là où j’aurais pu merdouiller ?

    Merci par avance pour tes retours ;) Etienne.

  • Loiseau2nuit
    Mars 2010

    Je précise que chacune de mes rubrique possède bien une couleur spécifique et que dans ma CSS je les appelle bien avec [(#GET{couleur}|plus_ou_mois_un_filtre_particulier)]

  • Octobre 2010

    bonjour

    le symptome : il me demande toujours d’installer farbastic

    en spip 2.1.2 [16017] pas moyen d’activer le plugin.

    j’ai mis farbastic en /lib

    j’ai aussi activé palette ... merci

  • softime
    Octobre 2011

    Bonjour

    Je souhaiterais savoir où sont stockées les couleurs de chaque rubrique une fois qu’on les a configurées dans l’Interface SPIP. Dans la base de données ? dans un fichier ? Merci

  • ARNO*
    Octobre 2011

    Dans la base de données (dans spip_meta : mauvaise idée, mais c’est un vieux plugin, et jusqu’à présent ça ne m’a pas posé de gros soucis).

  • pwmandi
    Octobre 2011

    Bonjour

    C’est génial d’avoir cette roue chromatique en plugin ! merci !

    Juste une question : y a-t-il d’après toi moyen de filtrer dans l’espace privé les rubriques sur lesquelles cette fonction pourrait être dispo. (Un peu comme on indique l’id des auteurs-webmestres dans mes_options) ? De manière à n’afficher la roue que dans quelques rubriques choisies ?

    Une piste ?

  • ploufplouf
    Juin 2012

    Bonjour,

    J’ai un petit souci... le plugin semble très intéressant mais je n’arrive pas à mettre en place la sélection de couleur dans ma css. Je voudrais utiliser cette couleur sur des hover... Quelle syntaxe ? Dans quel fichier ? Quelqu’un peut-il m’aider ?

    Merci...

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.