Ask Your Question
1

How to use template tags in stylesheets?

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

maebert gravatar image

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.

edit retag flag offensive close merge delete

2 Answers

Sort by ยป oldest newest most voted
2

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

byron gravatar image

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.

edit flag offensive delete link more
1

answered 2011-12-09 15:52:48 -0600

Evgeny gravatar image

updated 2011-12-09 15:57:24 -0600

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.

edit flag offensive delete link more

Comments

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

maebert gravatar imagemaebert ( 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 gravatar imageEvgeny ( 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 gravatar imagemaebert ( 2011-12-12 03:20:04 -0600 )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 gravatar imageEvgeny ( 2011-12-12 10:32:10 -0600 )edit

Your Answer

Please start posting anonymously - your entry will be published after you log in or create a new account.

Add Answer

Question Tools

Stats

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

Seen: 190 times

Last updated: Dec 11 '11