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

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 . (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(skin). 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 attributs default 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 format b: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)

Pour construire le récipient, il faut reprendre le nom de la variable, l'encadrer de parenthèses (obligatoire, si le nom contient un point) et ajouter le préfixe $.

Conversion au format XML

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

<!-- TypeOf Skin Background - XML demo. Compatibility : Gadget Version 1 & 2. Created and provided by Blogger Code PE. Author : Soraya Lambrechts URL : https://bloggercode-blogconnexion.blogspot.com/2016/09/skin-type-background.html --> <b:includable id='main'> <b:comment>Example</b:comment> <b:if cond='data:skin.vars.body_background'> La valeur de l'arrière-plan principal est :<br/> <code><data:skin.vars.body_background/></code> <b:else/> Ce thème n'a pas de variable d'arrière-plan principal. Installez un thème officiel Blogger. </b:if> </b:includable>

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.

Échantillonnage des ressources

  image: image,
  color: color(skin)

Pour pouvoir utiliser ces réglages, il suffit d'ajouter ces items au nom de la donnée.
En savoir plus

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.
En savoir plus

Les autres types de données

• array
• automatic (skin)
• background (skin)
• boolean
• color (skin)
• date
• font (skin)
• image
• length (skin)
• locale
• message
• number
• object
• string
• string (skin)
• url
• url (skin)

Retourner à l'introduction