Couleur d’Objet

Published : 18 November 2014 – updated on 6 April 2020 – by chankalan – 53 commentaires

1
2
3
4
5
9 Votes

Le plugin Couleur d’Objet permet d’associer une couleur à n’importe quel objet éditorial de SPIP.

Utilisation

Une fois activé comme les autres plugins, la page de configuration propose de choisir sur quel objet vous désirez activer le choix de couleur.

Lorsque ce choix est fait, la page d’un objet sélectionné offre un formulaire pour choisir une couleur (un code hexadécimal) ou la supprimer.
La valeur enregistrée peut être utilisée ensuite dans les squelettes ou une feuille de style dynamique avec la balise #COULEUR au sein d’une boucle.

Exemple dans un squelettes :

<BOUCLE_mot(MOTS){id_mot}>
<h1[ style="background:(#COULEUR);"]>
#TITRE
</h1>
</BOUCLE_mot>


Exemple dans une feuille de style dynamique :
1 - Premièrement déclarer dans la balise head de la page mot :

<link rel="stylesheet" href="/spip.php?page=couleurs" type="text/css" media="screen, projection" />

2 - Deuxièmement modifier le squelette de la page mot :

  <div class="cartouche cartouche#ID_MOT">
      <h1 class="#EDIT{titre}">[(#LOGO_MOT|image_reduire)]#TITRE</h1>
  </div>


3 - Troisièmement créer le fichier squelettes/couleurs.css.html contenant :

[(#REM)<style>/*
	ATTENTION: il faut absolument le charset sinon Firefox croit que
	c'est du text/html !
        Cache à régler selon les cas.
*/]
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
 
 
<BOUCLE_mot(MOTS){tout}>
[.cartouche#ID_MOT h1 { background-color:(#COULEUR); }]
</BOUCLE_mot>

Usage des filtres de couleurs

Il est possible d’utiliser des filtres de couleurs sur la balise #COULEUR, mais il faut bien replacer le ’#’ pour retrouver le code hexadécimal correspondant :

[color:#(#COULEUR|couleur_extreme|couleur_inverser);]

Autres paramètres

Depuis la version 0.4.0 et conjointement avec l’installation du plugin Déclarer le parent, on peut écrire :

  • #COULEUR{parent} pour prendre la couleur du parent de l’objet
  • #COULEUR{parent,recursif} pour prendre la couleur du parent de l’objet, mais récursivement (on remonte les parents juqu’à trouver une couleur)

Ce qui permet par exemple de définir une couleur à un secteur entier, et de l’utiliser dans tous les contenus enfants.

Le fonctionnement a été testé avec les objets éditoriaux standards de SPIP, mais ne fonctionne pas encore dans toutes les situations, notamment avec les évènements.

Nb : le nom des paramètres n’importe pas, il faut juste qu’ils soient présents (#COULEUR{oui,oui} fonctionne aussi par exemple)

Bloquer le changement de couleur

La page de configuration permet de bloquer le choix de couleur pour ne plus les modifier. Il faudra revenir sur la page de configuration pour autoriser à nouveau le changement de couleur.

Palette

Si vous utilisez un navigateur récent il vous proposera automatiquement de définir vos couleurs sur une palette chromatique. Si ce n’est pas le cas, vous pourriez installer le plugin “Palette” pour obtenir un résultat similaire.

Discussion

5 years 1 year 3 months Without limit
par date
Filter

16 discussions

  • Stéphane Santon

    Bonjour,
    J’ai bien noté la fonctionnalité #COULEUR{parent,recursif} qui renvoie directement la couleur selon la hiérarchie.
    Questions :

    1. Le parent est-il toujours de type RUBRIQUES, ou bien le type est-il à déclarer dans le plugin declarerparent ?
    2. Existe-t-il une balise qui renvoie l’ID_RUBRIQUE du parent ou ancêtre qui a reçu une couleur plutôt que la couleur elle-même ? Du style #PARENT_COULEUR{parent,recursif} ?

    Merci

    Reply to this message

  • 3
    Sam Sonnite

    Bonjour,
    Est-ce normal que lorsque l’on crée des répétitions pour un événement, les événements “enfants” n’héritent pas de la couleur de l’événement “parent” ?

    Reply to this message

  • 1
    DD

    Je n’arrive pas du tout à faire fonctionner la méthode avec css dynamique.
    Avec la méthode “manuelle” le critère parent,recursif ne fonctionne pas chez moi pour des évènements dépendant d’un article avec
    [<div class="date evenement#ID_EVENEMENT" [ style="background:(#COULEUR{parent,recursif})"]

    Et puis mes squelettes inclus n’arrivent pas toujours à récupérer l’info des couleurs.

    Dans un squelette evenement.html j’ai
    #INCLURE{fond=inclure/resume/evenement,id_evenement} et j’ai la couleur directe qui va bien où je veux (mais pas la récursive de l’article)

    Le même inclure
    #INCLURE{fond=inclure/resume/evenement,id_evenement} dans un inclure/agenda-liste.html
    ne reprend pas de couleur du tout.

    Je suis larguée.

    • DD

      Je viens de relire cet article et donc ce n’est pas possible avec les événements.

    Reply to this message

  • 5
    RP

    Bonjour
    J’aimerais que la couleur de l’auteur soit la couleur principale. #COULEURparent,recursif ne fonctionne pas dans ce cas. Y a-t-il une solution?
    Merci

    • chankalan

      Bonjour,
      la solution se trouve peut-être dans la manière de rédiger les css ?
      Il faudrait voir comment sont utilisées les couleurs dans la feuille de styles...

    • RP

      Je n’ai jamais été capable de faire une feuille de style dynamique à partir des infos ci-haut
      J’ai mis des <style> ... </style> aux pages de la dist: auteur.html, rubrique.html, article.html, breve.html, mot.html. Dans ceux-ci il y a le code: .w3-panel{ border:solid 0.2em #COULEUR{parent,recursif}!important;} et .w3-btn, .w3-button:hover{padding:8px 16px;background-color:#FFF; border:solid 0.2em #COULEUR{parent,recursif}!important;}

    • chankalan

      Dans une boucle AUTEURS, il ne faut pas utiliser les paramètres {parent,recursif} car un auteur n’est pas contenu dans une rubrique comme un article. Essayez de ne mettre que #COULEUR sans aucun paramètres....

    • RP

      J’ai mis #COULEUR sans paramètre dans la page auteur. Cela fonctionne. Cela fonctionnait aussi avec #COULEUR{parent,recursif}. Ma question est: est-ce que rubrique (niveau racine) peut prendre la couleur de auteur?

    • chankalan

      Bonjour,
      dans la page rubrique, il faut peut-être faire une boucle auteur pour insérer le style et retrouver la couleur de l’auteur... ?

    Reply to this message

  • 7
    RP

    Est-il possible de changer la couleur de l’objet par un #FORMULAIRE directement en espace public?

    • chankalan

      Bonjour,
      ça devrait marcher, il faut utiliser le formulaire du privé comme ici :
      https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/couleur_objet/trunk/inclure/couleur_objet.html?rev=113350
      Il faudra peut-être réglé les autorisations, mais faut déjà essayer comme ça...

    • RP

      J’ai mis

      <div class="ajax">
[(#FORMULAIRE_COULEUR_OBJET{#ENV{objet},#ENV{id_objet},#ENV{couleur_objet}})]
</div>

      Dans un article, avec fullcalendar, je vois bien apparaître le formulaire et je peux changer la couleur mais cela ne fais pas changer la couleur de l’article et le fond de fullcalendar!
      J’ai ré-essayé le formulaire en ajoutant #SELF, en vidant la cache rien ne change puis en ajoutant #ENV{id_article,#ENV{new}}, vider la cache, toujours rien qui change ???

    • chankalan

      Si on est dans la boucle article, peut-être avec

      <div class="ajax">
[(#FORMULAIRE_COULEUR_OBJET{article,#ID_ARTICLE,#COULEUR})]
</div>
    • RP

      Merci! cela fonctionne parfaitement

    • RP

      J’ai mis en espace public des formulaires sur articles, rubriques et auteurs qui fonctionnent très bien, merci. Maintenant j’essaie d’en mettre un sur groupes_mots.
      J’essaie avec[(#FORMULAIRE_COULEUR_OBJETgroupe_mot, #ID_GROUPE, #COULEUR)] et avec [(#FORMULAIRE_COULEUR_OBJETgroupe, #ID_GROUPE, #COULEUR)]. Cela ne fonctionne pas. Si je vais dans le privé, que je mets une couleur, elle s’affiche bien en public. C’est sûrement le formulaire qui ne fonctionne pas. Merci de m’expliquer comment faire?

    • tcharlss

      Essaye avec groupe_mots (avec un s à la fin).

    • RP

      [(#FORMULAIRE_COULEUR_OBJETgroupe_mots,#ID_GROUPE,#COULEUR)] fonctionne. Merci beaucoup!

    Reply to this message

  • 2
    DD

    Bonjour,
    J’ai réussi à colorer mes titres d’articles avec :

    <BOUCLE_art(ARTICLES){tout}>
[.inner#ID_ARTICLE h1 {color:(#COULEUR); }]
</BOUCLE_art>

    Si je tente

    <BOUCLE_art(ARTICLES){tout}>
[.inner#ID_ARTICLE h1 {color:(#COULEUR{parent,recursif}); }]
</BOUCLE_art>

    ça ne fonctionne pas même si j’ai attribué une couleur à la rubrique parente
    (j’ai bien installé le plugin Déclarer le parent 1.3.5 - dev)

    Vive le noir & blanc.

    • tcharlss

      Salut,

      Je ne reproduis pas cette erreur.
      Dans le 2ème exemple l’article n’a pas de couleur, mais la rubrique parente oui, c’est ça ?
      Est-ce que tu as polyhiérarchie ? Si oui, l’article est enfant direct ou indirect ?

    • DD

      Merci de ta réponse. Oui c’est ça l’article est enfant d’un secteur qui lui a une couleur. Je n’ai pas polyhiérarchie.
      Je continue mes tests.

    Reply to this message

  • 5
    cy_altern

    Y’a t’il une raison technique/fonctionnelle qui empêcherait l’attribution de COULEURs aux objets groupe_mots? => en SPIP 3.2 les premiers tests semblent OK pour cet objet...

    Reply to this message

  • RP

    Je suis avec htlm5up_editorial.
    J’ai fait un perso.scss qui fonctionne.
    Est-ce que cela pourrait m’éviter de faire un perso.css.html qui malgré plusieurs tentatives ne fonctionne toujours pas?
    Je voudrais remplacer:
    border-bottom: dotted 10px _palette(accent);
    par
    la couleur de l’auteur ou de l’article ou de l’événement.
    Comment faire?

    Reply to this message

  • 3
    RP

    En 3.2
    Pour tester j’ai mis la couleur en background directement sur le h1 comme proposé plus haut. Cela fonctionne.
    Puis, j’ai suivi minutieusement la marche à suivre donnée plus haut pour un css dynamique.
    Cela ne fonctionne pas.
    J’ai essayé avec    [<link rel="stylesheet" href="(#CSS{css/couleurs.css})" type="text/css" />]
    et
       [<link rel="stylesheet" href="(#CSS{css/couleurs.css.html})" type="text/css" />]
    rien n’y fait

    • chankalan

      En effet, la balise #CSS doit fonctionner avec un autre plugin comme lesscss ou scssphp.
      Donc je reformule correctement dans le texte : -> #feuilledestyle
      Désolé ...

    • RP

      J’ai essayé

      et cela ne fonctionne pas. Avec web developper, je fais afficher les feuilles de style et je ne vois pas couleurs.css.html.
      J’ai mis ce dernier dans squelettes/css

    • chankalan

      C’est qu’il faut le mettre dans le dossier squelettes/ tout simplement...

    Reply to this message

  • 1
    Yohooo

    Petite remarque :

    Sur Windows (mais peut-êtrre est-ce le cas sur d’autres systèmes ?), c’est la boite de dialogue de l’OS qui s’ouvre, et celle-ci ne permet pas d’insérer un code hexadécimal.

    Voila pourquoi je préfère créer un champ extra nommé couleur associé au plugin palette plutôt que d’utiliser ce plugin.

    Si le formulaire permettait d’entrer directement un code hexa, il gagnerait en ergonomie.

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom