Welcome back to the 3rd part of Lesson 5 of the Customize Thesis Like a Pro tutorial series. In this 3rd and final part of the lesson, we are going to use the custom body class to apply styling to groups of pages and posts based on that custom body class.
Vary Header Image for a Specific Category of Posts Using Custom Body Class
We’re going to start off with the green apples banner. We have the green apples banner currently applying itself to the green apples archive. But I think it would also be a good idea if we applied the banner to all the posts inside of green apples. So we’re going to take this custom body class that the Thesis theme created and attach it to all various posts. This same styling that we’ve created will then apply to those posts.
The Thesis custom body class in this case was cat_green-apples. So let’s copy that and then come back over to our site. Go to our dashboard and we’ll go to Posts and let’s look at every post in the green apples category. We’ll apply styling here. I’ve got these 3 so let’s edit the Irish Peach one first. Scroll down here to custom css class and we’re going to paste that there. We come up, update it and then we’ll go back to that page again and update the next one. Green apples, update it, and we’ll go back to the 3rd one. Okay and let’s go ahead and look at the post.
View the Thesis post and here we are at Granny Smith apples and we have applied the styling – it’s got the banner. If we go to green apples, it’s got the banner. If we go to Newton Pippin, it’s got the banner. Back to green apples, Irish Peach. So we’ve got this custom class that we have applied both to all of the green apples posts and also the green apples category and we could do that to each of these different kinds of posts or these categories of posts if we wanted to have a category specific banner that showed up on all posts in the category and on the category archive itself.
Vary Header Image for a Group of Pages Using Custom Body Class
The final one of these we’re going to change is taking a group of pages and apply a custom class to those groups of pages. If you remember, in demo 1, when we edited the page we gave it this custom class of red-group. So we’re going to take demo 1, let’s see, demo 2…well, that was the unique one, wasn’t it? We go to demo 3 and edit the page and assign that class, red group, update. We’ll go back to the site, demo 4, edit the page, paste that in there, and update it. And now, we have assigned that Thesis custom class to 3 specific pages.
The only thing we have left to do is to write the css to apply to those specific pages to apply the styling. So we’ll go ahead and copy this again and here, we’re just going to say red-group. So it’s red-group logo. The background URL is going to be a different image. We come back over to Images and it is redgroup.jpg, so we’ll copy that. Come back over to our custom css file, replace the image name with the correct one, save the document, upload it, and then view it.
So demo 1, there it is, red-group. Demo 3, 4, and 5 go back to the traditional. Demo 2 is the unique. The blog is going to be the traditional. Green apples is going to be unique. Bananas will be traditional. The individual banana posts will be traditional. And so, we have a way of assigning different css to individual pages and to different pages depending upon what custom class they have. And while I’ve used this example with headers, this is actually the case for everything. You can change the way the navigation bar is styled based on custom class, you can change the style of text and heading, you can change everything in terms of how the page looks. What you can change in css, you can change on a page using that custom body class.
And so that wraps up Lesson 5, Using the Custom Body Class in Thesis to Apply Styling to Groups of Pages and Posts.