Variable d'habillage d'arrière-plan / Background skin variable

Le terme background(skin) est employé pour qualifier une variable d'habillage Blogger. Une variable de type background(skin) contient les paramètres d'un arrière-plan comme la couleur, l'url de l'image, l'alignement, le positionnement, etc...
Syntaxe
Les variables d'habillage sont définies dans l'éditeur XML du thème, entre les balises <b:skin></b:skin>
. Elles permettent de reporter une valeur dans la section des CSS ou/et dans le reste du thème XML.
<Variable name="name" description="description" type="background" color="value" default="value" value="value" />
Attributs
Paramètre | Signification | - |
---|---|---|
name |
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. |
obligatoire |
description |
Une courte description. |
obligatoire |
type |
Détermine le type de la valeur de la variable. |
obligatoire |
color |
La valeur attendue peut être un code de couleur (hexadécimal/rgb/rgba) ou le nom d'une variable de type color(skin). Cette valeur pourra être intégrée dans la valeur des attributs |
facultatif |
default |
La valeur par défaut de la variable. |
obligatoire |
value |
La valeur courante de la variable. |
obligatoire |
<Variable name="post.background" description="Post Background" type="background" color="#539bcd" default="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center" value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center" />
La valeur
La valeur des attributs default
et value
doit contenir les paramètres standards CSS de l'arrière-plan.
color image repeat attachment position
#539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center
Sortie des données
Lorsque la variable est définie, il est possible de la convertir au format b:skin
pour l'employer dans les CSS, ou au format XML pour extraire la valeur à l'extérieur des CSS.
$(variable.name)
$
.
<data:skin.vars.variable_name/>
Pour convertir au format XML, il faut mentionner l'objet data:skin.vars
, suivi du nom de la variable.
Si la variable contient un point, il doit être remplacé par un tiret bas _
.
Lorsque la donnée est convertie, elle devient de type skin et peut être injectée dans des expressions.
Réglages des données
Les variables de type background(skin) contiennent un objet d'items qui permettent d'extraire séparément l'url de l'image et le code de couleur.
image: image,
color: color(skin)
Pour pouvoir utiliser ces réglages, il suffit d'ajouter ces items au nom de la donnée.
Image d'arrière-plan principale
body.background
est le nom réservé de variable pour définir l'image principale d'arrière-plan du thème.
<Variable name="body.background"
description="Main Background"
type="background"
color="#539bcd"
default="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center"
value="$(color) url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center" />
Lorsque cette variable est définie dans le code XML du thème, l'option de l'image de l'arrière-plan principal devient disponible dans l'outil de conception de thème :
- UI
- Thème
- Personnalisé
- Arrière-plan
Lorsque vous importez une nouvelle image personnelle, de nouvelles options se déverrouillent (alignement/répétition/défilement).
Une couleur de fond est automatiquement définie en fonction de la couleur dominante de l'image.
Après avoir sauvegardez, les valeurs sélectionnées seront intégrées dans la variable.
Options | Valeurs disponibles |
---|---|
Image de font image |
https://my_background.jpg
|
Alignement position |
top left
top center
top right
bottom left
bottom center
bottom right
|
Répétition Repeat |
repeat
no-repeat
repeat-x
repeat-y
|
Défilement attachment |
scroll
fixed
|
Thème de couleur principal color |
#000000
|
Image d'arrière-plan réactive
Dans tous les thèmes officiels distribués à partir de 2016, Blogger fourni une image d'arrière-plan réactive via la variable body.background
qui est utilisée dans l'inclusion universelle responsiveImageStyle
.
