Calling a TV in a stylesheet

My first post on the forums! Hi everyone!

Im working on a website for a client (and my first one using ModX Revolution) and I have a query which Im hoping someone can advise me on.

The website that I am making for my client has 5 different style sheets (for colours) which I created a TV so that they can choose a number, that number then ammends to the end of the calling of the stylesheet, thus calling the correct css document and rendering the page in that colour. Now this works fine and dandy, but ive decided i want to incorporate everything into Modx.

What i would like to do is make a css document and call the TV from the template to manipulate the TV called in the CSS.

An example.

Page made selects from the TV’s option 1. The page calls the CSS file (made within modx), and it changes the variables based on the selection, page renders with the correct option.

Now i thought this would be as simple as calling the TV in the CSS, however it didnt work...

Can anyone advise me on a way to do this - do i have to load a snippet with the TV in? Or am i over complicating things? I just dont want to add 5 seperate CSS documents when changes might be made to one, I would then have to replicated them to the other 4...

Thanks in advance

Graeme

Try putting a tag for the TV in the line in the template that specifies the CSS file:

For Evolution:



For Revolution:

Thats what im doing already. Which is fine, but it means I need a style sheet for each variation.

I want to have one stylesheet but with the TV’s inside where needed to envoke the corrent attribute. i.e

body {background :url([[*mytv]].jpg)}

If there’s just one line in your CSS file that needs to call the TV value, you could extract that one line and embed that style element in the head of your template with the TV call in it. That way you still only have one stylesheet, but you’ve removed the variable part and put it in the head.

Hope I’ve understood your question and my suggestion makes some sense.

Thats a good idea. Nice one, Im after a completely tidy look however...

One thing im thinking to do, is to make the CSS an actual snippet, and see if that works...

I don’t see any reason why this wouldn’t work:



You can also use a snippet to create the CSS (possibly just the part that will change) and insert it with:

When you have one CSS resource, which changes per page, you’re losing out on client side caching.

Where on my site they would cache the CSS file on their entry page and don’t have to bother reloading it, in your case it would have to be be retrieved every time again. Which is why I agree with Mary:
Quote from: einsteinsboi at Feb 22, 2011, 02:12 AM

If there’s just one line in your CSS file that needs to call the TV value, you could extract that one line and embed that style element in the head of your template with the TV call in it. That way you still only have one stylesheet, but you’ve removed the variable part and put it in the head.

Hope I’ve understood your question and my suggestion makes some sense.

Ive now just got one CSS with the relavent changeable aspects put in the head of each template. Easy enough

Hi guys Sorry to dig up an old thread but this one keeps coming up high in Google so I thought it would be the best place to get help, and for future searchers.

I'm having the same problem re embedding a TV in a CSS file. I thought the following would work fine but it doesn't.



All it spits out in the rendered CSS is what you see above, no TV value is called.

In the back-end (MODx Revo 2.2.4 Traditional) I have a template variable called "header-logo-hover" assigned to all templates, it has an input type of image, and an output type of text.

Any idea what I'm doing wrong??

Thanks heaps!
Harmony

Specs

• MODx Revolution 2.2.4 Traditional
• Running on a standard apache / php server (latest versions of everything)
• Testing on a Windows 7 PC on Firefox

The only way a TV (or any other MODx tag) can be used is if the content is passed through the MODx parser. An external .css or .js file is called directly from your browser; MODx has nothing at all to do with it.

The best thing to do is to take that one line out of your .css file and put it in a style block in the template's head.

Using a MODx resource for your CSS file could work, but you would need a snippet that had some way of determining which resource was being viewed in the browser and fetching that resource's value for the TV. A few lines in the template's head is much more efficient.