Les balises d'habillage / Skin tags : <b:skin>, <b:template-skin>

Blogger - Les balises d'habillage <b:skin>, <b:template-skin>

Les balises <b:skin> et <b:template-skin> sont des éléments employés dans l'entête du fichier XML du thème Blogger, dont le contenu est composé d'une série de déclarations de variables et de CSS interagissants avec l'outil de création de thèmes.

Les syntaxes

<b:skin> accueille la majorité des CSS du blog, tandis que <b:template-skin> est réservé pour définir les CSS de l'onglet « Mise en page » dans le tableau de bord.

Syntaxe de la balise <b:skin>

<b:skin>
  <![CDATA[
    
  ]]>
</b:skin>

Syntaxe de la balise <b:template-skin>

<b:template-skin>
  <![CDATA[
    
  ]]>
</b:template-skin>
  • Les marqueurs CDATA sont imbriqués dans les balises. Ce qui indique que le contenu ne sera pas analysé et que le b:language ne sera pas exécuté. A la place, un langage alternatif a été mis en place.

    En savoir plus sur CDATA

  • La balise <b:skin> est requise dans tous les thèmes.

  • La balise <b:template-skin> n'est pas autorisée dans les thèmes Version 1.

  • Les balises <b:skin> et <b:template-skin> ne peuvent pas être imbriquées. Elles doivent être positionnées dans l'entête du fichier XML entre <head> et </head>.

  • Les balises <b:skin> et <b:template-skin> ne peuvent contenir que des déclarations CSS et des variables.



Les variables d'habillage

La partir la plus intéressante est celle réservée à la définition des variables. Elle permet de prédéfinir des valeurs et de créer des formulaires dans l'outil de création de thèmes.

Les variables d'habillage sont spécifiques à chaque thème Blogger. Grâce à elles, l'administrateur du blog peut personnaliser très rapidement l'apparence du thème sans avoir à recourir à des connaissances CSS.
Créer des variables d'habillage lors de la conception d'un thème destiné à vos futurs clients, est donc un très gros argument pour convaincre vos prospects que vous êtes un développeur hors pair.

Les variables d'habillage sont définies dans l'éditeur XML du thème, entre les balises <b:skin></b:skin>. Elles permettent d'ajouter des formulaires dans l'outil de création de thèmes 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 thèmes 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 « grouper » plusieurs variables dans un même menu dans l'outil de création de thèmes.

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 attributs :

Attributs Description
description

Une courte description du groupe. Elle s'affiche dans les onglets « Avancé » dans l'outil de création de thèmes.

Liste des descriptions multilingues

selector

Élément HTML ou/et classe CSS d'un élément HTML. Ce paramètre permet d'afficher dans l'aperçu de l'outil de création de thèmes la zone ciblée.



Déclaration des variables

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

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 attributs :

Attributs Description Implantation
name

Nom de la variable

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 paragraphe Sortie des données.

Implantation : Obligatoire
description

Description de la variable

Une courte description qui peut contenir des espaces.

Cette description s'affichera dans les onglets de l'outil de création de thèmes 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.

Liste des descriptions multilingues

Implantation : Obligatoire
type

Type de la variable

Détermine le type de la valeur de la variable.

Voir le paragraphe Types des variables.

Implantation : Obligatoire
default

La valeur par défaut de la variable

Si le thème est réinitialisé depuis l'outil de création de thèmes, c'est cette valeur qui sera rétablie.

Implantation : 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 thèmes.

La nouvelle valeur est reportée dans le xml lors de l'enregistrement.

Implantation : Obligatoire
color

Couleur d'arrière-plan

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 de type color.

Implantation : Facultative
red

Couleur rouge du format RGB

A utiliser dans une variable de type color.

La valeur attendue doit être le code de couleur RGB rouge (nombre compris entre 0 et 255).

Implantation : Facultative
green

Couleur verte du format RGB

A utiliser dans une variable de type color.

La valeur attendue doit être le code de couleur RGB vert (nombre compris entre 0 et 255).

Implantation : Facultative
blue

Couleur bleue du format RGB

A utiliser dans une variable de type color.

La valeur attendue doit être le code de couleur RGB bleu (nombre compris entre 0 et 255).

Implantation : Facultative
alpha

Transparence de la couleur

A utiliser dans une variable de type color.

La valeur attendue doit être le niveau de transparence de la couleur (nombre compris entre 0.0 et 1.0).

Implantation : Facultative
family

Nom de la police

A utiliser dans une variable de type font.

La valeur attendue doit être le nom de la police.

Implantation : Facultative
size

Taille de la police

A utiliser dans une variable de type font.

La valeur attendue doit être la taille de la police.

Implantation : Facultative
min

Valeur minimum

A utiliser dans une variable de type length.

La valeur attendue doit être la valeur minimum que peut atteindre la variable (Taille en px).

Implantation : Facultative
max

Valeur maximum

A utiliser dans une variable de type length.

La valeur attendue doit être la valeur maximum que peut atteindre la variable (Taille en px).

Implantation : Facultative
hideEditor

Masquer le formulaire

Attribut booléen qui permet de ne pas afficher le formulaire associé à la variable dans l'outil de conception.

Valeurs : true (vrai) ou false (faux).

S'applique uniquement aux variables de types color, length et font.

Implantation : Facultative


Types des variables

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

Variable Type Description Formulaire
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 thèmes, dans le volet « Arrière-plan ».

En savoir plus

Oui
font

Format de la police

Les valeurs attendues sont : font-style, font-weight, font-size et font-family.

En savoir plus

Oui
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.

Le formulaire dans le concepteur de thèmes est disponibles uniquement dans les thèmes Version 3.

En savoir plus

Oui
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 thèmes, dans le volet « Arrière-plan » pour modifier les paramètres de l'image d'arrière-plan.

En savoir plus

Non
url

URL d'une image

url(https://....) ou https://....

En savoir plus

Non
string

Chaîne de caractères

En savoir plus

Non
automatic

Valeur automatisée

En savoir plus

Non

Les variables de types color, length et font permettent l'affichage d'un formulaire dans le concepteur de thèmes, dans le volet « Avancé ».

L'affichage de ces formulaires peut varier en fonction :

  • de la version du thème.

  • de l'imbrication ou non de la variable dans une balise <Group>.

  • de la valeur de l'attribut hideEditor contenu dans la variable.



Sortie des données

Lorsqu'une variable est définie, il est possible d'en extraire sa valeur dans la zone 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" />
Implantation 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.

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 XML
<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>

Comme les données XML, les données d'habillage disposent de réglages additionnels qui permettent d'obtenir des informations supplémentaires ou d'appliquer une caractéristique à la valeur.

En savoir plus sur les réglages des données



Descriptions multilingues des variables d'habillage

Le tableau ci-dessous reprend la liste des descriptions des variables d'habillage qui sont automatiquement traduites en français et qui apparaissent dans l'outil de conception de thèmes Blogger
Inclus toutes les descriptions définies dans les thèmes officiels distribués entre 2006 et 2017.
Si vous êtes un concepteur de thèmes, privilégiez ces descriptions. Toutefois attention, ces descriptions sont sensibles à la casse !
Liste non-exhaustive dont le dernier correctif remonte au 20 mars 2018.

Descriptions en anglais Traductions automatiques en français
Accents Accents
Action color Couleur d'action
Action font Police d'action
Action font (large) Police d'action (grande taille)
Action font (small) Police d'action (petite taille)
Alternate Color Autre couleur
Attribution Attribution
Attribution link color Couleur de lien d'attribution
Attribution text color Couleur du texte d'attribution
Attribution text font Police du texte d'attribution
Author color Couleur du nom d'auteur
Author font Police du nom d'auteur
Author profile Profil de l'auteur
Descriptions en anglais Traductions automatiques en français
Background blur Flou d'arrière-plan
Background Color Couleur de l'arrière-plan
Background color Couleur de l'arrière-plan
Background color (Bottom) Couleur d'arrière-plan (bas)
Background color (text-only post) Couleur d'arrière-plan (article texte uniquement)
Background color (Top) Couleur d'arrière-plan (haut)
Background color (Top) - HD Couleur d'arrière-plan (haut) – HD
Background height Hauteur d'arrière-plan
Background icons color Couleur des icônes d'arrière-plan
Backgrounds Arrière-plans
Bevel Color Couleur de l'effet de biseau
Blockquote color Couleur de citation
Blockquote font Police de citation
Blockquote font (large) Police de citation (grande taille)
Blockquote font (small) Police de citation (petite taille)
Blockquotes Citations
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 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
Body Corps
Body background color Couleur d'arrière-plan principal
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
Button color Couleur de bouton
Button font Police de bouton
Descriptions en anglais Traductions automatiques en français
Caption color Couleur de légende
Caption font Police de légende
Caption Text Color Couleur du texte de la légende
Caption text color Couleur de texte de légende
Collapsed title color Couleur du titre réduit
Collapsed title font Police du titre réduit
Color Couleur
Comments Commentaires
Content color Couleur du contenu
Content font Police du contenu
Content margin Marge du contenu
Content width Largeur du contenu
Descriptions en anglais Traductions automatiques en français
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
Description font Police de la description
Dialog action color Couleur d'action de la boîte de dialogue
Dialog action font Police d'action de la boîte de dialogue
Dialog input color Couleur de la saisie de la boîte de dialogue
Dialog input font Police de saisie de la boîte de dialogue
Dialog title color Couleur du titre de la boîte de dialogue
Dialog title font Police du titre de la boîte de dialogue
Dialogs Boîtes de dialogue
Descriptions en anglais Traductions automatiques en français
Featured post Article sélectionné
Featured post background color (secondary) Couleur d'arrière-plan de l'article sélectionné (deuxième partie)
Featured post buttons color (secondary) Couleur des boutons de l'article sélectionné (deuxième partie)
Featured post drop cap color (secondary) Couleur de la première lettre de l'article sélectionné (deuxième partie)
Featured post main background color Couleur d'arrière-plan principale de l'article sélectionné
Featured post main buttons color Couleur des boutons principaux de l'article sélectionné
Featured post main link color Couleur du lien principal de l'article sélectionné
Featured post main text color Couleur du texte principal de l'article sélectionné
Featured post main title color Couleur du titre principal de l'article sélectionné
Featured post text color (secondary) Couleur de texte de l'article sélectionné (deuxième partie)
Feed Flux
Feed Links Liens vers les flux
Filter background color Couleur d'arrière-plan de filtre
Filter keyword color Police du mot clé de filtre
Filter keyword font (large) Police du mot clé de filtre (grande taille)
Filter keyword font (small) Police du mot clé de filtre (petite taille)
Filter link color Couleur du lien de filtre
Filter link font (large) Police du lien de filtre (grande taille)
Filter link font (small) Police du lien de filtre (petite taille)
Filter text color Couleur du texte de filtre
Filter text font Police du texte de filtre
Filter text font (large) Police du texte de filtre (grande taille)
Filter text font (small) Police du texte de filtre (petite taille)
Font Police
Footer Pied de page
Footer Background Arrière-plan du pied de page
Footer color Couleur de pied de page
Footer color (text-only post) Couleur de pied de page (article texte uniquement)
Footer Links Liens du pied de page
Footer Text Color Couleur du texte du pied de page
Descriptions en anglais Traductions automatiques en français
Gadget Background Arrière-plan des gadgets
Gadget Links Liens des gadgets
Gadget Text Texte des gadgets
Gadget text color Couleur de texte de gadget
Gadget text font Police de texte de gadget
Gadget Title Titre du gadget
Gadget Title Color Couleur du titre du gadget
Gadget title color Couleur de titre de gadget
Gadget title font Police de titre de gadget
Gadget title font (large) Police de titre de gadget (grande taille)
Gadget title font (small) Police de titre de gadget (petite taille)
Gadgets Gadgets
Descriptions en anglais Traductions automatiques en français
Header En-tête
Header Background Arrière-plan de l'en-tête
Header Bar Barre d'entête
Header bar color Couleur de la barre d'en-tête
Header color Couleur d'en-tête
Header color (text-only post) Couleur d'en-tête (article texte uniquement)
Header font Police d'en-tête
Header icons color Couleur des icônes d'en-tête
Header separator color Couleur du séparateur d'en-tête
Hover Color Couleur de pointage
Descriptions en anglais Traductions automatiques en français
Icon color Couleur d'icône
Individual Post or Page Article ou page individuel(le)
Input color Couleur de la saisie
Input font Police d'entrée
Images Images
Descriptions en anglais Traductions automatiques en français
Label background color Couleur d'arrière-plan de libellé
Label font Police du libellé
Label font size Taille de police de libellé
Label text color Couleur de texte de libellé
Labels Libellés
Link Color Couleur de lien
Link color Couleur de lien
Link font Couleur de police
Link Hover Color Couleur du lien lorsque la souris le survole
Link Text non traduit
Link Visited Color non traduit
Links Liens
Descriptions en anglais Traductions automatiques en français
Main Background Arrière-plan principal
Main Background Color Couleur principale de l'arrière-plan
Mobile Button Color Couleur des boutons pour mobiles
Descriptions en anglais Traductions automatiques en français
Outer Background Arrière-plan extérieur
Descriptions en anglais Traductions automatiques en français
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 list color Couleur de la liste de pages
Page list color (selected page) Couleur de la page sélectionnée dans la liste
Page list font Police de la liste de pages
Page list font (selected page) Police de la page sélectionnée dans la liste
Page Text Texte de la page
Pager non traduit
Pictures Images
Placeholder text color Couleur de texte d'espace réservé
Placeholder text font Police de texte d'espace réservé
Popular post background color Couleur d'arrière-plan des articles les plus consultés
Popular post byline color Couleur de légende des articles les plus consultés
Popular post link color Couleur de lien des articles les plus consultés
Popular post text color Couleur de texte des articles les plus consultés
Popular post title color Couleur de titre des articles les plus consultés
Popular posts Articles les plus lus
Popup background color Couleur d'arrière-plan de fenêtre pop-up
Popup selected color Couleur du texte de l'onglet sélectionné dans une fenêtre pop-up
Popup text color Couleur de texte de fenêtre pop-up
Post Article
Post Background Arrière-plan de l'article
Post background color Couleur d'arrière-plan d'article
Post Border Color Couleur de la bordure de l'article
Post byline color Couleur de légende d'article
Post byline font Police de légende d'article
Post border radius Rayon de bordure d'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 icons color Couleur des icônes d'article
Post link color Couleur de lien d'article
Post navigation Navigation d'article
Post navigation links color Couleur des liens de navigation d'article
Post navigation links visited color Couleur des liens visités de navigation d'article
Post navigations links hover color Couleur de pointage sur les liens de navigation d'article
Post snippet text font Police de texte d'extrait d'article
Post snippet text line height Hauteur de ligne de texte d'extrait d'article
Post subtitle color Couleurs du sous-titre d'article
Post subtitle font Police du sous-titre d'article
Post text color Couleur de texte d'article
Post text font Police de texte d'article
Post text line height Hauteur de ligne de texte d'article
Post Title Titre de l'article
Post Title Background Color non traduit
Post title background color Couleur d'arrière-plan du titre d'article
Post Title Color Couleur du titre de l'article
Post title color Couleur de titre d'article
Post Title Font Police du titre de l'article
Post title font Police de titre d'article
Post title stream font Police de titre d'article de page d'accueil
Post width (stream) Largeur des articles (flux)
Posts Articles
Profile description color Couleur de la description de profil
Profile description font Police de la description de profil
Profile link color Couleur de lien de profil
Profile link font Police du lien du profil
Profile name color Couleur du nom de profil
Profile name font Police du nom de profil
Profile text color Couleur de texte de profil
Profile title color Couleur de titre de profil
Descriptions en anglais Traductions automatiques en français
Search Rechercher
Search bar Barre de recherche
Selected Color Couleur du texte de l'onglet sélectionné
Selected color Couleur de l'onglet sélectionné
Separator Color Couleur du séparateur
Separator color Couleur de séparateur
Separator Line Color Couleur des lignes de séparation
Shadow Color Couleur de l'élément caché
Sharing Partage
Sharing background color Couleur d'arrière-plan de partage
Sharing icons color Couleur des icônes de la fenêtre pop-up de partage
Sharing text color Couleur de texte de partage
Sharing text font Police de texte de partage
Sidebar Barre latérale
Sidebar Background Arrière-plan de l'encadré
Sidebar Background Color Couleur de l'arrière-plan de la barre latérale
Sidebar icons color Couleur des icônes 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
Sidebar width Largeur de la barre latérale
Descriptions en anglais Traductions automatiques en français
Tabs Onglets
Tabs Background Arrière-plan des onglets
Tabs background color Couleur d'arrière-plan des onglets
Tabs Border Color Couleur de la bordure des onglets
Tabs Text Texte des onglets
Tabs text Texte des onglets
Text Color Couleur du texte
Text color Couleur du texte
Text Font Police du texte
Text font Police du texte
Text font (large) Police du texte (grande taille)
Text font (small) Police du texte (petite taille)
Title Color Couleur du titre
Title color Couleur de titre
Title color (text-only post) Couleur de titre (article texte uniquement)
Title Font Police du titre
Title font (large) Police de titre (grande taille)
Title font (small) Police de titre (petite taille)
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
Descriptions en anglais Traductions automatiques en français
Visited Color Couleur du lien visité
Visited Link Color Couleur des liens consultés
Visited link color Couleur du lien consulté
Descriptions en anglais Traductions automatiques en français
Widths Largeur


Spotlight

Populaires cette semaine