Gantry 5 inclut un nouveau Sélecteur de couleurs Qui vous donne la possibilité de définir des couleurs pour un élément particulier de votre thème, une particule, etc.

Le sélecteur de couleur comprend cinq outils intégrés dont teinte, saturation, luminosité, opacité, et une palette de couleurs. Ces paramètres facilitent la configuration rapide de votre sélection de couleurs pour répondre à vos besoins.

Utilisation du sélecteur de couleurs

Le Sélecteur de couleurs de Gantry 5's comprend quatre onglets principaux , chacun avec son propre outil puissant pour vous aider à trouver et affiner la couleur que vous choisissez. Ces onglets sont :

Onglet	Description
HUE	Cet outil vous donne la possibilité de choisir une couleur en fonction de la teinte, à l'aide du curseur arc-en-ciel à droite pour sélectionner une couleur générale et la zone principale d'affiner la sélection.
BRI	L'outil de luminosité, vous donnant la possibilité d'affiner votre sélection de couleur en ajustant sa luminosité à l'aide du curseur de couleur sur la droite. La zone principale sert ici à vous permettre de naviguer rapidement entre les couleurs.
SAT	L'outil Saturation est un moyen rapide et facile d'ajuster la saturation de la couleur. Déplacez le curseur vers le bas pour enlever la couleur, et vers le haut pour ajouter à son niveau de saturation. Comme l'outil Luminosité, la zone principale est utilisée pour sélectionner rapidement entre les couleurs de l'arc en ciel.
WHEEL	Cet outil est une roue des couleurs de base, une méthode préférée de sélection de couleur par beaucoup.

 

En plus de ces outils, vous avez également la possibilité de régler le paramètre d’opacité de la Couleur en utilisant le curseur Transparence située sur la partie droite du sélecteur de couleur. Le bouton Transparent au bas du sélecteur de couleurs vous donne la possibilité de définir instantanément 0% d’opacité tout en conservant la teinte originale si vous choisissez d’y revenir plus tard en faisant glisser le curseur transparence vers le haut.

Ajouter le sélecteur de couleurs à votre Site

Le sélecteur de couleurs est un input (saisie) Gantry 5. Si vous souhaitez l’ajouter à votre template ou particule, vous le ferez en assignant la saisie en tant que input.colorpicker dans le fichier YAML associé.

Voici un exemple de la façon dont cela se présente dans le fichier YAML d'une section d'un thème. Dans cet exemple, feature.yaml est situé dans theme/blueprints/styles/.

name: Feature Colors
description: Feature colors for the Hydrogen theme
type: section

form:
  fields:

    background:
      type: input.colorpicker
      label: Background
      default: "#ffffff"
    text-color:
      type: input.colorpicker
      label: Text
      default: "#666666"
 

Cet exemple accomplit deux choses. Tout d'abord, il crée la section Feature dans le panneau d'administration Gantry Styles , ainsi que les réglages de couleur de Background et Text pour que vous puissiez facilement configurer dans l'administrateur Gantry 5.

Deuxièmement, il fournit des champs auxquels le thème peut se référer, fournissant la variable de couleur utilisée lorsque la page est rendue.

Vous pouvez trouver plus d'informations sur la façon d'utiliser les fichiers YAML dans Gantry 5 dans notre guide.