Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 12 – Style the Content Widgets

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 12 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to style the content widgets using the BYOB Thesis Shortcode Content Widgets Plugin.

Video Transcript

Refresh it. Okay so now the next thing we have to do then is to add that styling. So we go back over to our Shortcode Content widget and we’ve already said that we want, in this block of widgets, we want the 3 widgets. We’re going to leave the widget dimensions alone and the block margins alone for the time being. But we are going to edit the block heading style. And so the way we do that is to under block heading style, select check customize the headings style options then hit save. And once we hit save, now we have a larger range of choices here.

And so the heading font color, we do want to be white but the heading background, we’re actually going to make really dark gray. And in terms of the font size, I think we’re going to make that font size 24 pixels. Let’s see what that looks like. We’re not going to do anything but that for a moment. Refresh this. Okay, we’re font size so there’s our hot chicken bed but the background color didn’t happen so block heading style. Oh, you need to check to use the background color. That’s what it was. So hit save now and we should have that dark charcoal color there.

Okay so hot chicken bed on the rocks cold chicken bed… I see. So what I did was use Georgia, not all caps and I centered the text in the space. So if we come back over to that and I go back to our block heading style, instead of Arial, if we do Georgia and down here if we have… instead of the text letter spacing, we say normal spacing. We remove all of our caps, we center the header text and we make the text bold. We hit save to that and refresh this. You know, this is probably a little bit too big in terms of its font size so we’ll take that down to 20. And we want a little bit more padding on the top and the bottom here so what we’re going to do is give ourselves, I think, 10 pixels of padding. See, we want room above and below like that.

So again, we come back over to heading style, we’ll take this down to 20 and instead of widget block 1 heading or in terms of heading padding, I think we’ll just pick 10 pixels. That’s what we’ll do for padding. If we hit save now, I bet you we’re right where we want to be. Yes, okay. That looks pretty good.

Okay so now the next thing to do then is to add background color down here and to adjust our font size and font colors. So we want this green color and we want our text to be white. And we want our text to be a little bit larger but we want to use Arial. So let’s get that green color first over here and grab this green color. Come back to our site. Okay, now we go to our widget column background settings and we say yes to customize the background. Hit save so we can see our background settings and then the background color is going to be this color. We’re not going to use a background image so we’re good to go with that. And let’s go ahead and hit save here first before we do anything else. Come over and take a look at it. Okay, there we go.

Now this is a place where what we want to do is we want to add margins in between each one of these widget areas because we’ve got widget column 1, widget column 2, and widget column 3. And right now, they bleed all in together. If that’s what you want, that’s fine but this is what we want here. So we need space in between these. Now, the way I have designed the plugin is that so you can either specify a width for your typical left side or your typical right side. Or you can specify a width for left and right. In this case, I’m going to make left and right equal and it’s going to be equal to this 12 pixels here so that this will be 24 pixels, this will be 24, this will be 24 and this will be 24. And our you know, we have equal looking spacing in between each one of these. Actually, because you can specify these individually, you have a lot of control over it so if you wanted these to you know, go all the way to the edge, you certainly can. But under the circumstances, I think what I’m going to do is just I’m going to make a margin, a left to right margin for each of these columns of 12 pixels.

And so that happens down here under column padding and margin, widget column padding and margin. The widget block margins affect the entire block as a whole. And so if I add margins to the widget block, it’ll push this widget block away from the text and it’ll push this footer down below it. That’s what widget margins will do, the block margins. The column, widget column margins will push the widget columns away from each other and away from the top, bottom, and edges of the block. And so in this case, we’re going to say that our typical left margin is 12 pixels and our typical right margin is 12 pixels and hit save and refresh. Okay, there we go.

So now we have split this up into 3 equally spaced sets of margins. Now, if we take a look at this versus this, you can see I want some green across the top here so I need to give myself some padding inside of this area. And I want to pull the text all the way over to that edge as well and then I want the text to be larger and then I want it to be white and then I want this to be yellow.

So we’re going to do that by saying, first off, our column padding and margin, that was margin. What we’re going to do now is padding and our typical top padding, I think we’re going to say is 12. Let’s just say 12 all the way around and see what happens. I don’t remember actually what the right setting for this is. But if we say 12 all the way around, I think that’s probably close to what we want to accomplish. Not quite. So I guess we should say… yeah, let’s look at that. Measure it. See, we can just measure right here, can’t we? How much is that? Oh, it’s actually 20 pixels. That’s what that is, okay. So not 12, but 20… okay, for padding, 20, 20, 20, and 20. And actually, this is probably not a bad place to demonstrate what’s happening with padding and margins.

What happens with margins is margins push this green box away from its edges and the column itself starts at one edge of the green and ends with the next edge of the green. And so margins push it away from either side. Padding doesn’t change the dimension of the green box but it takes this stuff inside the green box and moves it further away from its edges and that’s what happening here then. We refresh this and now, we’ve got our 20 pixels, our 20 pixels, our 20 pixels like that.

So the next thing to do is to increase our text style for this and change its color. And so now, if we look at our widget block text style, we’ll say yeah, we want to configure it. And then once we decide we want to configure it, we’re going to keep it as Arial. We’re going to move it up to… let’s say, 14… I don’t think that… let’s say 16 pixels. We want the font color to be white. We want the link color to be yellow. I’m being lazy at the moment. And the hover color to be yellow. And if we hit save because I really should use the same yellow there, that’s what we’re already using, if I hit save… oh, that’s big. So we don’t’ want it that big. Let’s take that down to 14 then let’s save it. So I think I’ve said this before but it’s obviously, this is a process of trial and error, just like regular CSS. It’s a process of trial and error.

Okay so now, I’m missing… I’ve got an extra space here but I don’t have any space here. I mean, I’ve got too much space here and that’s just a problem with my widgets. Look at my text widget here, widget column 1, hot chicken bed. If I delete that space there and then hit… but I think I need a space there… and hit save, I think that solves it. Yeah, there we go.

So actually, I still think that’s a little bit too big, isn’t it? That is too big. So let’s just make it a little smaller. Let’s take it down to 12. Yeah, there we go.

Now the only other thing is, we have sort of an interesting size thing going on with this. So we’re going to refresh it and see if we can figure out why we’ve got all this extra space here. So there’s our text widget. Oh, we’ve got that extra space because LI widget gives it margin down there and then we give ourselves 20 pixels of padding below all the way around. So we should just get rid of that extra padding and that will bring that down. So come back over here to the widget column padding and margins and I gave myself the bottom padding of 20. Let’s just take that to 0 and refresh it. There we go, okay.

So now we have… we’ve styled 3 widgets you know, essentially all the same. They’re equally spaced inside the space. We’ve manipulated the styling of the header and the style of the background and the style of the text and the style of the links. And I guess the next thing to do will be to add the bottom menu.

0 Comments… add one
0 comments… add one

Leave a Comment