Using TV in the CSS

Hello!
I'm working on a theme that should have custom color for background and special elements like links and some other details. I've defined template variable "colored" and tried to use ti in the style.css
.colored{
color: [[*colored]]
}
but it is not working so I tried to place the same code between <script></script> tags ad saved it in the chunk named "styleCSS" which Is called form the <head> area.
still no luck
The only thing that works for me is declaring "colored" value in the style attribute of the HTML tags, which I find as less elegant/flexible solution.
Is there some kind of alternative?

MODx tags can only be used in the HTML (in the page template), not in a CSS file.

You could use different css files for the various color options, say
style1.css, style2.css, ...

Then use a TV named colorstyle for the choice of the wanted style, with values style1, style2, ... and add something like this into the <head> of your template:

That should do it. ( Assuming that your css files are in assets/css/ )

You can make a document within MODX with content type of CSS rather than a physical file. You do this in the Settings tab. I imagine you then refer to it by document ID in your header and try to put TVs into the document. I'm not sure if MODX parses tags when the content type is set to CSS, but you could give it a try.

I'm sure this would work but it will require creating a new css for every new page - I already use this system and it doesn't even need any CMS
user must be able to pick colors the easy way, not writing a new css file |-)
Quote from: ottogal at Apr 01, 2013, 07:53 AM

MODx tags can only be used in the HTML (in the page template), not in a CSS file.

You could use different css files for the various color options, say
style1.css, style2.css, ...

Then use a TV named colorstyle for the choice of the wanted style, with values style1, style2, ... and add something like this into the of your template:

<link href="[[++assets_url]]css/[[*colorstyle]].css" rel="stylesheet" type="text/css">

That should do it. ( Assuming that your css files are in assets/css/ )

Yes, it will parse TVs; it's a resource like any other. The only difference is the HTTP headers and the alias suffix MODx uses. But remember, the TV will be that belonging to the css resource itself, not the resource that the page being viewed was generated from. Since CSS files (or resources) are requested independently by the browser, and the server neither knows nor cares why the browser requested it, it would be difficult to specify which resource you wanted the TV value for.

Usually I use a small style block in the template head to deal with TV-based style directives.

thank you!
I've made a silly mistake - in the styleCSS chunk, css code must be placed in <style> not <script>.

Quote from: sottwell at Apr 01, 2013, 08:37 AM

Yes, it will parse TVs; it's a resource like any other. The only difference is the HTTP headers and the alias suffix MODx uses. But remember, the TV will be that belonging to the css resource itself, not the resource that the page being viewed was generated from. Since CSS files (or resources) are requested independently by the browser, and the server neither knows nor cares why the browser requested it, it would be difficult to specify which resource you wanted the TV value for.

Usually I use a small style block in the template head to deal with TV-based style directives.

I actually had a similar task a few weeks ago and I solved it with the client-config extra and a little plugin I wrote.


Basically I use the Clientconfig CMP to set the desired css colors (or whatever, think of a very primitive SASS/LESS preprocessor...) so they get available as for example [[++css.color.main]].

I want these to get processed in a static css file (not a resource bc I don't like to have css-resources...or any css/js in the modx db at all...I want to have these outside of the manager as "normal" static files, nicely organized in a folder =D) so that's where the plugin comes in. It's attached to this post.

Steps to setup:

1. Download and install clientconfig from the packagemanager
2. Make a group and a setting like css.color.main, give it a color code like #FF0000, orange, rgb(0,0,0) or whatever is accepted as a value for that css rule...
3. Create a new plugin with the code from the attached file in it, activate it on the system events "OnBeforeCacheUpdate" and "OnHandleRequest". For the OnHandleRequest event you need to set the priority (last field in the grid) to 100 for example, because clientconfig also runs on that event and the plugin needs to run after it...
4. You can create two new system settings called "processstatix.paths" and "processstatix.extension" (these could also be set in clientconfig, whatever you prefer). By default the paths are "assets/site/css/" and "assets/site/js/", you can provide a comma separated list of paths where the plugin should look for files with the extension specified in "processstatix.extension" which is by default "process" but you can set it to whatever you like, just be sure that the files that should be processed have that extension AND the real extension...see next point.
5. go to your path, for example "assets/site/css/" and create a new file there with let's say the name "base.colors.css.process", add some rule like:



6. clear the cache and reload the page (frontend)
7. go to your assets/site/css/ folder and there should be a new file "base.colors.css" which has the placeholder parsed with the value you set in clientconfig...

Annotation: This isn't limited to css, you can process ANY kind of static files (css,js,json whatever) with MODx tags in it (it's also not limited to system settings, you can use whatever MODx tags that are available, but as susan said, TV's are resource specific, so a system setting would may be a better place to set things like css colors...)...I actually didn't test it with TVs, but it should work, and if not, tell me =D

EDIT: And you should set the $debug variable to "false" or you will have quite some spam inside your error log =D...I can't remove the first attachment, so you have to change this yourself when pasting in the code... [ed. note: exside last edited this post 13 years, 6 months ago.]