Populaire
ThéorieRéférences XMLTypes des variables d'habillage

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

Les arrière-plans [background]
Le terme background est employé pour qualifier une variable d'habillage.
Une variable de type background contient les paramètres d'un arrière-plan.

Syntaxe

Les variables d'habillage sont définies dans l'éditeur XML du modèle, entre les balises <b:skin></b:skin>. Elles permettent de reporter une valeur dans la section des CSS ou/et dans le reste du modèle 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 contenant un code de couleur.
Cette valeur pourra être intégrée dans la valeur des attributs default ou/et value sous la forme d'une variable $color.
facultatif
default La valeur par défaut de la variable. obligatoire
value La valeur courante de la variable. obligatoire


La valeur

La valeur attendue doit contenir les paramètres 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 d'en extraire sa valeur dans la section 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 post.background, sa syntaxe de sortie sera $(post.background).
A savoir : Les parenthèses ne sont requises que si le nom de la variable contient un point.

Définition de la variable
<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" />

Intégration de la variable dans les CSS
.post-body {
  background: $(post.background);
}

Rendu HTML
.post-body {
  background: #539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center;
}


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.
La donnée convertie, devient de type string et peut être injectée dans des expressions.

post.background devient : data:skin.vars.post_background.

Balise de sortie data
<data:skin.vars.post_background/>

Pour extraire uniquement l'url de l'image d'arrière-plan, il faut ajouter le suffixe image à la donnée.

data:skin.vars.post_background devient : data:skin.vars.post_background.image.

Balise de sortie data
<data:skin.vars.post_background.image/>

Et pour vérifier si cette image est redimensionnable avec les opérateurs d'image, il faut ajouter un 2e suffixe à la donnée : isResizable.

data:skin.vars.post_background.image devient : data:skin.vars.post_background.image.isResizable.

Dans une condition
<b:if cond='data:skin.vars.post_background.image.isResizable'>

</b:if>

Compléments :


Image d'arrière-plan principale

Le nom de la variable body.background permet de définir l'image principale d'arrière-plan du modèle.

<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 modèles :

  • Tableau de bord
  • Modèle
  • Personnalisé
  • Arrière-plan


Dernière modification :
Assistance publique pour le produit Blogger sur les Forums d'aides :

Certifiée par Google - Experte Platine TC (Ambassador & Advanced Troubleshooter):
  • Affectation Google France, produit Blogger, du 11/07/2011 au 28/07/2014.
  • Affectation Google US, produit Blogger depuis le 28/07/2014.

Posts les plus consultés de ce blog

DéveloppementsFichiers XML
Favicons multi-sets [icon / apple-touch-icon / msapplication]
Populaire
ThéorieRéférences XMLParamètres des données
Le paramètre Image redimensionnable [isResizable]
Populaire