[Solved] modify background according to section

[henris17]

Hello,

I have a website with several sections (africa, alaska, holiday....). Every section contain pages using different different templates. The common part of the pages inside each sections is the body and header background image. My question is:

Is there a way to have automatically different background images for each sections ?

In other word, I would like that (without any other intervention of the administrator), when a page is created inside section (Alaska) It will get the Alaska image as background for the header and theAlaska_bg image as background for the </__body> dynamically.

Here is my actual CSS:

div#header h1 a {
background: url("Assets/smallBanner.jpg") no-repeat scroll 0 0 transparent;

}
body {
background-color: #9D743E;
background-image: url("Assets/dirtywm2.jpg");

}

[Dr.CSS]

Install CGSimpleSmarty, look in Help for code to call root parent alias and use it to set the class of body then use that to set background...

[henris17]

Thanks Dr CSS, this is working perfectly.

For the less technical among us. I will try to explain here some detail the procedure I used. Just to remind you: we wanted to have different background and header images according to root sections (Africa, Alaska ....).

1. Go to admin>extension>Module Manager and load the CGSimpleSmarty module.

This module can (among other things) return the root alias of a page with a smarty
{$cgsimple->get_root_alias()}">

2. Go to your template and change the </__body> tag into:

</__body class="{$cgsimple->get_root_alias()}">

This will create a dynamic class for the body tag; in other word it is like having </__body class="Africa"> and </__body class="Alaska"> depending on the page location.


3. modify your CSS. For instance instead of
body {Background-image = url('thispicture.jpg); }
you write
.africa {Background-image = url('africaPicture.jpg); } and
.alaska {Background-image = url('alaskePicture.jpg); }

Same for the header picture rule or whatever you would like to customize according to the section head