Let’s install and configure my BYOB Thesis Feature Box Layout Plugin. Tonight is this plugins actual unveiling. For several months now, I’ve had a plugin called the Simple Feature Box Plugin and that is pretty simple. Because it’s simple, it doesn’t really let us do everything I want to do here on this site so I wrote a new plugin called the Feature Box Layout Plugin and that’s the one that we’re going to install.
Activating Thesis Feature Box Layout Plugin
In order to get the Feature Box Layout Plugin, if you’re a member of the site, you can get it here from the plugin section, if you are not a member of the site, there will be a link to it that shows up in the Lesson Resources. In this case, we’re going to come over here to plugins and then we’re going to look for the Feature Box Layout Plugin, that’s it right there and just click on that.
Let’s go the Feature Box Layout Plugin page and because this plugin has not seen the light of day until today, there are no videos. Somewhere along the line there are going to be videos on how to use this. Right now we don’t have any videos on it so some of these you’re going to learn tonight and some of it you’re just going to have to learn by watching other videos that seem similar.
Anyway, we’re just going to click on the download link and download the plugin. Then we’ll come over to the site we’re working on which is sbywh11.byobtutorial.com or start Start Building Your Website Here Lesson 11. We’ll come over to Plugins and Add New and we’re going to upload it, choose a file, we’re going to pick it and we’re going to install and activate it.
Feature Box Layout Options Page
Now that we’ve activated this, it’s going to show up here in the BYOB Thesis Plugins Menu Area so we’re going to come over and open up the Feature Box Layout Options Page. Now, this options page is very similar to the Footer Widgets Options that you saw in a prior lesson and the concepts are very much the same.
If you are a regular participant here on the site, you’ll have seen a variety of plugins that have the same kind of interface and we’re going to see another example of that yet tonight, you’ll see a lot of similarities here.
What The Feature Box Layout Plugin Does?
The plugin creates Widget Areas in the Feature Box that allow you to drag widgets to it. For example, this is a slideshow that we’re going to install tonight and this is the slideshow widget that’s dragged into this widget area. This is a Text Widget, this call to action is a text widget that’s dragged into another widget area and that’s what the Feature Box Layout Plugin does, it essentially creates these widget areas that you can then add widgets and styling to.
Here’s another example of this. In this case, we have the dynamic content gallery which is the plugin that’s showing this. I’ve got a piece of text inside of a text widget, I’ve got another headline piece of text and another text widget.
Columns and Rows Created by Feature Box Plugin
This Feature Box Plugin allows you to create one or two rows and each row can have up to 3 columns. In this instance, we have Column 1,Column 2 and Column 3 in Row 1 with Column 1 below in Row 2. In that example that I just showed you in Thesis Toolbox, this is Column 1 and it’s one big column in Row 1 and in Row 2, we have Column 1 and Column 2.
In our case, we have a Feature Box and as you will be able to tell, it is a Single Row Feature Box, right? We have the Feature Box and inside of it, we have the Feature Box Row 1. This orange line represents the Feature Box itself and the green line represents the Feature Box Row 1 inside of it.
In addition to that, we’ll have Widget Columns 1 and Widget Column 2 inside of Row 1. When we come back over, you can see what’s underlying that. We’ve got our Feature Box, we’ve got a row inside that Feature Box and we’ve got 2 different Widget Columns inside of that row.
Three Elements for Styling
If we come back over to the site and we look at this, what we actually have is 3 different elements. We have the Overall Feature Box, we have the Feature Box Row and we have a Widget Column. Those are the 3 different pieces of the puzzle.
This is going to allow us to style those things differently. It starts off with one row but you can actually choose two rows and if you chose two rows, you’d see in the example over here, it would show you two rows. When you have one row, the next thing you do is to set a number of columns. You can select up to 3 columns so there’s an instance where you’d have 1 row with 1 column and 1 row with 3 columns.
We’re just going to do 1 row here and that 1 row is going to have 2 columns in it. You’re going to see that when we go to the widgets panel, there are 2 new sidebars over here. If we go to Appearance and Widgets, here’s Feature Box Row 1 Column 1, Row 1 Column 2, these are the two things that we’ve just created.
Last week we created Footer Row 1 Widget Column 1, Footer Row 1 Widget Column 2, Footer Row 1 Widget Column 3. The same kind of convention going on here, Feature Box Row 1 Column 1, Feature Box Row 1 Column 2 but at the moment, they are both empty.
If we come back over here to the site and view the page, you see we have 2 Feature Boxes showing up here. At the moment, it’s not showing those Feature Boxes as sitting side by side but once we hit Save here, I believe that’s going to change. There we go.
Setting Different Column Sizes
What happens when you set up 2 columns in the Feature Box is that it automatically makes both columns exactly the same size. If you want 2 columns of the same size, you don’t have to do anything about setting the size. However, we don’t want 2 columns of the same size, we want 1 larger column and 1 narrower column and this plugin lets us make that setting.
If we come over here and we look at our Feature Box Row 1 settings, you can look at the Widget Column 1 Settings and Widget Column 2 Settings. This gives you the choice of setting a different width. Our slide shows 640 pixels wide so I’m going to say 640 there. If we come back over and look at our Thesis Header Image, this tells us how much space that has to take up.
It tells us that we have a 1021 pixels, so 1021 pixels is what our two widget widths should add up to and we have 640 therefore, Widget Column 2 we would put in 360. We hit Save, refresh and you see we’ve got just these 2 things sitting side by side.
Set Overall Padding and Margin for the Feature Box
There’s a lot more styling we’re going to do to this in order to get it the way we want it to look. If you look at the Feature Box, you can actually set the Overall Padding and Margin. You can set a background whether it’s a background color or background image or even a background gradient.
You can put a border around the Feature Box, you can put a shadow around the Feature Box, you could add drop shadows, or add corners to the Feature Box. So you can do those kinds of things to the Feature Box and then you can do those same kinds of things to the individual rows.
In this case, we can set up a row height, we can add a padding and margin, we can customize the headings style and a text style, we can customize the background style and then we can use some similar things for columns. There’s a fairly bit of customization that you can do here with this plugin that we’re not actually going to use tonight but if you watch any of the other videos about the Footer Widgets Video or the Header Layout Plugin videos, you’ll see that the method of styling these things is identical.
Padding and Margins
Before we go any further with styling this, we’re going to talk about Padding and Margins. I know I told you that we aren’t going to do anything about code but in order for you to really make this plugin do what you want to do, you have to understand something about Padding and Margins. This is our Feature Box, the purple represents our overall Feature Box. Margins take an element and move it away from its adjacent elements.
Effects of Margin to Header and Content
In this case, if the Feature Box doesn’t have any Margin around it, then it’s going to butt up against the Header and it’s going to butt up against the Content below. If we put a margin around it, which is what this yellow represents, then it’s pushed down from the Header and it pushes the Content down because it takes the edge of the Feature Box and it moves away from things that are immediately adjacent to it.
Effects of Padding to a Contained Object and its Container
Padding on the other hand works inside of the element. What it does is it moves a contained object away from the edge of its container. In this case, if the Feature Box is the container and you add Padding to it, then it’s going to move the widget columns away from the edge of the Feature Box container. Padding is inward and moves contents away from the edge. Margin is outward and moves the edge away from adjacent elements.
In fact, if we were to really apply Padding to this, you would see that the box got smaller, there’s less room to contain it. I represented that by having them fit inside the Padding so the edge is the demarcation between the yellow and the blue. That’s Padding and Margin. It’s going to become useful to you in many ways in these plugins as we work our way through this.