Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Part 3 – Using Different Background Images on Different Pages

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we’re going to do in this How to Customize Thesis Skins with Background Images, Colors and Gradients lesson is to use different background images on different pages.

What we have created so far looks just fine on the main front page but if we come over to the menu page, now all of a sudden this background image doesn’t belong there anymore. We no longer have the same setup here that we had before. So what we want to do in this case is to use a different background image and we want to use a background image that doesn’t include the yellow band or the green stripe or the line below that.

Use the Thesis Custom Body Class To Specify Images

I have created just such an image for this purpose and in order for us to do that, all we have to do is use the custom body class to define the image for this front page. I introduced the custom body class in the previous seminar, Introduction to HTML for WordPress and Thesis Users, in my video Using the Thesis Custom Body Class System.

Choosing the Right Body Class

Let’s inspect the element here and look at our body. This has the body class of template-front and as we know, the front template is always only used on the front page. And since our front page is the one we’re looking at with this feature box on it, we’ll just go ahead and use this body class template-front for this image.

Let’s come back over here to the Custom CSS and copy this. Now what we’re going to say for the template-front one is body.template-front. Because we are styling the body and because the body has the class of template-front, you would use the custom body class this way, body.template-front. However, if we were trying to style the front page footer a different way, what we would do instead would be to place .template-front in front of footer without any connection. So it would .template-front #footer and body.template-front.

Add Image for this Specific Page

Then what we’ll do is we’ll change out our image here for our regular condition. So the regular condition is going to be a different image than the typical condition which will be a different image than the front condition.

We’ll go ahead and browse the same spot and this is social-top-background6. Add that image, we’ll copy that, come back over here and replace it so social-top-background6 and save this. Now, if we reload this page, the template-front page, our header area looks just fine and our footer area looks exactly like you’d expect it to look.

If we come over to the menu page, now we’ve got that color stretching all the way across, we have our line that goes all the way across but we don’t have any of the rest of that stuff. If we go down to our footer, our footer is the clear color. That’s because we use this template-front in front of our footer definition which is the way you would do it if you wanted the footer on the front page to be different than other footers.

Obviously we don’t want that, I just did that to demonstrate how to use different background images on different pages in Thesis 2. So we’ll delete that, save our Custom CSS, come back over and refresh this page now. Now it’s got the style that we want it to have and if we go back to the home page, we have the dark green and all of the special styling associated with this and then we have the footer.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment