Default section title Image

[declanreynolds]

Hi There,

I would like to have an image that displays the title of the section that people are viewing on a website.

For example, if someone is in the section "About Us", an image with the text "About Us" appears in a pre-determined area of the page .

Can this be done automatically rather than me manually adding the image in the admin area? I realise I could do it using templates but then that would mean having a different template for each section.

Many thanks,

declan

[Dr.CSS]

You could use the {$page_alias} as a class to the spot the image will appear...



div.pagealias{background: url(uploads/images/yourimage.jpg) no-repeat}

[declanreynolds]

Many thanks but, I'm a bit new to this so not too sure how that would work.

The following goes into the template:



the following goes into the style sheet:

div.pagealias{background: url(uploads/images/yourimage.jpg) no-repeat}

But if every different section such as "Home", "About Us", "Contact" etc need a title image so how would I implement that above to work differently on each page?

Thanks in advance again!

[Dr.CSS]

OK lets take this template...
http://multiintech.com/cmsms1.1/booth/home-2.html

You see the brown title "families in focus etc..." that is an image so is the red one in...
http://multiintech.com/cmsms1.1/booth/school1.html

How it's done, same template both pages, the image is in the   
notice the class="home-2" that is written so it picks up the alias and the CSS is set like so...

#contentbox h2.home-2 {
height: 93px;
padding: 0px;
margin: 0px 1px 1px 5px;
background: url(uploads/images/booth/home.jpg);
}
* html #contentbox h2.home-2 {  this targets IE6 only, POS browser...
height: 93px;
padding: 0px;
margin: 0px 1px 1px -1px;
background: url(uploads/images/booth/home.jpg) top left;
}
#contentbox h2.school1 {
height: 93px;
padding: 0px;
margin: 0px 1px 1px 5px;
background: url(uploads/images/booth/schooltitle.jpg);
}
* html #contentbox h2.school1 {
height: 93px;
padding: 0px;
margin: 0px 1px 1px 0px;
background: url(uploads/images/booth/schooltitle.jpg);
}

This can be used in many different places, such as page background as in this...

http://multiintech.com/cmsms1.1/present ... .html  then click the last tab or portfolio to see diff. page backgrounds...

[declanreynolds]

Fantastic.

Thanks very much indeed.