Build Your Own Business Website header image

How to Add a Call to Action to the Thesis Header – Part 3 Adjust Padding and Margin Settings

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

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.

This is Part 3 of the series How to Add a Call to Action to the Thesis Header and in this session we show how to add padding and margin to your header.

Video Transcript

Now the problem with this little call to action is it needs some space around it and actually, so does this stuff, right? This should be moved in a bit and should be moved down. And if we move this in and move it away from here then Laurraine is going to drop down to the 2nd line. And we want some padding and margin around this other stuff so we’ll go ahead and do that now.

And we’ll do that let’s see, we’re going to do that in the plugin settings, back to header widgets. And now let’s see, what did we want to do? First we want to add some padding to this. Now you need to remember that padding and margin are additive so if we a padding top to this, say we add 30 pixels of padding to the top. That is going to make our total header height not 215 but it’ll make it 245. So we need to take off 30 pixels off of this so that is going to be 185 again.

And then we’re going to do the same thing with the left and right. Padding left, we’re going to do 20 and padding right, we’re going to do 20… those are pixels. And again, we’ve just added 40 pixels to the width so we need to take this down to 704 pixels. We need to remove 40 pixels from that. And so that’s got that padding.

And then we want the same thing down here so let’s say, we want to add padding to the top this and let’s go ahead and give ourselves 20 pixels again of padding to the top. And then padding to the left and right, let’s do 10 for a moment.

So we need to take 20 pixels out of the height so that is 192… I’m sorry, 20 pixels that is 185 again. 215… yeah, 185. Did I do this one wrong? I did do this wrong. That’s 30… no, I did that right. 215 and 20 is 195. Just did the math wrong.

And then in terms of the left and right width, we need to reduce this by 20 so that is 192. Okay so now we hit save changes. Wrong page… okay so it looks like my 10 pixels doesn’t work very well. But this drop down and this drop down and my left and right padding… maybe I’m just going to dump that padding. Maybe that’s what I’m going to do. I’m going to take this…let’s see, padding left, padding right. Oh I should have taken 40 off of the…no, I’ve got that one. 10 and 10, that’s 20 from 192. Let’s just delete this and let’s go back to 212 for our width. And hit save changes and refresh this.

Okay and so I guess the next thing we want to do is we just want to add some margin to these things and we would do that actually in the HTML. Let’s see, we’ll go to widgets and this is a little code I know. But if we go to our h2 style text align center, we can right next to that say margin bottom: 20 pixels; and we can do the same thing with this one. We can say margin top: 20 pixels and that should do that for us. So if we refresh that, there we go. Now we get a little bit more space there and if we want more space up here, that’s fine.

And then the next thing I think I want to do is we want to disconnect this from the navigation bar. So in order to do that, we’re just going to give that a little bit of… we’re going to give the overall header a little bit of margin and we could give it a lot of margin, right? We could give it say 20 pixels of margin and that’ll give us a nice big gap or we could give it a couple of pixels and that would give us a very small gap. We’ll just give it a nice big gap there, okay.

0 Comments… add one
0 comments… add one

Leave a Comment