Palette

Published : 2 August 2008 – updated on 14 March 2025 – by Daniel FAIVRE, kent1, Maïeul – 99 commentaires

1
2
3
4
5
26 Votes
Permet de choisir des couleurs avec jQuery et tinyColorPicker

Ce plugin facilite la sélection de couleurs dans des formulaires de configuration. Il suffit d’ajouter la classe CSS palette sur les input souhaitant disposer de ce sélecteur.

Ce plugin intègre la librairie tinyColorPicker dans SPIP afin de permettre aisément de sélectionner une couleur sur les formulaires qui en ont le besoin.

Installation et configuration

Ce plugin peut s’installer simplement par l’intermédiaire du gestionnaire de plugins de SPIP. Voir page dédiée.

Vous pouvez configurer ce plugin en cliquant sur sa petite icône de configuration depuis la page de gestion des plugins une fois ce plugin activé.

La configuration permet d’insérer les scripts nécessaires au fonctionnement du plugin dans l’espace privé et/ou dans l’espace public.

Utilisation

À partir du moment où la librairie est insérée dans la page (voir la configuration), tout champ input de formulaire HTML possédant la classe palette aura un sélecteur de couleur associé.

Attention ! Le sélecteur n’apparaîtra que lorsque l’on cherchera a éditer le contenu du champ ; cependant la couleur de fond déjà sélectionnée est visible.

Exemples

Sélecteur de couleur sur un input :

<input class="palette" name="couleur" value="#dfdfdf" />

Sélecteur de couleur avec gestion de la transparence (version 4+)

<input class="palette" name="couleur" 
    value="rgba(100,10,200,.6)" 
    data-palette-withalpha="1"
/>

Utilisation avec Saisies

Si vous avez le plugin Saisies activé, vous pouvez utiliser la vue couleur

[(#SAISIE{couleur, couleur_aside,
		label=<:odaiba:cfg_couleur_aside:>,
		defaut=#ff6600})]

Historique

  • À partir de la version 4, la transparence peut être gérée
  • Avant la version 4 du plugin, la librairie Farbtastic était utilisée.
  • Avant SPIP 3, le plugin CFG permettait la même chose mais la classe à appliquer était “cfg_couleur”. Il suffit de remplacer “cfg_couleur” par “palette”

Discussion

5 years 1 year 3 months Without limit
par date
Filter

38 discussions

  • 1
    Fennec72

    Bonjour,

    J’utilise, jusqu’à présent, couleur d’objet, qu’est-ce palette apporte éventuellement de plus?

    Merci d’avance

    Cordialement,

    Hervé

    • Maïeul

      Palette sert uniquement à construire des interfaces de selectioon de couleur. Rien à voir donc avec couleur d’objet, il ne se situe pas au meme niveau.

    Reply to this message

  • baloo

    bonjour,

    J’utilise SAISIE et Palette 4.0.9 avec SPIP4

    array(
			'saisie' => 'couleur',
			'options' => array(
				'nom' => 'fond_titre',
				'defaut' =>'transparent',
								)
				),

    j’obtiens un carré .
    si je clique dans le carré j’obtiens a la fois la partie saisie des couleurs de palette et un deuxieme formulaire de saisie ( celui de windows ??)
    si je sélectionne une couleur elle s’enregistre bien.
    j’ai 2 questions :
    1- comment faire pour n’avoir que le formulaire de palette ?
    2- Une fois que j’ai choisis une couleur, et enregistré, je dois toujours en choisir une. Je peux la changer mais je ne peux plus choisir de ne pas en avoir.
    Comment supprimer la couleur choisis ? est-ce prévu dans palette ? est-ce que je dois mettre un bouton supprimer et le gérer en javascript ?

    Reply to this message

  • Royer

    Bonjour,
    Avec Saisies, comment peut-on gérer la transparence ?
    Cordialement

    Reply to this message

  • 2
    rsuinux

    Bonjour,

    Je viens d’utiliser votre plugin dans la partie privé de mon site.
    J’ai un formulaire pour le plugin que je construis actuellement, mais j’ai un léger souci:
    je cherche à avoir une largeur complète de la couleur affichée pour la partie du bouton “defaut” mais je n’ai qu’un petit rectangle. J’ai, bien évidemment,n utilisé
    'conteneur_class' => 'pleine_largeur',
    mais c’est toute la zone de la question qui est agrandie!!! et pas la zone en couleur :(
    J’utilise la syntaxe “saisies”:

    array (
'saisie' => 'palette',
'options' => array (
   'conteneur_class' => 'pleine_largeur',
  'non' => 'valeur_variable',
  'label' => 'le label',
 'defaut' => 'la valeur par defaut dont la taille ne change pas à l'affichage'
)
)

    (j’ai recopié à la main, je ne suis pas chez moi)
    j’ai loupé un truc? ou je n’ai pas placé la ’plein_largeur’ au bonne endroit?

    Merci de votre aide.
    Rémi.

    • Maïeul

      Comme son nom l’indique, l’option conteneur_class s’applique au conteneur (qui englobe saisie + label). Donc le comportement est normal.

      C’est juste un problème de css. Il faudrait que tu créé un fichier de style à insérer dans le privé (par exemple via la balise style du paquet.xml) et que tu stylise input.palette

      Coquille dans ton exemple :“non” doit être remplacé par “nom”.

    • rsuinux

      merci pour ta réponse.
      (la coquille, c’est tout simplement que j’ai recopié là la main).

      Je comprends mieux pourquoi ça ne fonctionne pas.

      Je m’y colle donc.

    Reply to this message

  • 1
    gilcot

    Attention, avec SPIP 3.2 j’ai bien le bouton de configuration du plugin, mais la page de configuration na affiche plus de formulaire...

    • gilcot

      Mauvaise lange moi. En fait ça fonctionne très bien ...après avoir téléchargé de nouveau (le zip était corrompu la première fois)

    Reply to this message

  • 1
    graphie

    Bonjour,

    Sous Windows, quand on clique sur le champ couleur : Choisir une nouvelle couleur : (espace privé, au niveau d’un article), on tombe automatiquement sur la palette système Windows et donc aucun accès à l’hexa.

    Existe-t-il une astuce pour indiquer une valeur hexadécimale ?

    ps: sous OSX, la palette système propose de renseigner la valeur en hexa.

    Merci pour votre aide,
    françois

    Reply to this message

  • 3
    HirisBen

    Bonjour,
    Je ne comprends pas comment ça marche . Je l’ai déjà utilisé dans des versions plus anciennes sans problème mais là, après installation et configuration, rien. Pour coloriser du texte au moment de la saisie de l’article, où faut-il ajouter <input class="palette" name="couleur" value="#dfdfdf" /> pour faire apparaître le sélecteur ?
    Si quelqu’un veut bien me renseigner...
    Merci de votre aide...

    • Maïeul

      Palette n’a jamais servi à colorer des textes. C’est un outil qui est appelé par d’autres plugins pour afficher une palette de couleur, qui peut servir à des usages variés en fonction du plugin.

      Donc vous deviez très certainement utiliser un autre plugin pour vos couleurs dans les textes. J’ignore lequel. Il se peut deux choses:
      -  ce plugin a été désactivé
      -  ce plugin utilise palette, mais n’est pas compatible avec la version la plus récente.

    • HirisBen

      Je comprends du coup ! Effectivement, j’utilisais Scolaspip...
      Bon... c’est un peu trop technique pour moi, tant pis pour la couleur !
      Merci beaucoup de votre réponse en tout cas !!

    • Maïeul

      Pourquoi un passé?

      Du reste je ne pense pas que scolas spip lui même gère la couleur dans les articles (s’il s’agit bien de cela), il doit faire appel un à un plugin externe (où vous même en avaient installé un).

      Je dirais de demander directement sur la page de scolaspip.

      Cela étant, les colurs dans les articles sont rarement conseillées.

      A mon avis, c’est du côté du plugin enluminure typographique qu’il faut chercher.

    Reply to this message

  • 4
    Pascal FORTIN

    Bonjour,
    Palette n’est plus opérant depuis le passage à SPIP 3.2.0.
    Ai-je loupé quelque chose ?
    Merci pour les conseils.
    Pascal FORTIN

    • Maïeul

      Quelle version utilisez vous?

    • Pascal FORTIN

      La dernière version de palette (4.0.7 tenue à jour régulièrement les mises à jour automatiques des plugin) et la dernière version de spip (3.2.0).
      Face au dysfonctionnement, la librairie Farbastic a été supprimée.

      pour voir : http://clg-capucins-melun.fr

      Pascal FORTIN

    • Maïeul

      Je ne sais pas, il faudrait que je fasse des tests approfondis… et VRAIMENT pas le temps.

    • Matthieu Marcillaud

      Face au dysfonctionnement, la librairie Farbastic a été supprimée.

      Bah elle n’est plus utilisée de toutes façons depuis la version 4 du plugin !

      Et sinon, en quoi la capture d’écran montre un problème ? Vous parlez vraiment du bon plugin ?

    Reply to this message

  • Matthieu Marcillaud

    La version 4 du plugin Palette, pour SPIP 3.1+ utilise maintenant la librairie tinyColorPicker à la place de Farbtastic.

    Reply to this message

  • 1
    Lexi

    Bonjour spipien,

    Bravo pour ce plugin! Palette se révèle un plugin indispensable dans mon projet de site, notamment pour coloriser des contenus à éditer en ligne.

    Je travaille avec le canvas de html5, et bien entendu des javascripts. Or il apparait qu’au changement de contenu de mon champ input, sous l’action de palette & farbastic, le javascript de mon canvas ne se déclenche pas automatiquement, du moins pas avec le onchange=“fn()” du HTML DOM Events. J’ai réussi à provoquer un déclenchement “automatique” avec le onmousemove=“fn()” , c’est-à-dire lorsque la souris sort de la fenêtre farbastic. C’est fastidieux. J’aurais aimé que le déclenchement (trigger) se fasse au clic dans farbastic, car c’est bien entendu beaucoup plus intuitif pour l’utilisateur.

    J’ai testé beaucoup d’autre Html Dom events, mais sans y parvenir. Y-a-t-il une solution?

    Salutations respectueuses et spipiennes,
    LEXI

    http://caricaturejs.com

    • Lexi

      Après bien des essais infructueux, je m’en suis remis au web color picker jscolor qui a l’avantage de réagir à la volée au “onchange event”. Dès le clic de souris dans son “farbastic”, le code couleur est soumis au script sans devoir passer par un bouton de “submit” pour valider le “input”. C’est rapide et intuitif.

      Exemple

      Donc j’abandonne “Palette”, car malheureusement totalement incompétent pour proposer une amélioration de son js.

      Avec regrets!
      LEXI

    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
  • 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 apparaît.

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