In this session we show how to adjust column padding and margins in the Thesis theme by creating new dimensions for the width of the elements in CSS to get the desired padding and margin.
Rick: Okay and so your problem here is that you want this to move over. Right, this is the default amount of margin that exists in the way Thesis deals with this 3-column layout and you actually want more margin over here. Is that right? Did I lose you?
Member: Yes. If you go to the top and click on the navigation mention there and you click fertilization. Once you click that, you’ll see the content. You’ll see the sidebar 1, sidebar 2. I’ve actually went into and told it to put some padding in there to get all of the content to move and get in line with the B up above and baby. So it’s perfectly in line with that B coming down. What I would love to see happen is week by week calendar line up with subscription, subscribe now and then whatever the distance from the outside… left side of the page to the week by week calendar, do that on the right side on sidebar 2 from the right side, same padding from the edge of the page. Does that make sense?
Rick: It does make sense but you don’t really have enough room for all that at the moment with your graphic or with your site. Because I see what you did was you added a style, a margin left 50 pixels to the content that you put in here.
Rick: And really, it would be a whole lot easier just go get these things to line up the way you want them to line up.
Member: Yes, thank you.
Rick: And so you essentially want to add a little bit of margin to sidebar 1 and when you add margin like that, you’re going to break the thing unless you also widen out the other parts of it. Because right now, the way this works is that the whole width of this page is spelled out, here for example you can see width is 10… oh I see. This is something you put in yourself.
Member: Yeah, I actually put the width on…
Rick: Must be inside the plugin.
Rick: Yeah, it must be in the plugin, okay.
Member: I put it inside of your plugin.
Rick: So if we take this sidebar 1 and give a little bit of left margin to move it over, it’s going to break something else but let’s just go ahead and do that for a second. So .custom #sidebar_1 and then margin left colon… call it 10 px. Okay, that did break it so let’s make this width here 1090 for a second. 1010… okay, why didn’t that work? Oh because column wrap also knew to get larger. Okay so 758 and I added 10 so 768 px. So 76…okay. So not quite… that’ll be 7. Okay let’s see, sidebar 1, margin left 10 px. Oh I see, because the whole thing got wider.
Member: Have I totally set the background images up wrong?
Rick: Well when you set this stuff up, you didn’t realize you know, what the parameters for setting it up were. The thing is that Thesis, by definition, does certain things with padding and margin and you want to do something different than that. And that’s what’s causing you the difficulty here because you want more padding and margin than Thesis generally accommodates. And because of the way Thesis calculates the width of things, it calculates its width inclusive of the padding and margin and so when you increase the padding and margin, you break the thing because its container width has been defined with the base level of padding and margin. And so that’s what’s really going on here, is that in order for you to have it exactly the way you want, you just have to create new dimensions for the width of the elements so that you get the padding and margin in it you want.
Now that I understand what you’re trying to accomplish, I think I can offer you some code. Now I’m guessing that the widths of these things are all fixed, is that right? This sidebar is exactly the width you want?
Member: Well, I mashed it up with Subscribe Now which I think is 172 pixels wide. And then I need at least 300 pixels on sidebar 2 for any advertisements.
Rick: Okay. Well, but right now your sidebar 1…
Member: I had played with it…
Rick: Yeah, let’s see. Well actually, let’s just refresh this whole thing, go back to where you were for a second, try that again.
Member: Now I put that 1080 pixel inside of your widget, your Full Width Content. I did it in the header. I did it in the body and I did it in the footer.
Rick: Right. Okay so if we come back over here to custom css and instead of doing what I said we would do and instead let’s say, sidebar1 UL .sidebarlist and then padding left: 20 px. Okay, 25 px because this is actually… okay so…
Member: I can actually change…
Rick: You want to line up with the… oh I see. We just made our calendar smaller though by doing that.
Member: And I could adjust all of that, I can adjust the calendar and all that stuff. I can adjust the Subscribe Now. I just want to see, from the left side of the page over to where you see Subscribe Now to be the same with whatever I put in sidebar going straight down.
Rick: Okay so we add a little bit of padding to the left. That looks like that lines up and we got rid of the padding on the right. So we handled that side without making any big change. And now what we want to do is…
Member: Make the right sidebar?
Rick: Well, what what do you want to do with the right sidebar?
Member: Well, the content, I’ve gotten it exactly the way I want. Because when you look at a magazine, you’ve got all that padding from left to right when you look at a page. But sidebar 2 maybe come in and do this exact same width from the outside right edge of page to the content that’s in sidebar 2.
Rick: Okay so copy that and sidebar 2. And this is actually 0 and 20. Okay so now you have the same padding on both sides of those. Now what we have to do is we have to fix the padding here because you have… you currently have inline style that gives it 50 pixels of padding but that’s not
really the way you want to do this.
Rick: And so then what we’re going to do is in our content… okay, margin. So it’s content box .page margin. Okay so .custom #contentbox .page margin left colon.. so let’s say 50 px. Custom content_box page margin left 50 px. It doesn’t seem to have done anything. Why not? What have I misspelled here someplace? Yeah, that’s the one. Postbox… oh I see. It’s postbox. Okay, there we go. So with postbox, we’ve got a left margin of 50 pixels which is where this is, right? That fertilization is on the immediate edge and these things would line right up with it if you didn’t have those inline styles. Following me?
Rick: And then is that enough margin or you do want more there?
Member: As long as the edge of that photo with the lady setting there is lining up with my B up above, without me having to go in and put those inline…
Rick: Oh, you want it to line up with the B. So we need way more than 50. We need say, 80 pixels. So let’s see…
Member: Now whenever go in and take that padding out, that picture’s not going to line up with fertilization. Well, it didn’t at the very beginning when I started. Fertilization was always setting far over to the left with whatever I stuck inside of that.
Rick: Well, I don’t think that’s true. Because the only thing controlling that is the width of the postbox and because the headline area goes to the edge of the postbox and format text goes to the edge fof the postbox. And if you didn’t have that extra stuff in there, this is what it would look like.
Member: If you click on number 10 in the week by week, it will take you to a page where I haven’t put in any inline padding.
Rick: Okay. Which one?
Member: Well, inside of the week by week calendar, click number 10… page 10.
Rick: Page.. okay.
Member: I don’t think I’ve put any inline padding in that. You’ll see that the first trimester hangs over even farther to the left than the actual content that I stuck inside.
Rick: Well, no. You’ve got margin left to 50 pixels there, you see it right here.
Member: Let’s move on up then. Go to number 20 because I know I haven’t done it on all of them. And what you just done, will that take care of every page throughout the site?
Rick: Yeah. So here you can see that the…
Member: The 2 is hanging off a little bit farther.
Rick: I think that’s because of your border though. Div class J box… yeah, whatever J box happens to be, that’s giving you this padding.
Member: Gotcha, okay. We’re getting rid of that now.
Rick: So this is what it would look like with the code I proposed. Okay.
Member: Got it.
Rick: Let’s see, class equals… let’s just change the class name. Oh, you can’t actually. Okay, I will change that one. So right now, we get rid of all that J box styling and this lines up with that which…
Member: Got it, okay.
Rick: Seems like it lines up.
Member: Yeah, it does. It looks… so that’s going to work.
Rick: Okay so I will post this code… when the session’s done, I will post this code in the forum thread that we’re talking about.
Member: Awesome, awesome.