I’ve created a TV to select the heading color for each page, and I’m using css to style it. I want to have the css in an external style sheet, rather than inline, but I’ve worked out that putting the reference to the TV in the stylesheet doesn’t work.
How would I do this?
The easy way is just getting the tv to output words like: Red==red||Blue==blue||White==white (input Options)
default option: default
and then call it like <link href="assets/css/[*tv*].css" rel="stylesheet" type="text/css" />
and then name the files this way.
I actually want to be able to input any hex value, so that won’t work. As far as I can tell, the simplest way is to declare the affected styles in the template below the stylesheet include statement, but I was hoping for a more elegant solution...
Black==000||White==fff
<div style="background-color:#[*tv*];">...
I’m trying to keep my styling & content separate, but you don’t think there’s a way to do what I described?
Thanks for your help.
If you don’t want to use MODx-tags use regular html links...
//or call chunks Black=={{black}}
and have clean html w/o tags in the chunk.
-
☆ A M B ☆
- 24,524 Posts
You could put the <style...> block in a chunk and use your TVs in the chunk, then just have the chunk in your template head.
However, I have found that in web design as in most areas of life, there is a happy medium between a fanatical adherence to rules such as "separation of style and content" and complete chaos, and a small <style...> block does not really hurt anything. I often also prefer to have a conditional IE block with the required hacks for IE than to require the page to request and upload another file just for that.
