Now that we have configured the skin on the site the next thing to do is to set up the front page template. In order for us to do that we need to install a box and that is the BYOB Responsive Columns Box. We’ve installed that so now we’ll activate it. Save the boxes.
How the BYOB Responsive Columns Box Works
The BYOB Responsive Columns Box has a couple of elements to it. The main part of it is inside the Skin Editor. Let’s come over here to choose our, say, front page. We can select a box, add and see there’s the BYOB Responsive Columns Box.
The box itself has a wrapper and then has child columns in it. That’s pretty much what this consists of. You’ve got a series of settings that you can set for the wrapper and then settings that you can set for each column.
I’m going to drag this in and put it inside of the container just above the column section. Then I’m going to open this up and name this Featured Area. Here I can choose the column configuration I want. You can have the following.
Two columns equally sized
Two columns with two-thirds on one side and one-third on the other
Two columns with one third on one side and two thirds on the other
Two columns of three-quarters and one-quarter
Two columns with one quarter and three quarters
Three columns equally sized
Three columns with one-half on one side and then one quarter in one corner beside it
Three columns with one-quarter to one-half in the middle and one quarter on the far side
Three columns of one quarter, one quarter and one half
Four columns equally sized
Our Column Configuration
Those are your choices of column configurations. We’re going to choose this three columns with one quarter on the left, one half in the middle and on quarter on the other side.
This display content first means it’s going to take the big column and it’s going to display it first on mobile devices. On desktop devices it’ll essentially show it second because you’ve got that one column before it.
However, in this case we’re putting the menu in our first column, in the narrow column, and we want the menu to stay above the content so we’re not going to check this box.
We’ll use div for our column wrapper. You can choose other things too but we’re going to choose div for that. Then we’re going to give it an ID because later on we’re going to want to style this. I’m going to call it featured_area. That it’s ID.
Now you can remove all of the padding from all of the columns in the columns wrapper if you want. Or you can remove padding only from the top and the bottom of the column wrapper. Or you can remove padding only from the top or only from the bottom. You have some choices there.
We’re going to see what it looks like before we make decisions about removing padding so we’ll leave it alone at the moment. Call it featured_area.
We need to open up the tray to get our third column. The first time you install this and the box comes on, it automatically puts two columns in and leaves two columns in the tray. To get to the other columns you just have to open up the tray and click on it to add the other column.
If you inadvertently had too many columns, you can just shift+drag it. See where it says drop orange boxes here to hide them in the tray? You just hover over that and drop it and the column goes away.
You can hide the tray so you don’t see that fourth column but you need to have all the columns up here in this section that you’ve said you want to use. If you said you want to use three columns but you’re only showing two, it’s not going to work properly.
The same thing is true if you’re showing 3 columns but you’ve only chosen two, you’re going to have an extra column showing up below the other two. So anyway you need to set the number of columns so that they match the setting that you set here. Now that we’ve done that I’m going to save this.
Advanced Choices for the BYOB Responsive Columns Box
I want to show you one other advanced element of this Responsive Columns Box. You can see that under the boxes menu. Here you can see the choices for Responsive Columns. This is an advanced set of choices but you can set, for example, custom content width for the media queries.
Changing Columns Widths
If you don’t know what that is then you don’t want to do anything about this. I’m sorry, let me restate that. You can set a typical content width for your desktop and in our case the desktop is actually 1032. We’re not going to set those, I’m just going to show you. This is something that you generally don’t need to set.
You can decide that you want to change the minimum width of the one third column when it’s in a tube column configuration. You can also choose to change the minimum width of a one-quarter column when it’s in a two-column situation and you can change the one-quarter column when it’s in a three column situation.
So you can change this minimum width setting. Almost nobody is going to do that but if you really want to tweak the way something works you can. If you know what all that means, you can tweak it here rather than having to write your own custom code.
Custom Device Configurations
The same thing is true with these advanced custom device configurations. Let’s say you want to change the desktop configuration. You can change the percentage width, say for one half column or the one third column or the two-thirds column.
You can change those widths. You can change the spacing constant that you want to use which is used for padding and then you can write any other custom code that you may want to show up in this media query.
You can do that for the desktop configuration, for the tablet landscape configuration, tablet portrait and typical phone portrait if you want to change the way each column is treated in the typical configuration.
You can see this setting here is the typical setting. On the phone the typical setting for all columns is 100% wide. Whereas on the desktop the typical setting for two columns is 50% wide, the one-third is 33% wide and the two-thirds of 67% wide.
Let’s just say you didn’t want one-third and two-thirds but rather two fifths and three-fifths. You could change that on the desktop and in other devices.
As you can see these advanced settings are for the person who knows what they’re doing and really wants to tweak the columns but if you don’t really need to do that then you’re just going to leave this alone.
Add the Nav Menu to the Template
Now that you have gotten a little introduction to the Responsive Columns Box, let’s go back over to the Skin Editor and let’s start adding some elements in there. So, back to our front page.
In featured area the first thing we want to do is put our nav menu in. But before we put it in we want to give it a class so that it doesn’t borrow all of the Thesis menu styles. We’re going to give it a class of side- menu. This means that all of those drop-down parts that come automatically with the Thesis menu won’t exist for this because we’ve given a different class.
Although we still want to use the responsive output so we’ll leave that set. Let’s come over here to side menu or come over to class and change the class to side menu so that we can use our own menu styles. Then we’re going to shift+drag that and drop it into column 1.
Add Widget Area in Column 3
The next thing we want to do is put our widget area in column 3. So to do that, we‘ll come down here where the widget area is right now in the sidebar. We’ll grab the sidebar widgets and drop it up here in column three.
Add Headline Area
Otherwise we can just leave these things alone because we’ve turned the text box off already in the options. Except that we want to get the page title. Let’s grab the headline area because that’s where the page title is. I really want the whole thing. So I’m going to grab this headline area and I’m going to take it up and drop into column two.
We don’t have to worry again about author avatar or the byline or in that kind of thing because I’ve turned all that off. So we can just leave it alone just like it is.
We can take the post image and the featured image out. We just have content here which is the way we want for the time being.
Add Query Box
And then the other thing we need to do is to add a query box to go get that other content for us. We’ll create a query box and call this Front Page Featured Content and we’re just going to leave it like that. Shift+drag that over into column two and then put that down below the headline.
Let’s open it up. We’re not using the headline from that. Actually we’re not using any of these things. We’re going to take all those out. The only thing we want from that is the actual content. Excerpt we don’t want the author or headline writing like that, the only thing we want is the content.
Save CSS for the Columns
Let’s save our template then go back over the Skin Content. Now we’ve got our Front Page Featured Content and we’re going to choose page. Then select the page we want, which is that front page above the fold. And save that option and take a look.
Okay, it’s not quite transformed because we need to save the CSS for our columns. So let’s come back over to the Skin Design and save Skin Design one more time. I believe that will have saved our CSS.
Review the Front Page
Let’s reload this and see if we have it set up. Yeah I’ve got the Responsive Column setup. So let’s reload again and there we go. We’ve got menu, we’ve got content and we’ve got the widget areas.
Obviously there’s a bunch of styling that still has to happen here but we have accomplished a layout that’s ready for us to style.
Add Additional Widget Areas in Template
Now that we’ve got this part of it configured, the next thing we need to do is to put this widget area here above the content. Keeping in mind that this right here needs a widget area to do that. Then we’re going to put a widget area down in the footer. Okay, so that’s the next two things we have to do here.
Let’s come back over to our skin and go to our front page. Create one widget area and we’ll call this front page essentials. We are going to do that just above the loop right there in the content column.
Then in the footer, we’re going to put another and we’ll call it footer widget. One more footer widget and we’ll shift+drag that and drop that down directly above the footer. Save the template.
For the time being I’m just going to shift+drag this, the sidebar out. We aren’t using the sidebar and so there’s no reason to keep it there. Now save the template.
Add Widgets to the Widget Areas
Now let’s add some widgets to our widget areas. Come over to Appearance and Widgets.
Add Bio Widget
In front-page credentials we are going to use a visual editor for that. So we’ll drop in the tinyMCE one. The title is Annie Greig and then let’s get the content. I’m actually going to paste that into a notepad here first to strip the text down.
Copy that and then drop that in. Let’s style the text here. We’ll just make this an h2 and we may as well just center at all that. This looks fine for this text.
Add Footer Widget
Then in our footer widget we’re also going to use the visual editor. So drag that in and let’s look at the content for our footer widget. Where do those link off to? Okay, those linked off to different pages so I’m just going to take all of this and again, put in notepad.
Then I’ll copy that over to this widget and again for the moment, we’re just going to center it. Then above this text we need to add images. The site owners decided that they wanted to take these images here and put them in the footer.
So we’ll come back over to this widget area and we’re going to add those images. Click on add media and NCH is first, GHR is second. Let’s see did I say float left? Link to none float left that’s what I really want. Update that and then I’m going to insert the GHR one.
Unfortunately it looks like all of our images are different sized which is not ideal. Yeah, I don’t want this causing a problem here so I’ll fix the text align and clear the floats. That clears the floats for this.
Now it’s not next to it so I can add media. I forgot I want that to float left too. Nope it’s in the wrong spot. Can I just drag it up here? Instead let’s come back over here to the text view and let’s insert that in the text view. Add media, GHR, alignment left, insert into post.
Then add media, it’s the GHSC, insert into post and finally, the last one. Add media and it’s that one there. Insert into post.
Unfortunately they’re all different sizes so we may have to muck with that a little bit. Let’s save it and take a look at it to see how it turned out. Yeah, it’s a little problematic. We’re going to come back to this later because the only way this really works is if all of the images are the same height.
That image is how tall? That’s 150. This image is how tall? 91. This images is how tall? 93 and this image is 150 tall. I suppose we could add a little bit of top margin to that. I’m not sure why that isn’t all the way up at the top of this? Let’s park this on the side.
There’s a line break for some reason. There’s the br, image, image. Okay, let’s get rid of automatically add paragraph, that’s going to probably solve the problem. Okay that’s a little bit better.
Come back over to this and go to visual text. Let’s see what happens there now. Well, we’re going to have to mess around with that little bit as we work our way through this. We’ll probably add some top margin to these and we’ll probably need to add a little padding also but we’ll get to that when it’s time to style it. At the moment we’ve got the content there which is what really matters.