Manage layout colors easily with CSS and Smarty vars

[airelibre]

Hi,

As we just discussed about it througt Twitter, here's a litte tip to easily manage the colors of your layout / templates in the css stylesheets. Thank to @calguy1000 for his contribution, and to @Bovelett who asked me to create this post.

With this technique, all you have to do if you want to change a color in your layout is to change it in a main "colors" stylesheet instead of having to change it in each element style.

First, create a new stylesheet in Layout / Stylesheet - Call it "colors" for example.
In this file, you will define some colors vars in the smarty style - The only difference is that you have to use [[ and ]] instead of { and } which are reserved to the CSS syntax

[[assign var='MyBlue' value='#07addc']]
[[assign var='MyGrey' value='#626262']]

Save your stylesheet, assign it to your template(s), and put it in the first position, before all other stylesheets.

Then, in the other stylesheets, instead of using :
a {color: #07addc}

You can use :
a {color: [[$MyBlue]]}

That's all !

For you information : before using that, I created a Global Content Block with the colors - It works too, but you have to load you GCB at the beginning of each stylesheet. The other disadvantage is that you have to clear the cache when you change a color. The CSS technique explained here is better.

Thanks for listening, sorry for my english, and give some comments if you have other techniques !

[Bertus]

Works great! Good tip!

[airelibre]

Thanks - I'm doing more tests, but I have to clear the cache too with this method - You too ?

[Bertus]

No, I don't need to clear my cache when adjusting the smarty var.

When adjusting
[[assign var='color1' value='red']]

to
[[assign var='color1' value='blue']]

(in the same stylesheet) it is instantly being updated on the frontend.

I'm only using {cms_stylesheet} in my template.

[airelibre]

And in a different stylesheet ?

[scelle]

Haven't tried it, but I think it's an useful trick. Thanks to everyone involved.

As for he caching, I believe your problem is the browser caching, not server caching. Try hitting F5 (Ctrtl + F5 on Firefox) and see what happens.

[airelibre]

I tried but it's the same.. strange