Different background images on pages.

**GK User** Fri Oct 05, 2012 9:11 pm

Hello!

I am using the coffee template for joomla 2.5

I have created a new background image. It's now a full image rather than the repeated pattern of the original template. I'd like to use a different background image though for the rest of the pages than the one i use for the homepage.

I have changed the image link in the css and it works just fine for my homepage.

homepage.jpg

How can I assign another background image for the rest of the pages?

rest-of-pages.jpg

.

Do I have to create a copy of the coffee template and assign the menu items to it?
And if yes, does it create another set of css files to mess with or do I have to use the overide.css file?

In the end I think it's going to be much easier than what I'm trying to get myself into with this duplicate template thingie :blink:

Any kind of help would be much appreciated.
Thank you in advance

**GK User** Sat Oct 06, 2012 9:46 am

Hi,

In general in the Features tab at the template settings you have an option suffixes for pages - you can define an unique suffix (a CSS class) which will be added to the body tag on the specific page (you have to specify the menu item ID for the CSS class or component name - then the suffix will be used on all pages of the specific component). So if you specify a suffix XYZ for the homepage (usually menu item ID = 101) then it will be appear in the body tag as:

Code: Select all: <body class="XYZ">

and then you can specify background for the homepage only using the following selector:

Code: Select all: body.XYZ {

**GK User** Mon Oct 08, 2012 8:48 am

It worked!!!!
It took me a while to find this add suffix rule thingie in the template settings but it rocks!!!! :twisted:

Thank you so much for this!!!!

dziudek wrote:Hi,

In general in the Features tab at the template settings you have an option suffixes for pages - you can define an unique suffix (a CSS class) which will be added to the body tag on the specific page (you have to specify the menu item ID for the CSS class or component name - then the suffix will be used on all pages of the specific component). So if you specify a suffix XYZ for the homepage (usually menu item ID = 101) then it will be appear in the body tag as:

Code: Select all
<body class="XYZ">

and then you can specify background for the homepage only using the following selector:

Code: Select all
body.XYZ {

**GK User** Tue Oct 08, 2013 11:23 am

Different background image for certain pages, whole article on our WIKI ---> http://www.gavick.com/documentation/joo ... ent-pages/