Les balises d'habillage / Skin tags : <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 leb:language
ne sera pas exécuté. A la place, un langage alternatif a été mis en place.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.
<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. |
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.
<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 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. |
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 : 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 L'utilisateur pourra modifier le thème via l'outil de création de thèmes, dans le volet « Arrière-plan ». |
Oui |
font | Format de la police Les valeurs attendues sont : |
Oui |
length | Longueur La valeur attendue doit être un nombre dont l'unité de mesure est 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. |
Oui |
background | Arrière-plan Les valeurs attendues sont : La variable ayant le nom |
Non |
url | URL d'une image
|
Non |
string | Chaîne de caractères |
Non |
automatic | Valeur automatisée |
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.
<Variable name="link.color"
description="Link Color"
type="color"
default="#888888"
value="#888888" />
a:link {
color: $(link.color);
}
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 _
.
<data:skin.vars.link_color/>
<div expr:style='"color: " + data:skin.vars.link_color + ";"'> </div>
<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 |
Les autres balises
<b:attr>
<b:class>
<b:comment>
<b:defaultmarkups>
<b:defaultmarkup><b:eval>
<b:if>
<b:elseif>
<b:else><b:includable>
<b:include><b:loop>
<b:message>
<b:param><b:section>
<b:skin>
<b:template-skin><b:switch>
<b:case>
<b:default><b:tag>
<b:template-script>
<b:widget>
<b:widget-settings>
<b:widget-setting><b:with>
<data:foo>
<![CDATA[]]>