Variables d'habillage - Les arrière-plans [background]

Le terme background est employé pour qualifier une variable d'habillage Blogger.
Une variable de type background contient les paramètres d'un arrière-plan comme la couleur et l'url de l'image.
Une variable de type background contient les paramètres d'un arrière-plan comme la couleur et l'url de l'image.
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 . (point) peut être utilisé.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. Cette valeur pourra être intégrée dans la valeur des attributs default ou/et value sous la forme de la variable $color . |
facultatif |
default |
La valeur par défaut de la variable. | obligatoire |
value |
La valeur courante de la variable. | obligatoire |
Exemple
<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 attributsdefault
et value
doit contenir les paramètres standards CSS de l'arrière-plan.Syntaxe de la valeur
color image repeat attachment position
Exemple
#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 formatb:skin
pour l'employer dans les CSS, ou au format XML pour extraire la valeur à l'extérieur des CSS.Conversion au format b:skin
$(variable.name)
Conversion au format XML
<data:skin.vars.variable_name/>
Paramètres additionnels
Les variables de type background contiennent un objet d'items qui permettent d'extraire séparément l'url de l'image et le code de couleur.Ressources
variable type background: { "image": image, "color": skin(color) }
Pour pouvoir utiliser ces paramètres, il suffit d'ajouter ces items au nom de la donnée.
En savoir plus
Image d'arrière-plan principale
body.background
est un nom de variable réservé, qui permet de 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" />
Le choix de l'image sera disponible dans l'outil de conception de thème:
- Tableau de bord
- Thème
- Personnalisé
- Arrière-plan
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 variablebody.background
qui est utilisée dans l'inclusion universelle responsiveImageStyle
.En savoir plus
Les autres types de données
- array
- automatic (skin)
- background (skin)
- boolean
- color (skin)
- date
- font (skin)
- image
- length (skin)
- locale
- number
- object
- string
- string (skin)
- url
- url (skin)