Build Your Own Business Website header image

How to Set the #content_area .page Width to be Different Than the Header

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 demonstrate how to make the Thesis content page width smaller than the header area width. You can easily accomplish this by using one of our plugins, the BYOB Thesis Full Width Backgrounds Plugin.

When you install the plugin, you just need to set the #header width to be larger and the #content_area .page to be smaller. You also need to set the Site Layout on the Thesis Design Options that will cover both the header and content page area.

Video Transcript

Member: It’s Great.

Rick: So, you want to know if you can make the content area that page a smaller width than the header area?

Member: Does that make sense?

Rick: Yes, you can do that. And there are couples of different ways. Are you using my Full Width Backgrounds Plugin?

Member: Yes

Rick: So then I mean using the Full Backgrounds Plugin, the easiest way to that would be to actually make the whole page…the width that you want, the content to be and then make the header area larger. But having said that, let’s just go take a look for a second at that… let’s see, because the Widgets plugin has the ability for you to set absolute for those. And so I’m just going to…I’m sorry the Backgrounds plugin.

Member: Yeah.

Rick: Ok, let’s see what do we got here. Ok, I don’t have it installed. So just a second, I’ll just go ahead and add it. Can lose track of every place I have all these different things installed. Ok, so if we go to the Full Backgrounds Plugin, unless you say you wanted to do everything for a moment, so we get all our options available to us. You can set, you see this specific width of #header_area .page? If I recall correctly, you can actually…oh you can. You can set this specific width of #content_area .page and the specific width of #footer_area .page. And this is in the latest version this plugin though, so it’s version 1.4.

Member: Oh you see I don’t know whether I got that one actually, because I looked for the width there and I couldn’t find it. I wonder. Unless I didn’t just look far enough down maybe.

Rick: Yeah it is… It was the last option that I added to this thing. I guess it’s not the very last option it’s also a padding that can be removed.

Member: Yeah but I mean I’ve only just got the background…so I must have the latest version…

Rick: Can you, if you open it up you can see whether or not it’s version 1.4 or not.

Member: Oh, have a look. Yeah. Oh it’s 1.4. Right, so we’re looking at the .header_area .page > width.  Right, I’ll have play with that. That’s great.

Rick: Anything else?

Member: No that’s it. Thank you.

Rick: Ok, you’re welcome. Have a good day!

Member: Yeah, thank you. And I’m just…when I asked you the question about header page, the content page, setting a width talking for that really. Because I have a header using your header widget plugin that was separated into two and I have a picture on one side on the left and navigation in right. And I want the content to be just be the size or the width, sorry, of the left side of the header because it’s quite a big picture. But when I come to set the content area background, when I give it that width, it actually sort of collapse everything even the header.

Rick: Can I look at you’re…you want to show me your screen? Yes, I can do. Yeah. Ok. So you just have to accept it.

Member: Oh, what happened? Can you see that now?

Rick: Not yet but….yeah, ok. Now I see it.

Member: Right, Ok. So this is the header and so this navigation which I got a WordPress plugin for this, that’s why I have a vertical one.

Rick: Ok.

Member: I put that in the widget area.

Rick: Ok.

Member: In the right hand side. Now here, I have the content which is two columns, as you can see there. And I wanted these columns to come to this area here, in-line with that, because this looks obviously…this going to space down. But I want it to look like sort of in the background.

Rick: Ok, well, so in my suggestion would be to… Well I don’t know. I guess my suggestion would be it’s going to shrink from the middle right? That’s part of the problem that you probably are experiencing. I guess my suggestion would be that you make your page the width you want it to be. And then enlarge the header instead of letting the header be the normal size and shrinking down the page.

Member: Well, I suppose this is where my knowledge, sort of… it’s not very good, because my next question would be then, when you set up a page. How do I know where to set? Because when I actually set up the WordPress page, I didn’t set how wide the page was in my knowledge.

Rick: Well you set it… Ok, I’ll just change the presenter here. And you set the page width in Thesis Design Options and so back over again in Thesis Design Options and you’ve got your columns and you set your page width by specifying the width of these columns.

Member: Sorry, I’m not seeing your screen now, am I? I can’t see the screen.

Rick: Maybe click on the little blue button down there? Or the little orange flower or whatever.

Member: I’m clicking on it but it’s not doing anything.

Rick: Oh, let’s see… It tells me I’m showing my screen.

Member: Oh that’s strange isn’t it?

Rick: But maybe you can follow along with me verbally anyway by simply going to Thesis Designs Options.

Member: Oh yeah I got you know here. Thank you.

Rick: Here we are in Thesis Design Options if you are under site layout, you expand the columns. You can see here are two columns. And here’s the widths of those columns. So what you need to do is set these, that they are the width that you want them to be.

Member: So this is the content columns.

Rick: Yeah, this is the content columns but it does… Thesis assumes that everything is supposed to be the width that width. So it makes everything that width. But this is really is the content columns.

Member: So, if you add those two together that’s the whole…that’s the width of the page basically.

Rick: Well, plus about… let’s see in this case, it’s just the two of them plus about 66 pixels. Because it gives some padding and margin on the outside in between. So you’re going to have to monkey with it a bit but you know roughly you move say about 60 pixels from your absolute width and then divide that space up between the two columns.

Member: So now I’ve got that, now so then I go to my header.

Rick: And you make that #header.page wider.

Member: Right. I’ll try that. Ok. I’ll have play around with that. Thank you very much.

Rick: You’re welcome.

Member: Yes.

Rick: Ok, bye bye.

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