Answered Can Template Variables be used in stylesheets?

I'm trying to do something that at first seemed rather simple. I want to have a different background image for each page. My template provides one in the stylesheet using the background: CSS tag.

While reading the prior posts like a good boy should, most suggested using Template Variables to do this. I made a TV (called it body_bg) and it created a dropdown in my page manager where I can select which image I want to use. I can force it to work partially by inserting the [[*body_bg]] code in the <body style=...> of my template, but to keep compliant with proper HTML protocols and to be able to use no-repeat as well, I'd like to put this in my CSS where it belongs.

Try as I may, I can't seem to get it to work. Am I doing something wrong? Or is what I'm doing totally wrong for TV use? If so, does anyone have suggestions on the right way to do this?

Thanks,
David

Your .css file is a separate request from the MODx page, so the .css file is not parsed by the MODx parser.

The best way to do this is to have a small <style>...</style> block in your template's head, and use the TV there; or as you were doing have a style attribute in the body tag using the TV.

"have a small block in your template's head"

Maybe the block is in my own head, but since I'm new to MODx, how would I do this?

I'm the "lowest common denominator" in our company. If I can figure this out, then we'll consider transitioning our random assortment of unsupported and out of date CMS's to MODx.

Something along these lines would work:

Just like this (template simplified):


You can definitely figure this out, and you should definitely consider switching everything to MODx. You won't regret it

Thanks guys, I'll give those a try. Breezer, I'm not one to correct people, especially those who know more than I do, but shouldn't that be [[*body_bg]] if I'm using Revo instead of Evo?

No, the code I posted is the correct syntax for an Evo TV , the code Lucas posted uses the Revo TV syntax

That's what I thought. Apparently the forum didn't like me including the code in my comment because it snipped it out and messed with what I wanted to say.

It works now, thanks!!

You can set up CSS and JS files as MODx pages inside the manager, and then they would be able to use all the placeholders. So in your template, you could reference the MODx-generated CSS file by its id, e.g.



However, I don't recommend this approach unless you need to control access to the CSS files and the standard FTP method won't cut it: serving dynamic pages takes more time and resources, so if you want to keep your site as lean and fast as possible, you'd use as many static resources as possible (e.g. put your CSS file on a CDN).

I know it may not be totally kosher semantics, but I think it's acceptable to put a <style> tag directly into your page templates so you can use all the MODx placeholders. There are a lot of ways to skin this cat... play around with it and see what works for you.

@Everettg_99: That would not help the poster with his problem anyway. Any TVs in the css resource would refer to that (css) resource, not the already parsed, generated and served page that is requesting it for a .css file.