Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 10 – Add Feature Box

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 10 of the the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to prepare the page by removing the sidebar template and removing the page title. Then we add the feature box using the BYOB Thesis Feature Box plugin and add the Dynamic Content Gallery to it.

Video Transcript

Okay so the next thing to do then is to add the feature box. Now this is going to be relatively familiar material for some of you but the… well, the first thing we want to do first is edit this page so that it doesn’t have a sidebar. So we’re going to just say not the default template but the no sidebars template and I have already installed last week the BYOB Thesis Landing Page Options. And so in this case, I’m going to remove the page title. Everything else will stay the same but we’ll remove the page title and refresh that. And now if we go back and look at the page, there we go. The text runs all the way across and there’s no more title there saying ‘Home’.

So now the next thing to do is to configure the Thesis Feature Box. We’re going to do that under Design Options and then we’re going to scroll down here to Feature Box Placement and we’re going to say full width above content and sidebars. We’re going to do it on the front page only and hit save. And now, we’ll go down to my Feature Box Plugin.

Now the Feature Box Plugin right now asks you whether or not you want to widgetize the feature box or you want to use a common plugin. In this case, we’re using a Dynamic Content Gallery to create the image gallery there. And so, what I’m going to do is add the Dynamic Content Gallery for that. Now, I’ve already installed the Dynamic Content Gallery and then configured the Dynamic Content Gallery to fit in this space so I’m not going to bother doing that because I have plenty of videos in the site about how to install and configure the Dynamic Content Gallery. But be that as it may, I have already done that here in the site. And so I’m just going to hit save. If we come back over and refresh this, okay now we have the Dynamic Content Gallery sitting here in the page.

Well, what we really wanted to do though is to you know, be centered in the page without having… I mean, with a nice equal space all the way around it whereas right now, it’s sitting up here in this upper left hand corner. So we need to add some padding to this. And so what I’m going to do is under the feature box, actually we could add margin too. Let’s try that first. So let’s add 12 pixels of margin to the left and let’s add 12 pixels of margin to the top. Let’s hit save and let’s see if that does the trick. 12 pixels might not be the right number. Actually, that’s right. The top margin, what it does is it pushes that up there. So instead of using top margin, what we’ll do is we’ll go ahead and leave margin top at 0 but we’ll use top padding and we’ll use 12 again. And we could just put padding all the way around instead of margin if that’s what we wanted to do. Okay and actually, 12 looks like it’s right so if my memory serves me correctly, that was 12 pixels.

Okay so we now have our Dynamic Content Gallery working. We have our menu up here working and the next thing to do then is to add the content widgets and that we’re adding the content widgets using the BYOB Thesis Shortcode Content Widgets plugin.

Jared asks me, “What’s the difference between padding and margin?” How am I going to explain that? Actually you know, I think I will explain that Jared, in the next… when I’m talking about the footer because padding and margin are elements of the CSS concept called the Box model. And essentially, if you imagine a box or rectangle, margin pushes that rectangle away from its container. So yeah, margin pushes the rectangle or the box away from the element that contains it and padding pushes the contents of the box away from its edges. So padding is inside the box and margin is outside the box. And in this case, the box here is the feature box and what we did was we pushed the feature box 12 pixels away from the edge of its container which was the content. And then we pushed the contents of the feature box, that is the Dynamic Content Gallery. We used padding to push it away from the inside top of the feature box and it’s probably…it’s actually probably a lot cleaner just to use one or the other and it probably would be better and I think maybe a little clearer if I did… if I just used padding and not padding and margin. I need to get rid of the margin here too actually because what I’m really doing here… if we refresh this… what I’m really doing is pushing the contents, allowing the feature box to extend all the way to the edges of its container and then pushing the contents of the feature box away from its edges at the top and on the sides. That’s what’s really happening here. But padding and margin can be a little confusing, I think sometimes, especially when they don’t seem to operate exactly the way you expect them to do. But the…

Okay so anyway, we’ll talk more about that when we get to the footer where we can add background colors to different things and show you the various ways in which padding and margin interrelate to each other.

0 Comments… add one
0 comments… add one

Leave a Comment