Trying to create a style with {$page_alias}

[CapereSpiritum]

Hi All. Using CMSMS 1.10.3

I want to change a background image on a page.
Each image is named the same as the page alias. i.e. index.php?page=test-page should display a bg image called test-page.gif

If I write a style for every page, this will work. But I want a single style to do the job.

The html:

</__body class="{$page_alias}">

<div id="header2"> THIS IS THE DIV THAT WILL DISPLAY THE BG
<h2>{cms_selflink dir="start" text="$sitename"}</h2>
<hr class="accessibility" />
</div>

The style that works:

.{$page_alias} #header2 {
background: url([[root_url]]/uploads/images/test-page.gif) no-repeat right top; }

For the above style to work, I have to write a new style for every page and there will be 100's in time.

The style that fails:

.{$page_alias} #header2 {
background: url([[root_url]]/uploads/images/{$page_alias}.gif) no-repeat left top; }
Is the {$page_alias} bit not permitted in CSS? If so, do you know a work around?

Anyone done this or know how to do this?

Grateful for any help.

[Dr.CSS]

There isn't any way to use {$page_alias} in a style sheet...

But you may be able to code it in the template/html...

<div id="header2" style='background: url([[root_url]]/uploads/images/{$page_alias}.gif) no-repeat right top;'>

If I were to use this I would have a default image called in the CSS in case there isn't an image for the page in images...

[calguy1000]

Here is how this works:

a: pages are attached to a template
b: stylesheets are attached to a template
c: stylesheets are generated once (through smarty) and the output cached till the stylesheets change again.

This means that if you are starting from a clean cache, and view one page the stylesheets for the template associated with that page will be processed through smarty, stored as a .css file, and dumped to the browser. Viewing a second page attached to the same template will not pass the data through smarty again.

This means that page specific variables like [[$page_alias]] should not be used in stylesheets. It's perfectly valid syntax, but won't work the way you expect.

For page specific style information you could do as DrCss recommended above, or use inline styles in your page template like:

<style type="text/css">
body.{$page_alias} {ldelim}
background-image: url(uploads/images/{$page_alias}.jpg);
{rdelim}
</style>

[CapereSpiritum]

Thanks Dr CSS, I've tried your suggestion but sadly no success.

Hi Calguy, I'm part way with yours:
<style type="text/css">
body.{$page_alias} {ldelim}
background-image: url(uploads/images/{$page_alias}.gif);
{rdelim}
</style>

This puts the bg as a body bg rather than into the header2 div.

I know I'm close to a solution, I'm just not sure of the right combination of:
body.header2.{$page_alias} or
body#header2.{$page_alias} etc

As I'm still getting to grips with the more advanced CSS, this eludes me.

Can either of you shed some light?

Many thanks.