Build Your Own Business Website header image

Template Specific CSS with Thesis Body Classes

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

Whoops, you've found some protected content!

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

The next thing I want to talk about is template specific CSS using the Thesis body classes. In the last seminar we added this background color to the sidebar but we did it in such a way that it actually applies to every single instance of that container class.

We actually have some places where that doesn’t work, like here where we are using a full width template. Well, you don’t want that going on along here. So what you want to do is use the template body class.

By definition when you create a custom template, it doesn’t have a special body class. But you can add one.

Where to Find the Template Body Class Name

Chris created this one himself so it does have a body class. We’ll click to edit this and you’ll see that we do in fact have a body class. So you come over here and hover over the name of the template and the template options pop up. You can see he’s added this template body class of full page.

If you create a custom template yourself, this template body class would be empty. Because custom templates don’t automatically get their own body class. But this one does so we can use this body class to change it so that that doesn’t happen.

And, in fact, the other custom template he’s got, this landing page template, also has a body class called landing. And the landing page template also doesn’t want that green bar in it.

But here’s that custom template that we made on day one. And there’s no body class here. So if you are working in your own custom template you can put your own body class in there.

Default Templates Automatically Have a Body Class

If you are working with a default template the default templates automatically add a body class. You don’t see it here but if we were to go back to the site and scroll up to the top and go to the body class, you can see there’s this template hyphen front body class.

All of the default templates have that. If we come over here to the menu which is a Page template you can see it’s got template hyphen page. And if you go to the home template which is the blog posts template, it’s got template hyphen home. If you go to an archive page, actually this is a category archive page, you’ll see it says template hyphen category.

So some of them come with template specific body classes already. That is the default ones or the core templates do have a body class. Now, you can still add your own but it’s not absolutely necessary because they already have one that you can attach to.

Richard asks, “Does this ability exist in Effectus?”. Yes, I’m sure it exists in every single Thesis skin because it really a default ability, it’s not a skin dependent ability.

Add Body Class to Change Styling

Let’s go back to this page that we want to fix and look at its body class. You can see it’s got the full underscore page that Chris added to it so that’s what we are going to use, full underscore page.

Come back over the the CSS and scroll down to backgrounds. We had this content sidebar background. So we’ve got content having that. Well, we want to get rid of that type of template. So let’s copy this and go down here to background image none. Then add the body class to it, dot full underscore page space and save our Custom CSS.

Page Specific Body Classes

Then come back over and look at it. Flush the cache and now that background is gone from this template but if we go back to home it’s still there. So that’s template specific body classes. You may know this from Thesis 1.8 that actually there are also page specific body classes.

So if you edit your page and scroll down here to these Thesis boxes, here’s your custom body class. This, if you put a body class here it would only exist on this page but you can use it the same way.

So that’s the body class system that comes with Thesis.

0 Comments… add one
0 comments… add one

Leave a Comment