Variable d'habillage de couleur / Color skin variable
Le terme color(skin) est employé pour qualifier une variable d'habillage Blogger. Une variable de type color(skin) 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 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 : |
facultatif |
<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.
#000000
rgb(0,0,0)
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.
$(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 $.
<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.
Réglages des données
Les variables de type color(skin) contiennent un objet d'items qui permettent d'extraire certains éléments de la couleur.
red: string(skin),
green: string(skin),
blue: string(skin),
alpha: string(skin),
inverse: string(skin),
transparent: string(skin)
Pour pouvoir utiliser ces réglages, il suffit d'ajouter ces items au nom de la donnée.
Le formulaire dans le concepteur
Lorsqu'une variable de type color(skin) est définie dans le thème, un formulaire est automatiquement ajouté dans l'outil de conception de thèmes :
- UI
- Thème
- Personnalisé
- Avancé
Thème de couleur principal
keycolor est un nom réservé de variable qui défini le thème principal (jeu de couleurs) du thème. Par défaut, cette couleur correspond au plus près à la couleur dominante de l'image d'arrière-plan.
<Variable name="keycolor"
description="Main Color"
type="color"
default="#2196f3"
value="#2196f3" />
Le choix du thème de couleur principal sera disponible dans l'outil de conception de thèmes :
- UI
- 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.
<Variable name="body.background.color"
description="Color Background"
type="color"
default="#2196f3"
value="#2196f3" />
<!-- Chrome, Firefox OS and Opera --> <meta content='#2196f3' name='theme-color'/> <!-- Windows Phone --> <meta content='#2196f3' name='msapplication-navbutton-color'/>
