Gérer facilement ses couleurs de site avec les CSS et Smarty

[airelibre]

Bonjour à tous,

Voici la copie d'une astuce que je viens de poster sur le forum anglais - Ça pourra peut-être servir

Je vais vous expliquer une technique très simple pour gérer les couleurs sur son site facilement via les CSS et les variables Smarty. Au final, vous disposerez d'une feuille de styles dédiée aux couleurs, et depuis laquelle les couleurs seront reprises pour l'ensemble de vos feuilles de styles. Comme généralement on utilise une palette assez précise pour un site, cela peut faire gagner du temps en cas de changement de couleurs, ou pour éviter d'avoir à aller rechercher le code HTML de LA bonne couleur au sein d'une autre feuille de styles (qui n'a jamais eu ce problème ? )

Tout d'abord, créez une nouvelle feuille de styles en allant dans Disposition / Feuilles de styles / Ajouter une feuille de styles. Appelez-la "Couleurs" par exemple.

Dans cette feuille, notez vos couleurs en utilisant cette syntaxe :
[[assign var='Bleu' value='#07addc']]
[[assign var='Rose' value='#e40087']]
[[assign var='Noir' value='#282425']]

Il s'agit d'une syntaxe Smarty classique, excepté que les accolades {} sont remplacées par des crochets [[ ]] - Ceci est nécessaire car les accolades sont réservées à CSS dans les Feuilles de styles.

Enregistrez la feuille et assignez-là à votre / vos gabarits.
Placez ensuite cette feuille de styles en premier dans la liste de vos feuilles de styles associées à chaque gabarit. Comme le gestionnaire de CSS récupère les feuilles de haut en bas, cela vous permettra d'avoir vos futures variables de couleurs disponibles sur toutes les feuilles de styles.

A présent, dans votre autres feuilles de styles, vous pouvez accéder à vos couleurs de cette manière - Par exemple pour la couleur des liens et titres :
a {color: [[$Bleu]]}
h1 {color: [[$Rose]]}

Et voilà ! Et nous n'avons qu'effleuré toutes les possibilités qu'offre smarty au sein des feuilles de styles

N'hésitez pas à partager vos astuces sur ce même thème