Les Balises d'Habillage / Skin Tags : <b:skin>, <b:template-skin>
Les balises <b:skin> et <b:template-skin> sont des composants essentiels placés dans l'en-tête du fichier XML d'un thème Blogger. Elles jouent un rôle fondamental dans la structure du thème, car elles permettent de déclarer les variables et les styles CSS nécessaires à la personnalisation et à la mise en forme du thème.
Description des Balises
Syntaxe de la balise <b:skin>
<b:skin> <![CDATA[ ]]> </b:skin>
La balise <b:skin> encapsule la majeure partie des déclarations CSS du blog. Elle est essentielle pour assurer la cohérence visuelle et permettre la personnalisation via l'outil de création de thèmes.
Syntaxe de la balise <b:template-skin>
<b:template-skin> <![CDATA[ ]]> </b:template-skin>
La balise <b:template-skin> est utilisée pour les styles qui sont spécifiquement applicables à l'onglet « Mise en page » du tableau de bord Blogger.
Les marqueurs
CDATAsont imbriqués dans les balises. Ce qui indique que le contenu ne sera pas analysé et que les traditionnelles expressions Blogger ne seront pas exécutées, à l'exception d'un langage alternatif présenté ci-dessous.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.Ces balises doivent être définies dans l'en-tête XML, entre
<head>et</head>, et ne peuvent jamais être imbriquées.Seules des déclarations CSS et des variables peuvent être contenues dans ces balises.
Les Variables d'Habillage
Les variables d'habillage permettent de prédéfinir des valeurs modifiables via l'outil de création de thèmes, contribuant ainsi à la personnalisation flexible de l'apparence du thème. Ces variables facilitent l'adaptation du design par l'utilisateur sans nécessiter de compétences avancées en CSS.
Les variables sont définies entre les balises <b:skin></b:skin> dans l'éditeur XML du thème. Elles permettent d'ajouter des formulaires dans l'outil de création de thèmes pour les sections telles que « Arrière-plan », « Thème », « Largeur des colonnes » et « Avancé ». Toute modification apportée par l'utilisateur via cet outil est automatiquement reflétée dans les CSS correspondants.
Groupe de Variables
La balise <Group> est utilisée pour regrouper plusieurs variables sous un même menu, simplifiant ainsi l'organisation des paramètres dans l'outil de création de thèmes.
<Group description="description" selector="selector HTML"> </Group>
La balise
<Group>est optionnelle.Elle ne peut contenir que des balises
<Variable>et ne peut être imbriquée.
Chaque balise <Group> doit comporter deux attributs :
| Attributs | Description |
|---|---|
|
Une description concise du groupe. Elle s'affiche dans l'onglet « Avancé » de l'outil de création de thèmes. |
|
Élément HTML ou classe CSS ciblant une zone particulière pour prévisualiser la modification dans l'outil de création de thèmes. |
Déclaration des Variables
Les balises <Variable> définissent les valeurs des variables d'habillage. Ces variables sont de différents types, tels que color, length et font, et permettent d'afficher des formulaires 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 être imbriquées entre elles.
Chaque balise <Variable> doit contenir les attributs suivants :
| Attributs | Description | Implémentation |
|---|---|---|
|
Nom de la variable Il doit être unique et ne peut contenir que des lettres ou des chiffres. Exception : Le caractère Ce nom sera utilisé pour extraire la valeur de la variable. Voir le paragraphe Sortie des données. |
Obligatoire |
|
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. |
Obligatoire |
|
Type de la variable Détermine le type de la valeur de la variable. Voir le paragraphe Types des variables. |
Obligatoire |
|
La valeur par défaut de la variable Valeur par défaut qui est restaurée lorsque le thème est réinitialisé. |
Obligatoire |
|
La valeur courante de la variable Valeur actuelle de la variable, modifiable par l'utilisateur via l'outil de création de thèmes. |
Obligatoire |
|
Couleur d'arrière-plan À 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. |
Facultative |
|
Couleur rouge du format RGB À utiliser dans une variable de type color. La valeur attendue doit être le code de couleur RGB rouge (nombre compris entre 0 et 255). |
Facultative |
|
Couleur verte du format RGB À utiliser dans une variable de type color. La valeur attendue doit être le code de couleur RGB vert (nombre compris entre 0 et 255). |
Facultative |
|
Couleur bleue du format RGB À utiliser dans une variable de type color. La valeur attendue doit être le code de couleur RGB bleu (nombre compris entre 0 et 255). |
Facultative |
|
Transparence de la couleur À 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). |
Facultative |
|
Nom de la police À utiliser dans une variable de type font. La valeur attendue doit être le nom de la police. |
Facultative |
|
Taille de la police À utiliser dans une variable de type font. La valeur attendue doit être la taille de la police. |
Facultative |
|
Valeur minimum À utiliser dans une variable de type length. La valeur attendue doit être la valeur minimum que peut atteindre la variable (Taille en px). |
Facultative |
|
Valeur maximum À utiliser dans une variable de type length. La valeur attendue doit être la valeur maximum que peut atteindre la variable (Taille en px). |
Facultative |
|
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. |
Facultative |
Types des Variables
Le tableau ci-dessous récapitule les différents types de variables disponibles :
| Variable Type | Description | Formulaire |
|---|---|---|
|
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 |
|
Format de la police Les valeurs attendues sont : |
Oui |
|
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 |
|
Arrière-plan Les valeurs attendues sont : La variable ayant le nom |
Non |
|
URL d'une image
|
Non |
|
Chaîne de caractères |
Non |
|
Valeur automatisée |
Non |
Les variables de types color, length et font permettent l'affichage d'un formulaire dans le volet « Avancé » du concepteur de thèmes. L'affichage de ces formulaires peut varier en fonction de :
La version du thème.
L'imbrication de la variable dans une balise
<Group>.La valeur de l'attribut
hideEditor.
Sortie des Données
Une fois définies, les variables peuvent être extraites pour être utilisées dans les CSS ou ailleurs dans le code XML.
Utilisation dans la Balise <b:skin>
Pour faire référence à une variable dans <b:skin>, il suffit d'encadrer son nom de parenthèses, précédé du symbole $.
Par exemple, la variable link.color sera référencée ainsi : $(link.color).
<Variable name="link.color"
description="Link Color"
type="color"
default="#888888"
value="#888888" />
a:link {
color: $(link.color);
}
a:link {
color: #888888;
}
Utilisation en Dehors de <b:skin>
Lorsque la valeur est nécessaire en dehors de <b:skin>, elle peut être traitée comme une donnée XML.
La variable link.color devient data:skin.vars.link_color.
Si le nom contient un point, celui-ci est remplacé par un tiret bas _.
<data:skin.vars.link_color/>
<div expr:style='"color: " + data:skin.vars.link_color + ";"'> </div>
<div style='color: #888888;'> </div>
Les données d'habillage peuvent également être enrichies par des paramètres additionnels, permettant de spécifier des informations supplémentaires ou des caractéristiques particulières appliquées à la valeur.
En savoir plus sur les réglages des données
Descriptions Multilingues des Variables d'Habillage
Le tableau ci-dessous présente une liste des descriptions des variables d'habillage traduites automatiquement en français, telles qu'elles apparaissent dans l'outil de conception de thèmes Blogger.
Il inclut toutes les descriptions définies dans les thèmes officiels distribués entre 2006 et 2017.
Si vous êtes concepteur de thèmes, il est recommandé de privilégier ces descriptions. Attention toutefois, ces descriptions sont sensibles à la casse.
Cette liste est non exhaustive et son dernier correctif date du 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 |
