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

Les variables d'habillage [introduction]

Les variables d'habillage [introduction]
Les variables d'habillage sont spécifiques à chaque modèle Blogger. Grâce à elles, l'administrateur du blog peut personnaliser très rapidement l'apparence du modèle sans avoir à recourir à des connaissances CSS.
Créer des variables d'habillage lors de la conception d'un modèle destiné à la distribution, est donc un très gros argument de vente pour convaincre ses prospects.

Fonctionnement

Les variables d'habillage sont définies dans l'éditeur XML du modèle, entre les balises <b:skin></b:skin>. Elles permettent d'ajouter des formulaires dans l'outil de création de modèles dans les sections "arrière-plan", "thème", "Largeur des colonnes", "Avancé".
Les valeurs qui sont modifiées via l'outil de création de modèles sont "réimprimées" dans la définition et automatiquement renvoyées vers les CSS dont la valeur de l'attribut est une donnée correspondant au nom de la variable.




Groupe de variables

La balise Group a la particularité de "regrouper" plusieurs déclarations dans un même onglet dans l'outil de création de modèles.




Syntaxe
<Group description="description" selector="selector HTML">
  
</Group>

  • La balise Group n'est pas requise.
  • Une balise Group ne peut contenir que des balises Variable.
  • Les balises Group ne peuvent pas être imbriquées.
Chaque balise Group doit contenir 2 paramètres :

Paramètre Signification
description Une courte description du groupe. Elle s'affiche dans les onglets "Avancé" dans l'outil de création de modèles.
selector Élément HTML ou/et class CSS d'un élément HTML. Ce paramètre permet d'afficher dans l'aperçu de l'outil de création de modèles la zone ciblée.


Déclaration des variables

Les balises de variables renferment les valeurs des variables. Les variables de types color et font, permettent d'afficher un formulaire de réglage dans l'outil de création de modèles.

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

  • Plusieurs balises Variable peuvent être imbriquées dans une balise Group.
  • Les balises Variable ne peuvent pas s'imbriquer.

La balise Variable doit contenir ces paramètres :

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. Voir le chapitre Sortie des données.
obligatoire
description Une courte description qui peut contenir des espaces.
Cette description s'affichera dans les onglets de l'outil de création de modèles pour les définitions de variables de types color, font et length.
Blogger dispose d'une bibliothèque de descriptions prédéfinies qui sont traduites automatiquement en fonction de la langue de l'interface. Voir le chapitre Étiquettes de descriptions prédéfinies.
obligatoire
type Détermine le type de la valeur de la variable. Voir le chapitre Types des variables. obligatoire
default La valeur par défaut de la variable. Si le modèle est réinitialisé depuis l'outil de création de modèles, c'est cette valeur qui sera rétablie. obligatoire
value La valeur courante de la variable. Elle se modifie automatiquement lorsque l'utilisateur modifie les valeurs depuis l'outil de création de modèles. La nouvelle valeur est imprimée dans le xml lors de l'enregistrement. obligatoire
color A utiliser dans une variable de type background. La valeur attendue peut être un code de couleur (hexadécimal/rgb/rgba) ou le nom d'une variable contenant un code de couleur.
Cette valeur pourra être intégrée dans la valeur des attributs default ou/et value sous la forme d'une variable $color.
facultatif
min Valeur minimum que peut accepter une variable de type length. facultatif
max Valeur maximum que peut accepter une variable de type length. facultatif


Types des variables

Le tableau ci-dessous regroupe les différents types disponibles.
Un type défini la valeur de la variable.

type Signification Formulaire
Avancé
Documentation
color Couleur.
La valeur attendue doit être un code de couleur hexadécimal.
La variable qui recevra le nom keycolor permettra de définir le thème de couleur principal.
L'utilisateur pourra modifier le thème via l'outil de création de modèles, dans le volet "Arrière-plan".
Fiche
Bibliothèque
font Le format de la police.
Les valeurs attendues sont : font-style, font-weight, font-size et font-family.
Fiche
Bibliothèque
length Longueur.
La valeur attendue doit être un nombre dont l'unité de mesure est px ou em.
L'unité de mesure n'est pas requis, lorsque la valeur est égale à 0.
Fiche
Bibliothèque
background Arrière-plan.
Les valeurs attendues sont : background-color, background-image, background-repeat, background-position et background-attachment.
La variable ayant le nom body.background sera utilisée par défaut dans l'outil de création de modèles, dans le volet "Arrière-plan" pour modifier les paramètres de l'image d'arrière-plan.
X Fiche
Bibliothèque
url Une url.
url(https://....)
X Fiche
Bibliothèque
string Une quelconque chaîne de caractères.
X Fiche
Bibliothèque
automatic Une valeur automatique
X Fiche
Bibliothèque

Les variables de types "color" et "font" permettent l'affichage d'un formulaire dans le concepteur de modèles, dans le volet "Avancé".




Sortie des données

Lorsqu'une 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 link.color, sa syntaxe de sortie sera $(link.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="link.color"
          description="Link Color"
          type="color"
          default="#888888"
          value="#888888" />

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

Rendu HTML
a:link {
  color: #888888;
}


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.

link.color devient : data:skin.vars.link_color.
Si le nom de la variable contient un point, celui-ci devient un tiret bas _.

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

Dans une expression
<div expr:style='"color: " + data:skin.vars.link_color + ";"'>
  
</div>

Rendu HTML
<div style='color: #888888;'>
  
</div>


Étiquettes de descriptions prédéfinies

Le tableau ci-dessous reprend la liste des descriptions des variables qui sont automatiquement traduites en français.
Si vous êtes un concepteur de modèles, privilégiez ces descriptions.
Liste non-exhaustive (Dernière mise à jour - 2014)

Descriptions en anglais Traductions automatiques en français
Accents Accents
Alternate Color Autre couleur
Backgrounds Arrière-plans
Background Color Couleur de l'arrière-plan
Bevel Color Couleur de l'effet de biseau
Blog Description Description du blog
Blog Description Background Color Couleur de l'arrière-plan de la description du blog
Blog Description Color Couleur de description du blog
Blog Description Font Police de la description du blog
Blog Title Titre du blog
Blog Title Background Color non traduit
Blog Title Color Couleur du titre du blog
Blog Title Font Police du titre du blog
Border Color Couleur de bordure
Bottom Sidebar Background Color non traduit
Bottom Sidebar Link Color non traduit
Bottom Sidebar Text Color non traduit
Bottom Sidebar Title Color non traduit
Bottom Sidebar Visited Link Color non traduit
Caption Text Color Couleur du texte de la légende
Color non traduit
Date and Footer Color non traduit
Date Header En-tête de la date
Date Header Color Couleur de l'en-tête de date
Date Header Font Police de l'en-tête de date
Date Ribbon Ruban de la date
Description Background Color non traduit
Description Color Couleur du sous-titre de description
Feed Flux
Feed Links Liens vers les flux
Font Police
Footer Pied de page
Footer Background Arrière-plan du pied de page
Footer Links Liens du pied de page
Footer Text Color Couleur du texte du pied de page
Gadget Background Arrière-plan des gadgets
Gadget Links Liens des gadgets
Gadget Text Texte des gadgets
Gadget Title Titre du gadget
Gadget Title Color Couleur du titre du gadget
Gadgets Gadgets
Header En-tête
Header Background Arrière-plan de l'en-tête
Header Bar Barre d'entête
Hover Color Couleur de pointage
Images Images
Link Color Couleur de lien
Link Hover Color Couleur du lien lorsque la souris le survole
Link Text non traduit
Link Visited Color non traduit
Links Liens
Main Background Arrière-plan principal
Main Background Color Couleur principale de l'arrière-plan
Mobile Button Color non traduit
Outer Background Arrière-plan extérieur
Page Page
Page Background Color Couleur de l'arrière-plan de la page
Page Header Background Color Couleur d'arrière-plan de l'en-tête de la page
Page Header Color Couleur de l'en-tête de la page
Page Header Corners Color non traduit
Page Header Font Police de l'en-tête de la page
Page Header Text Color non traduit
Page Text Texte de la page
Pager non traduit
Post Article
Post Background Arrière-plan de l'article
Post Border Color Couleur de la bordure de l'article
Post Footer Pied de page de l'article
Post Footer Color Couleur du pied de page de l'article
Post Footer Font Police du pied de page de l'article
Post Footer Link Color Couleur du lien du pied de page de l'article
Post Title Titre de l'article
Post Title Background Color non traduit
Post Title Color Couleur du titre de l'article
Post Title Font Police du titre de l'article
Selected Color Couleur du texte de l'onglet sélectionné
Separator Color Couleur du séparateur
Separator Line Color Couleur des lignes de séparation
Shadow Color Couleur de l'élément caché
Sidebar Background Arrière-plan de l'encadré
Sidebar Background Color Couleur de l'arrière-plan de la barre latérale
Sidebar Link Color Couleur de la barre latérale des liens
Sidebar Text Color Couleur du texte de la barre latérale
Sidebar Title Background Color non traduit
Sidebar Title Color Couleur du titre de la barre latérale
Sidebar Title Font Police du titre de la barre latérale
Sidebar Title Text Color non traduit
Sidebar Visited Link Color Couleur de la barre latérale des liens consultés
Tabs Background Arrière-plan des onglets
Tabs Border Color Couleur de la bordure des onglets
Tabs Text Texte des onglets
Text Color Couleur du texte
Text Font Police du texte
Title Color Couleur du titre
Title Font Police du titre
Top Sidebar Background Color Couleur de la barre latérale de l'arrière-plan
Top Sidebar Link Color Couleur de la barre latérale des liens
Top Sidebar Text Color Couleur du texte de la barre latérale
Top Sidebar Title Color Couleur du titre de la barre latérale supérieure
Top Sidebar Visited Link Color Couleur de la barre latérale des liens consultés
Visited Color Couleur du lien visité
Visited Link Color Couleur des liens consultés
Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte TC :
  • 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
Résumés des articles avec images réactives [Pack 2016]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire