Manage layout colors easily with CSS and Smarty vars
Posted: Wed Dec 14, 2011 6:51 pm
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 !
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 !
