How to use template tags in stylesheets?

livesettings
css
template
retag add tags

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.

133

maebert

asked 2011-12-09 15:27:25 -0600

edit flag offensive 0 remove flag close merge delete

Comments

add a comment see more comments

2 Answers

Sort by

oldest

newest

most voted

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.

byron

answered 2011-12-11 14:01:48 -0600

edit flag offensive 0 remove flag delete link

Comments

add a comment see more comments

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.

13.2k

Evgeny

answered 2011-12-09 15:52:48 -0600, updated 2011-12-09 15:57:24 -0600

edit flag offensive 0 remove flag delete link

Comments

Mh, that eases the development of CSS, but it still doesn't allow me to change theme parameters via the live settings.

maebert (2011-12-09 16:00:46 -0600) edit

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 (2011-12-09 16:13:57 -0600) edit

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 (2011-12-12 03:20:04 -0600) edit

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 (2011-12-12 10:32:10 -0600) edit

add a comment see more comments

How to use template tags in stylesheets? edit

Comments

2 Answers

Comments

Comments

How to use template tags in stylesheets?