This post shows a similar technique to the one used in my CSS Sprites – making one of the buttons active with the body id post from the other day. In this post I show how to modify a particular element on a page depending on the body’s id or class. In this example it’s to change the masthead that appears at the top of the page.
Example websites
The example presented in this post is used on two of my websites: the New Zealand Running Calendar and the Australian Running Calendar. The two websites use the exact same code but are configured to use a different database; the two domain names both point at the same directory location on the server.
(Ultimately when the Australian calendar is populated with content I’ll move it off to an Australian based server but that’s still a little way down the track).
Apart from some navigational differences, the layout of the template is identical for both sites with the exception of the masthead. The masthead is a large repeating background image which includes the background image, logo and top navigation background.
On the New Zealand site it has the domain name as www.runningcalendar.co.nz and on the Australian site www.runningcalendar.com.au
The masthead background image is controlled with CSS in an external CSS file and the <body>’s id/class is set differently for each country.
Setting the body’s id/class
The <body> element on these websites already has an id relating to the type of page it is for other reason so on these sites I added a class to the <body> tag depending which country it is like so:
<body id="..." class="countryNZ">
and:
<body id="..." class="countryAU">
It could just as easily be the id that was set if I wasn’t already using the id for other purposes:
<body id="countryNZ">
and:
<body id="countryAU">
Setting the masthead with CSS
Ordinarily I’d have just set up the masthead as a background in the body settings of the CSS file. This is how I’d originally set it up when there was only an NZ version of the website.
The original way:
body {
background: white url(/themes/common/images/masthead.jpg) center top repeat-x;
}
Now that I have two versions of the website which each require a different masthead the body background needs to be set differently depending which site it is. With the class set as shown in the above section it can be done like this:
body.countryNZ {
background: white url(/themes/common/images/masthead-nz.jpg) center top repeat-x;
}
body.countryAU {
background: white url(/themes/common/images/masthead-au.jpg) center top repeat-x;
}
Note that it’s "body" plus the class name. If using a body id they can be done like this instead:
body#countryNZ {
background: white url(/themes/common/images/masthead-nz.jpg) center top repeat-x;
}
body#countryAU {
background: white url(/themes/common/images/masthead-au.jpg) center top repeat-x;
}
Other uses
I’ve just illustrated this technique to set a background image but it can obviously be done for any element in the page combined with the body’s class or id.