In this session we demonstrate how to specify a custom background color for a single page in Thesis 2 using a custom body class. We also show how to make the CSS more specific to only cover the content area of the page. We talk about using a different selector for the Thesis Classic Skin than our Agility Skin because the selector being chosen is dependent upon the skin being used.
Member: If I want on just one page to have a different background to the content area, I mean, a different color in the content area, does that mean I’m just going to create a separate template for that?
Rick: No, it doesn’t. In fact, let’s just take an example here of… let’s see. I’m in Lesson 4 so let’s go to a page and we’ll use this Eastside Craftsman homepage. Thesis has this thing called custom body class and you can just come down and scroll down until you find that custom body class. And let’s just say we’ll call this one blue background. Now you need to make sure that you… the text you put in here is a valid class name so it should be all lowercase letters. There shouldn’t be any spaces, can’t start with a number. So this is… so it’s got to be a good class name and I think there’s a little hint in here about… okay, class names cannot begin with numbers. That’s the only thing.
So we’ve got this blue background as a class, right? If we update this page and view this page and let’s see, inspect the element. You can see that the body class now has blue background added to it but it only applies to this page. So now you can come over to your CSS and let’s say, under body, you can just come along here and say body.bluebackground and then background color blue. Save this.
And the only page that’s going to have that blue background is the page that has that body class. And I think that’s… let’s see, I think we’re just going to have to go over to it. Refresh it. Oh, in this case, I need to save the CSS too. Don’t need to save the CSS to see it in the canvass but you need to save the CSS to see it in a regular page. Come on. Blue background… I must have… okay, I typed in boby, not body, he says. Let’s see… yeah, got it… body background.
So there it is on that one page only but it’s not on any other page. It’ll be on every page you add that custom body class to. So it didn’t require a different template to do that.
Member: So if I wanted just in the content area, that would be… if that’s the body, it would be what then?
Rick: Oh no, if it was just the content area and it depends on what skin you’re using. But if you’re using my skin you know, you could target the page wrapper instead. So let’s take it out of here and let’s go to page wrapper. And in this case, you wouldn’t say body anymore. You would say bluebackground .pagewrapper. Hit save.
So let’s just reload this. Okay, actually that hits the page wrapper but nothing else. But it hits all the page wrappers. So you know, if you want it to hit the content area of the page only then you would make it more specific. Content area, page wrapper.
This, in particular, is very dependent. I mean, which selector you choose is very dependent upon the skin you’re using because this HTML is unique to the Agility skin. So if you’re using Thesis Classic, you would be choosing a different… you would choose a different selector. Does that make sense to you though? I mean, having said that?
Member: Yes it does.