Tags in stylesheets


#1

Hi all.

I’m putting together a site with Radiant (love the ease of use and
flexibility – thanks to everyone involved in the project). From what
I’ve read in the mailing list archives, I should be able to use radius
tags in my stylesheet, just like other pages, to dynamically
create/change the content.

For example, if I wanted the background color of the “about” page to
be different than the other pages, something like this should work:

body {
background-color: #d7dba9;
<r:if_url matches="/about/">background-color: #009a3b;</r:if_url>
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
etc…
}

but it doesn’t.

My stylesheet is a Radiant page, just like the style.css created with
the type 3 (styled blog) install of Radiant. When I view the generated
css file in my browser, a blank line appears in place of the line with
the tags:

body {
background-color: #d7dba9;

font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
etc...

}

Any ideas? Have I missed something obvious? Thanks for any help.

PS. This is a trivial example. I could get the different colored
background easily with

in the page layout and body#about { background-color: #009a3b; } in the stylesheet.

#2

Keep in mind that your stylesheet is rendered just like a Radiant page.
If you’re linking it in the traditional pattern, <r:if_url /> will try
to match the URL of the stylesheet, not the HTML page being viewed. This
is because the request to get the stylesheet is not the same request as
the one to get the page.

You might try putting some code like this in your main layout:

...

Then in your pages that need specific changes to the style, make a
“styles” tab/part and dump the special styles in there. So on the
“About” page that has the url “/about/”, you could put this:

body {
background-color: #009a3b;
}

This would accomplish what you want, and be more flexible.

Sean


#3

Thanks Sean. I thought it might be something like that. Appreciate
your explanation.