Variables d'habillage - Les couleurs [color]

Nous vous rappelons que lorsque vous accédez à ce blog, vous signez automatiquement un accord avec Blogger Code.
Consultez les CGU.


Blogger - Color skin type
Le terme color est employé pour qualifier une variable d'habillage Blogger.
Une variable de type color contient un code de couleur hexadécimale, rgb ou rgba.


Syntaxe

Les variables d'habillage sont définies dans l'éditeur XML du thème, entre les balises <b:skin></b:skin>. Elles permettent de reporter une valeur dans la section des CSS ou/et dans le reste du thème XML.

<Variable name="name"
          description="description"
          type="color"
          default="value"
          value="value"
          hideEditor="true or false" />


Attributs

Paramètre Signification -
name Le nom ne peut contenir que des lettres ou des chiffres et doit être unique.
Exception : Le caractère . (point) peut être utilisé.
Ce nom sera utilisé pour extraire la valeur de la variable.
obligatoire
description Une courte description.
obligatoire
type Détermine le type de la valeur de la variable. obligatoire
default La valeur par défaut de la variable. obligatoire
value La valeur courante de la variable. obligatoire
hideEditor Cet attribut permet de masquer le formulaire dans l'outil de conception.
Valeur : true ou false
facultatif
Exemple
<Variable name="text.color"
          description="Text Color"
          type="color"
          default="#000000"
          value="#000000" />


La valeur

La valeur des attributs default et value doit contenir un code de couleur hexadécimale, rgb ou rgba.
Exemple code couleur hexadécimale
#000000
Exemple code couleur rgb
rgb(0,0,0)
Exemple code couleur rgba
rgba(0,0,0,0.5)


Sortie des données

Lorsque la variable est définie, il est possible de la convertir au format b:skin pour l'employer dans les CSS, ou au format XML pour extraire la valeur à l'extérieur des CSS.
Conversion au format b:skin
$(variable.name)
Pour construire le récipient, il faut reprendre le nom de la variable, l'encadrer de parenthèses (obligatoire, si le nom contient un point) et ajouter le préfixe $.
Conversion au format XML
<data:skin.vars.variable_name/>
Pour convertir au format XML, il faut mentionner l'objet data:skin.vars, suivi du nom de la variable.
Si la variable contient un point, il doit être remplacer par un tiret bas _.
Lorsque la donnée est convertie, elle devient de type skin et peut être injectée dans des expressions.


Paramètres additionnels

Les variables de type color contiennent un objet d'items qui permettent d'extraire certains éléments de la couleur.
Ressources
variable type color: {
  "red": skin(string),
  "green": skin(string),
  "blue": skin(string),
  "alpha": skin(string),
  "inverse": skin(string),
  "transparent": skin(string)
}

Pour pouvoir utiliser ces paramètres, il suffit d'ajouter ces items au nom de la donnée.
En savoir plus


Le formulaire dans le concepteur

Lorsqu'une variable de type color est définie dans le thème, un formulaire est automatiquement affiché dans l'outil de conception de thèmes:

  • Tableau de bord
  • Thème
  • Personnalisé
  • Avancé




Thème de couleur principal

keycolor est un nom de variable réservé, qui permet de définir le thème principal (jeu de couleurs) du thème.

<Variable name="keycolor"
          description="Main Color"
          type="color"
          default="#2196f3"
          value="#2196f3" />

Le choix du thème sera disponible dans l'outil de conception de thèmes :

  • Tableau de bord
  • Thème
  • Personnaliser
  • Arrière-plan




theme-color et msapplication-navbutton-color

Dans les Layouts version 3, le nom de la variable body.background.color permet à l'inclusion XML all-head-content de générer les balises meta theme-color et msapplication-navbutton-color.

Définition de la variable
<Variable name="body.background.color"
          description="Color Background"
          type="color"
          default="#2196f3"
          value="#2196f3" />
Rendu HTML des balises metas générées
<!-- Chrome, Firefox OS and Opera -->
<meta content='#2196f3' name='theme-color'/>
<!-- Windows Phone -->
<meta content='#2196f3' name='msapplication-navbutton-color'/>


Les autres types

Fiches populaires cette semaine

Les opérateurs d'URLs [path/params/appendParams/fragment]

Ajouter des boutons au menu de partage