Build Your Own Business Website header image

How to Specify a Height for the Homepage Only Using the Thesis Body Class

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

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.

In this session we talk about how to specify a height for the homepage only using Thesis body class. We show what the syntax will look like when we give the post box an explicit height. We also talk about the correct CSS syntax when referencing the same html element.

Video Transcript

Member: Rick, I was going to follow on the height of the page that I’ve been working on that you and I had a thread about. You had at one point suggested that I design a page height of 500 for that particular body class on that page.

Rick: Yes.

Member: I wasn’t sure if I’ve got the word right, the syntax to use?

Rick: Sure. What’s the URL?

Member: It’s annmariemckelvey.com

Rick: Okay, got it. So what you want to do is you just want to get rid of this white space, right?

Member: That’s correct.

Rick: And so what I was suggesting that you do is take this format text and give it an explicit height. No, I was talking about post box, wasn’t I?

Member: Exactly.

Rick: Take post box and give it an explicit height and if I do it over here and just say, height: 500px, you know, there it is. Now, that extra white space has gone away. So the syntax would look something like, first before we do that, you’ve got a custom body class called homepageclass. You must have done that on purpose.

Member: I made that one, I do.

Rick: So, we’re going to use this as your custom body class and copy it and what it will say is .homepageclass .post _box{height:500px;} that’s it, that’s what it looks like.

Member: I’m just comparing mine, that’s exactly what I have and one thing, let me try it one more thing.

Rick: Well, there’s got to be a space between these, they can’t be connected. This has got to have a dot in front of it.

Member: Right and I even have .custom because I’m on 1.8.5

Rick: Well, yes that’s right. So it could be .custom .homepage.class like that.

Member: Do they have to be adjacent to each other?

Rick: They do, yes because custom and homepageclass both reference the same HTML element.

Member: No, I get that part of it where I put spaces and none spaces, it’s really confusing to me.

Rick: Well, you don’t put a space if it is referring to the same HTML element and so that’s what’s happening here, right? You’ve got custom sample-page homepageclass, those are all classes of body. Body is the HTML element so if you’re going to use any combination of these, they need to be strong together with dots so if you’re going to use the full class there, we custom .sample-page .homepageclass.

Member: Okay.

Rick: And these do not refer to the post box so that’s why post box has a space.

Member: I see.

Rick: Because post box is inside of it.

Member: If we were trying to refer to (04:08)

Rick: Right.

Member: Okay. I totally got the syntax right and I could see already when the image redraws, I’ve been doing it while you’ve been doing it and that finally works so that’s very helpful. Thank you for that.

Rick: Perfect. You’re welcome.

 

 

 

 

 

 

 

 

 

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment