How to use template tags in stylesheets?

Question

asked Dec 09 '11

133 ● 1 ● 2 ● 12
http://www.portwempreludi...

I'd like to be able to use the template syntax in style.css to say things like

a {
    color: {{ LINK_COLOR }};
}

To re-use a few global colour and style definitions throughout the template. Is it possible to pass stylesheets through jinja before including them?

Furthermore, I'd like to have such skin-specific settings accessible through the administration interface - what's the best approach there? Can I somehow include a file in the skin's directory that defines the possible parameters for the skin? How would I include this in the livesettings? The obvious advantage is that it would be easier to generate variants of the same skin, ie. different color themes or the choice between different fonts.

Answer 1

answered Dec 11 '11

byron

61 ● 1 ● 5
http://byroncorrales.blog...

As Evgeny said, with less you can define variables with differents purposes. The generals colors used in the template are define in the lib_style.less file, for example:

/* Variables for Colors*/

@header-color:#16160f;
@link:#1b79bd;
@question-link:#464646;
@button-label:#4a757f;

You can add your custom colors in this area to follow the same logic.

Answer 2

answered Dec 09 '11

Evgeny

6715 ● 31 ● 49 ● 96
http://askbot.org/

updated Dec 09 '11

No way to use template tags in css, but there is an alternative.

Please edit style.less and then optionally compile it with lessc into style.css. We use lesscss system, which allows using named variables for the css and more. lessc compiler needs node.js installed on the system to work.

The style.less can be used directly by setting ASKBOT_CSS_DEVEL = True in your settings.py, then the .less file will be compiled in the browser.

Mh, that eases the development of CSS, but it still doesn't allow me to change theme parameters via the live settings.
maebert (Dec 09 '11)
Well, of course for the fastest performance it is best to serve css as a static file. If you are to modify the css via settings it would be best to output css into a file on disk when the setting is changed, that is we need to write code for the system to work that way.
Evgeny (Dec 09 '11)
Alright, I think my question was more on the livesettings rather than the CSS as such - I simply want to to throw in a few parameters to a skin that can be changed live and their settings be used in templates. Where's the best place to define them?
maebert (Dec 12 '11)
Currently the only way to do it is to put those parameters into <style><style> tags in the template via live settings, it is better to place that in templates/meta/html_head_stylesheets.html. There may be a more elaborate way with more coding - which would satisfy your requirement and keep the css file static. What parts of css do you want to be accessible via settings? Would it be enough to just edit snippets of css via either web interface or the console?
Evgeny (Dec 12 '11)

How to use template tags in stylesheets?

2 Answers

Comments

Your answer

Question tools

Stats

Related questions