Build Your Own Business Website header image

How to Increase the Left Margin of the Content in Thesis

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 show how to increase the left margin of the content in Thesis. There are a couple of ways to accomplish this. First is to increase page padding in Thesis design options. The next alternative is to edit custom.css and we also show how to increase the margin in the post box.

Video Transcript

Member: So I have a client who doesn’t like the fact that the left margin in WordPress is so close to the edge. She would like it moved in 15 to 20 pixels.

Rick: Okay, can you give me a website address?

Member: http:… well, leadersedge ca…

Rick: .ca or just ca?

Member:, slash… no, that’s not it. You have to keep going.

Rick: Okay.

Member: This is a work in progress…. slash and it’s a capital H for homepage.

Rick: That’s it?

Member: Yes. Homepage… I’m sorry. Capital H at homepage.

Rick: Okay so this is it and what she wants is more space here?

Member: Padding, yes.

Rick: Okay, well the easiest way to do that is… and you’re using Thesis right?

Member: Correct.

Rick: So the… well, one way to do this would be in Thesis Design Options and just increase page padding in Thesis Design Options. Although that’s going to put it all the way around the page, top, bottom, left and right.

Member: Yeah and she’s not going to like that.

Rick: Okay. So then the next alternative to that is to edit your custom css. Are you comfortable with that?

Member: Yes.

Rick: Okay so then we’ll just look at this here in Firefox and come up with the right code for that because in Thesis, this is padding for the content. But the content has a specified width so if you increase the padding then the page is wtoo wide and it breaks. So you have to increase the padding and decrease the width of content, I believe.

Member: Here’s the other concern. Will that adjust the heading at the top also or is that something totally different then? Is that still going to be over there as well?

Rick: Well, this is going to… what I’m going to do right now should move the heading here and technical leadership and all the text and all the rest of that stuff.

Member: Good. That’ll work.

Rick: So if we look at custom css for a moment and then let’s see, inspect this element. So right now, what we want to do is… so it’s inside of div id content and what we have is a post box that is… I suppose we could just do that, could we? We could just increase the margin in the post box. I hadn’t really thought about that but that actually makes more sense than what I was going to do. So let’s try that. That’s #content box… no, no. Oh, it is content box. No, #… oh content box .page or post box. So let’s just try that for a moment.

.custom .postbox and then margin left 2 em, for a second. Okay, did that make anything behave incorrectly? No. 2.2 em… okay now, we do have this video issue and I’m not quite sure what is… what’s controlling that video padding?

Member: That’s going to go away. That’s kind of just a…

Rick: Is it just a stand in thing?

Member: Yeah.

Rick: Okay so there’s padding left 30 pixels that you put in here.

Member: Oh yeah, that’s right. I had that too to shift that over a little bit so…

Rick: Right, okay. So…

Member: I will take that out.

Rick: That actually goes away then. So really, it doesn’t… did I… it almost doesn’t look right anymore. 3.2… okay, I guess it is. So that’s really the… one way you could do it is probably the best way to do it because the post box…wherever that went… the post box doesn’t have a width specified for it. So if you add margin to it, it just shrinks the space in between whereas what I was going to suggest was do it to a div id content. But if you do it to div id content, content has a width and so now you have to adjust the width as well as add the margin then. It’s better just to use the post box.

Member: So if you scroll up to the top…

Rick: The very top?

Member: Okay, good. Yeah. I just want to see where it lined up with the corner of the L on her logo. So yeah, it looks like it is.

Rick: Well, so that’s…

Member: So I’m sorry, are you actually changing my custom css, right? I didn’t know you could do that.

Rick: I’m not changing your custom css. What I’m doing… this is web developer. And what I’m doing in web developer is testing custom css.

Member: Alright.

Rick: And so as soon as… let’s see, let’s just copy this for a second. As son as I refresh this page, it just goes away because it’s not an actual edit. It’s just gives the ability to see what it looks like in Firefox if that edit was in place.

Member: Okay so now I just need to make sure I had that actual code all written down correctly.

Rick: Well, in the first place, I’m going stick it in the chat window for you.

Member: Oh thank you.

Rick: And in the second place, it’ll be posted on the… I’m going to post it in the forum under Live Answer code. So to the extent that you need to get at it at a future date, you could just go over to Live Answer code and there’ll be a section saying ‘How to Increase the Left Margin of the Content’. I’ll paste the code there.

Member: Okay.

Rick: In fact, I’ll just do it right now.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one