Forum CMS Made Simple FR
Gérer facilement ses couleurs de site avec les CSS et Smarty - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Ressources (https://forum.cmsmadesimple.fr/forum-4.html)
+--- Forum : Développement et Astuces (https://forum.cmsmadesimple.fr/forum-15.html)
+--- Sujet : Gérer facilement ses couleurs de site avec les CSS et Smarty (/thread-1648.html)


Gérer facilement ses couleurs de site avec les CSS et Smarty - airelibre - 14/12/2011

Bonjour à tous,

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

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 ? Wink )

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 Smile

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

Gérer facilement ses couleurs de site avec les CSS et Smarty - bess - 23/12/2011

je rebondis sur le sujet pour dire que [[root_url]] est également disponible par nature dans les feuilles de styles. pratique pour définir des liens complet vers les images

et autre astuce : j'ai dupliqué le plugin /plugins/function.root_url.php que j'ai renommé pour l'occasion function.cdn_url.php

son code :

Code :
[== PHP ==]
function smarty_function_cdn_url($params, &$smarty)
{
    global $gCms;
    $config = $gCms->GetConfig();
    return $config['cdn_url'];
}

function smarty_cms_help_function_cdn_url() {
       echo " :) ";
}

function smarty_cms_about_function_cdn_url() {
    echo " :) ";
}
?>

vous ajoutez dans votre config.php :


Code :
$config['cdn_url'] = 'http://static.exemple.fr';

ce qui vous permet maintenant d'utiliser [[cdn_url]] dans votre css et {cdn_url} dans vos gabarits et pages.


Alors question à quoi servira d'utiliser deux urls différentes ?

1- un navigateur ne lance que 10 requêtes http simultanées par domaine => vous passez à 20 en feintant
2- permet d'ajuster la politique du serveur pour les requêtes passant par le sous domaine static : pas de cookies, mise en cache plus longue, suppression des ETag ...
3- permet d'externaliser sur un vrai dns (amazon, cloudflare) les data et de ne conserver sur votre serveur que le code php
4- permet d'avoir dans les statistiques d'accès serveur une meilleur vue de la consommation de la BP et éventuellement mettre le doigt plus facilement sur les zones trop gourmandes (une image trop lourde, trop téléchargées, pas mise en cache, ...)

et bien évidement le tout avec zéro modification des fichiers sources hormis cette petite ligne dans config.php Smile

Gérer facilement ses couleurs de site avec les CSS et Smarty - spamor - 16/02/2012

2 astuces (assign var pour les couleurs et root_url) que j'utilise depuis quelques temps déjà, et qui exliquent pourquoi j'aime tant ce cms : la possibilité d'insérer du smarty, donc dynamique, dans les feuilles de style Smile Smile Smile

bess a écrit :ce qui vous permet maintenant d'utiliser [[cdn_url]] dans votre css et {cdn_url} dans vos gabarits et pages.

Par contre j'utilisais un sous-domaine jusqu'ici, en dur dans ma feuille css ; je vais gagner du temps avec cette astuce merci !

Gérer facilement ses couleurs de site avec les CSS et Smarty - heriquet - 16/02/2012

+1 ! Bess et Airelibre présidents !

Gérer facilement ses couleurs de site avec les CSS et Smarty - jissey - 16/02/2012

Faillot!

Gérer facilement ses couleurs de site avec les CSS et Smarty - heriquet - 16/02/2012

Bon allez pour préserver les susceptibilités : Bess et Airelibre présidents et jissey premier ministre... Big Grin

Gérer facilement ses couleurs de site avec les CSS et Smarty - bess - 17/02/2012

jaloux ! :lol:

Gérer facilement ses couleurs de site avec les CSS et Smarty - airelibre - 17/02/2012

Merci merci Smile

Gérer facilement ses couleurs de site avec les CSS et Smarty - heriquet - 17/02/2012

Ils ne nient pas leurs intentions... 'serais pas étonné de les voir demain soir au JT de TF1 pour "s'adresser aux francais"... Big Grin

Gérer facilement ses couleurs de site avec les CSS et Smarty - spamor - 26/03/2012

Un petit "up" pour préciser ceci concernant les variables de couleurs des feuilles css : si vous associez 2 css ou plus à votre gabarit, les variables ne doivent être déclarées que dans la première des deux. Puisque cmsms va ensuite créer une feuille de style "combined" Smile

Gérer facilement ses couleurs de site avec les CSS et Smarty - airelibre - 26/03/2012

Merci pour l'ajout

Pour ma part, après quelques modifications, j'en suis arrivé à une configuration un peu différente. J'ai à présent mes déclarations de couleurs dans un bloc de contenu globaux, mais en langage smarty classique.

J'appelle alors mon bloc de contenus non pas dans la feuille de styles, mais dans le gabarit de la page, avant le <body>. Cela me permet d'avoir accès à mes couleurs n'importe où (css, templates, etc..). Même si généralement elles ne sont utilisées que pour les feuilles de styles, il arrive parfois qu'on puisse en avoir besoin directement dans le code