Thread

I have created an EE template which is a stylesheet that enables the user to change the background image for the page by updating a channel entry.

I have the code working using an id on the body tag but I am wondering if it is possible to use a conditional that looks at segment 1 and changes the style on the fly, here is my code that works using an id:

{exp:channel:entries channel="background_images" url_title="home-background" limit="1"}
body#home { background: url({page_background_image}) no-repeat fixed; }
{/exp:channel:entries}

If I wrap it in a conditional it does not work:

{if segment_1 == ""}
{exp:channel:entries channel="background_images" url_title="home-background" limit="1"}
body { background: url({page_background_image}) no-repeat fixed; }
{/exp:channel:entries}
{/if}

My question is do conditional statements work in stylesheets that are saved as templates and output using the path tag, or am I just missing something?

Thanks

Gareth

Refer to this page in the documentation.
http://ellislab.com/expressionengine/user-guide/troubleshooting/templates/php_and_ee_tags_not_parsed_in_css.html.

So if your going to make it work you’ll have to have an internal stylesheet in the head of the document. That said you can definately do what you’ve illustrated above there. I would recommend putting the whole <style></style> tag within the if statement, that way it doesn’t show if the specific segment isn’t available

Thanks for the link to the EE docs, I hadn’t come across that page.

My conditional code works if I embed the style in the head of the document but It seems a shame that you have to do this instead of being able to use a CSS template.

It would appear that the CSS template can’t determine what segment_1 is and this is why the conditional doesn’t work, for now I think I will stick with Option 1 as at least I can use this in an external style template.

What about using a separate style sheet that would override the main style sheet? It would keep the styles out of the head of the doc and would only load on the homepage. If your only declaring a couple of styles on the sheet it shouldn’t be a big deal as far as performance goes. Run an if statement to check the segment for the homepage and load the additional CSS file only if needs it.

Yeah that would work great if I was just doing it for the home page.

To expand on what I am doing:

I have created a channel called background images and in this channel I have created individual posts for 11 separate main pages. The idea being is that the client would like to be able to change the background image on all 11 main pages, they simply upload an image against the correct channel entry and this then changes the image on the background using the CSS template above.

Everything works great so long as i don’t use the conditionals, I have attached my complete file which is used to override the main styles.

I ran across this. There is a way I think
http://ellislab.com/expressionengine/user-guide/templates/globals/stylesheet.html

In the section:
Using Tags and PHP in a Stylesheet
Looks like you have to call the stylesheet using the {path_name} parameter.

When you use the {stylesheet} tag to call the stylesheet it tries to optimize your css through the system. This way should allow you to use any tags you like in the css.

Maybe you can serve up your normal page styles in:

style.css (using the {stylesheet} tag for max optimization)

And then put an additional

backgrounds.css (this would use the {path_name} parameter with all of your different #ids but would be much smaller document).

Try it out. As long as it doesn’t take a long time to parse it should work.

Thanks for this- I am already using the path {path} parameter. The issue is that it doesn’t appear to recognise the segment variable so I can not use a conditional which looks at segment 1.

did you try:

dynamic=“no”, in your channel parameters. It looks like what you have should work, but sometimes the dynamic parameter messes up segment variables.

Yes I have tried that to. Looks like the first example is the best and only way to do this. Thanks for your ideas though.