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.

Lesson 5 – Part 2 – Apply Styling to Individual Pages, Posts and Archives

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 2 of Lesson 5 of the Customize Thesis Like a Pro tutorial series. In this 2nd part of the lesson, we are going to take a look at ways of using the automatically generated custom body class with header images. We’re going to mix it up so that we have a typical header image and then a header image for 1 specific page and then we’ll have a header image for a couple of other conditions.  We’ll be customizing the appearance of groups of posts, pages and category archives using Thesis custom body classes.

CSS Only System for Creating a Clickable Header Image in Thesis

This header image right now has been uploaded via the Thesis header image system and if we leave this image here like that, we won’t be able to change it in css. So we’re going to do this clever little thing I thought up of putting a transparent image there instead. Go to the dashboard and scroll down to Thesis header image and we’ll remove this header image. And then we’re going to upload a transparent header image of the same size.

The current header image size is 214 by 956 so that’s what we’re going to do here. And we are going to upload this transparent image that I created that’s exactly the same size and you can see that it looks blank here. That’s because the image that’s here is entirely transparent. If we look at its appearance in our site, you can see we’ve got the big transparent space here but if we go to a 2nd page and then click on that transparent space, it still takes us home because there is still an image that sits here.

Now let’s take a look at that image briefly in Firebug to identify where it is. Refresh this now and we see that blank image there. If we inspect the element, this image is in the a element of logo and we could either use just straight logo as our reference or we could use logo a. We’ll go ahead and use logo. We are going to assign a background image to #logo and that is going to sit back behind this transparent image that’s there and you’ll be able to see it. I have already uploaded 4 header images to my Custom Images folder. You can see I’ve got the header customize lesson 5 gif and then I’ve got these 3 others that we’re going to use. I’m going to start off by using this one here.

First, we’ll briefly refresh our memories about what the css looks like. Go to W3 schools and css and then to styling backgrounds. You’ll remember from our last lesson that this is what the css syntax looks like, background-image url and then like that. We’ll copy that and then we’re going to bring up our custom css file.

Custom Body Class – Header Image

Let’s start off by saying .custom because we want this to apply to every page on the site. So .custom, then #logo, opening and closing parentheses and then we’ll paste that. Now, what we’ll do next is we’ll take our image and put the correct image address here. And so that image address starts off with Images, which is the folder it’s in, and then slash and let’s come back over here and then grab the name of that and paste it. Now the background image is this. Let’s go ahead and save it and then we’ll upload it. Let’s go up a level, upload custom.css, come back to our Firefox version and refresh it. Now if you look at the a it still has that image in there, right? But the background image for pid = image logo is sitting right here. Images, byob header customize lesson 5 gif. And if we move around, you can see that it shows up on every page.

Vary the Header Image in the Thesis Theme for a Specific Page

Next we are going to specify a single image for a single page and we’re going to do that on demo 2. For demo 2, we’ll use .custom .demo-2 and then logo. And so if we do that again, we can just come like this and copy it, then paste it and then we’ll add demo-2. Now, this 2nd body class needs to be attached directly to the first body class. So there are no spaces here, it’s just .custom .demo-2 and then the space #logo and then we want to change this image here. Come back over to FileZilla, go to Images, and we’ll use this unique banner jpeg. So copy that address and come back to here and we’ll replace this one image with the 2nd one.

Now, we’ve got custom logo for typical and custom .demo-2 logo for the demo 2 page. We’ll go ahead and save that document and then upload it and refresh the document. So there’s our unique banner. It doesn’t exist on demo 1, it doesn’t exist on demo 6, it doesn’t exist on our blog, but it does exist on the one page, demo 2.

Vary the Header Image in the Thesis Theme for a Category

We’ll do one more thing with the appearance and that is add a unique banner to a category. We’re going to add that to the category of green apples. If you remember, you can look down here, it’s cat_green-apples, green apples being the slug, cat_ being the thing that comes before it. Let’s take this again, copy it, take it down one, and instead of that, it’s going to be cat_green-apples. And instead of the unique banner, we will use the green apples banner which is green apples here. Copy that and then let’s replace this image name with our green apples image name. Save this and then we will upload it again and check it out. If we go to green apples, there it is. We’ve got the brand new green apples banner – Customize Thesis Like a Pro – and if we go to one of the green apples, it goes back to the normal banner because the green apple itself only has the custom body class. It doesn’t have anything else.

Okay and that wraps up Part 2 of Lesson 5, Customize the Appearance of Groups of Posts, Pages and Category Archives using Thesis Custom Body Classes.

customize the appearance of groups of posts, pages and category archives using Thesis custom body classes

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