Page 1 of 1

[Solved] modify background according to section

Posted: Sun Feb 20, 2011 5:16 pm
by 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");

}

Re: modify background according to section

Posted: Sun Feb 20, 2011 5:51 pm
by 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...

Re: modify background according to section

Posted: Tue Feb 22, 2011 1:34 pm
by 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