Les variables dans un modèle Blogger

Ceci est la quatrième partie d'une série de 4 articles sur la création d'un modèle Blogger. Ecrit par Thur, cette série n'est peut-être pas un guide complet sur la création d'un modèle Blogger, mais elle vous permettra d'avoir une plus grande compréhension de la structure des modèles Blogger et de la façon qu'il vous faut les manipuler.

L’un des avantages de modèle pour le nouveau Blogger est l’utilisation des variables (bien qu’elles ne sont limitées qu’aux polices et aux couleurs).

Comme expliqué au premier article de cette série :

Notez

<style type="text/css">
<!-quelques styles css ici -->
</style>

est remplacé par :

<b:skin><![CDATA[/*
*/
<!-quelques styles css ici -->
]]></b:skin>

Les variables sont insérées entre les balises de commentaire /* */, comme ceci :

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="" description="" type="" default="" value="">

*/
<!-Quelques styles css ici -->
]]></b:skin>

Comme vous pouvez le constater, la variable a quelques attributs obligatoires :

name (nom): Un identifiant technique unique;

description: ladescription du nom (name) - comme elle apparaîtra sur la page de modification des Couleurs ;

type: 'color (couleur)' ou 'font (police)' - rien de plus, hélas!;

default: the default value : valeur par défaut, peut être le nom d’une couleur (ou son code hexadecimal ) ou encore la valeur de la police (style de la police, taille de la police, etc. = font-style font-weight font-size font-family).
;

value: nouvelle valeur - peut rester vide;

Voici deux exemples (pour chaque type):

<b:skin><![CDATA[/*

Variable definitions
====================

<Variable name="textcolor" description="Couleur du texte"
type="color" default="#ccc" value="#cccccc">

<Variable name="bodyfont" description="Police du contenu"
type="font" default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif">

*/
<!-- Quelques styles css ici -->
]]></b:skin>

Il faut noter que :

Pour chaque police ou couleur, vous pouvez utiliser des variables prédéfinis dans votre code CSS

Voici deux exemples (pour chaque type):

A la place de

body {
color: #CCC;
font: italic bold x-small 'Trebuchet MS', Trebuchet, Verdana, Sans-serif;
}

on peut écrire

body {
color: $textcolor;
font: $bodyfont;
}

Ainsi vous pouvez définir des couleurs séparées pour les couleurs des polices (fonts), liens (links), fond (backgrounds), bordures (borders), et cetera ... et différencier la police pour les articles, les commentaires, les liens, les colonnes latérales, l’entête, et cetera.

Ainsi, vous n’aurez plus à aller toucher au code html de votre blog pour changer une couleur ou une police. Vous pouvez tout contrôler en allant sur Mise en page, puis «police et couleur » à partir de votre tableau de bord.

Vous aurez compris que dans un modèle blogger, la grande partie se joue dans le code css (pour définir l’habillement, la disposition des chaque partie, etc.). Il ne vous reste plus qu’à chercher un bon tuto sur le csss pour approfondir vos connaissance sur la question.

Vous pouvez voter pour cet article sur : Scoopeo !TapemoiBlogastyWikioDiggons

Si cet article vous a plus, vous pouvez souscrire à mon feed rss ou à ma newsletter pour rester à jour ou encore rejoindre ma communauté sur Mybloglog et celle sur Blogcatolog. N'oubliez pas d'ajouter ce blog à vos favoris sur Technorati.