Pour utiliser l'outil de création de modèles avec le code CSS du modèle de votre blog, suivez les consignes ci-dessous.
Configurer les variables
La section <head> de votre code doit contenir une paire de balises <b:skin> </b:skin>.
Les déclarations de style CSS doivent être insérées entre ces balises, ainsi que les noms des variables qui garantissent la compatibilité de votre présentation avec la page "Polices et couleurs".
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>Le code CSS compris entre les balises de commentaire /* et */ n'apparaît pas sur votre blog.
Une liste des variables (une pour chaque police ou couleur que vous souhaitez pouvoir modifier dans l'onglet "Polices et couleurs") s'affiche à cet endroit. Chaque variable doit être associée aux informations figurant dans l'exemple ci-dessus et décrites ci-dessous :
- name (nom) : peut contenir des lettres et des chiffres. Chaque nom inclus dans votre modèle doit être unique.
- description : ajoutez une description qui apparaîtra dans la section "Polices et couleurs".
- type : "font" (police) ou "color" (couleur).
- default (par défaut) : valeur par défaut. Pour les couleurs, il doit s'agir d'un code hexadécimal du type #FF0066. Pour les polices, la valeur par défaut est une liste au format font-style font-weight font-size font-family.
Utiliser les variables
Une fois les variables configurées, saisissez $variable_name dans le code css b:skin lorsque vous souhaitez utiliser la valeur d'une variable.
L'outil de création de modèles permet de modifier certains types de variables CSS spécifiques. Lors de la configuration du type de variable :
- Les variables de couleur proposent une palette à partir de laquelle vous pouvez sélectionner des couleurs dans l'outil de création de modèles.
- Les variables de police proposent une sélection de polices, ainsi que les options "taille", "gras" et "italique" dans l'outil de création de modèles.
L'exemple ci-dessus contient une variable nommée bgcolor et définie sur blanc (#fff). La ligne suivante contient le code background: $bgcolor, qui permet d'activer un arrière-plan blanc. Vous pouvez modifier cette valeur dans la section "Polices et couleurs".
Remarque : Il est inutile de créer des variables pour les autres types d'attributs CSS. Ceux-ci peuvent être inclus dans le code CSS comme dans n'importe quelle autre situation (par exemple, avec les attributs margin: et padding: comme ci-dessus).