First time here? Check out the FAQ!
1

How to use template tags in stylesheets?

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.

maebert's avatar
133
maebert
asked 2011-12-09 15:27:25 -0500
edit flag offensive 0 remove flag close merge delete

Comments

add a comment see more comments

2 Answers

2

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's avatar
96
byron
answered 2011-12-11 14:01:48 -0500
edit flag offensive 0 remove flag delete link

Comments

add a comment see more comments
1

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.

Evgeny's avatar
13.2k
Evgeny
answered 2011-12-09 15:52:48 -0500, updated 2011-12-09 15:57:24 -0500
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's avatar maebert (2011-12-09 16:00:46 -0500) 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's avatar Evgeny (2011-12-09 16:13:57 -0500) 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's avatar maebert (2011-12-12 03:20:04 -0500) edit
1

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's avatar Evgeny (2011-12-12 10:32:10 -0500) edit
add a comment see more comments