ThéorieRéférences XMLTypes des variables d'habillage

Variables d'habillage - Les couleurs [color]

Les couleurs [color]
Le terme color est employé pour qualifier une variable d'habillage.
Une variable de type color contient un code de couleur.

Syntaxe

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

<Variable name="name"
          description="description"
          type="color"
          default="value"
          value="value" />

La valeur du code de couleur peut être une valeur :
  • hexadécimale
  • rgb
  • rgba


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


Sortie des données

Lorsque la variable est définie, il est possible d'en extraire sa valeur dans la section réservée aux CSS ou/et à l'extérieur de la balise b:skin.

Dans la balise b:skin, il suffit de reprendre le nom de la variable, de l'encadrer de parenthèses et d'ajouter le préfixe $.

Par exemple, la variable dont le nom est text.color, sa syntaxe de sortie sera $(text.color).
A savoir : Les parenthèses ne sont requises que si le nom de la variable contient un point.

Définition de la variable
<Variable name="text.color"
          description="Text Color"
          type="color"
          default="#000000"
          value="#000000" />

Intégration de la variable dans les CSS
body {
  color: $(text.color);
}

Rendu HTML
body {
  color: #000000;
}


Lorsque l'on souhaite exporter la valeur à l'extérieur de b:skin, le langage XML reprend ses droits et la donnée peut être traitée comme les autres données issues d'un dictionnaire quelconque.
La donnée convertie, devient de type string et peut être injectée dans des expressions.

text.color devient : data:skin.vars.text_color.

Balise de sortie data
<data:skin.vars.text_color/>

Complément : Bibliothèque des variables "color" définies dans les modèles officiels.


Le formulaire dans le concepteur

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

  • Tableau de bord
  • Modèle
  • Personnalisé
  • Avancé




Thème de couleur principal

Le nom de la variable keycolor permet de définir le thème principal du modèle.

<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 modèles :

  • Tableau de bord
  • Modèle
  • Personnalisé
  • Arrière-plan


Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire
DéveloppementsFichiers XML
Résumés des articles avec images réactives [Pack 2016]
Populaire