Build Your Own Business Website header image

How to Create a 3 Column Template in the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects - ,

In this session we demonstrate how to create a 3 Column template in the Agility Skin for Thesis 2. Agility doesn’t come with a 3 column page layout but it can easily be made by creating a custom template which is what we demonstrate here. We create an Agility column wrapper for the 3 column setup, add content columns and demonstrate how to set the widths.

Video Transcript

Okay so we’re going to go over here… so John asks, “Is there going to be a 3-column page in this skin?” Well, there’s not going to be a 3-column page but you can easily create a 3-column page. Let’s just do that just for grins here.

Let’s come over to our HTML editor and we’re going to create a new custom template. So 3-column template… we’ll create that template and then what we’re going to do is we’re going to copy the typical page template to it. Okay so now our 3-column template is arranged exactly like a 3-column template… I mean, exactly like our page template.

Then we come over to our content area which is where  you’d put those 3 columns, right? And we take our typical 2-column content. And actually, what we’re going to do is drag this out and then come down and create an Agility column wrapper, call it typical 3-column layout and drag it up here. Drop it into that space then we’re going to say it’s 3 columns and let’s say that we are going to make them… the left hand side is going to be ½ wide. That’s going to be our main content and then we’re going to have one quarter width and one quarter width. So there’s 3 columns like that. We’ll say save to that.

And then we’re going to create our 3 columns. And so we go to our Agility column and we’re going to say main content column. And then we’ll create a new column and we’ll call it sidebar 1 and then we’ll add another column. Not a container, I’m sorry. Another Agility column called sidebar 2. And then we’ll just drag these up into place. So drop sidebar 2 in the 2 column layout, drop sidebar 1, drop the main content. Let’s open them up.

Now I need to set these so that this says half the width of the column wrapper. The first one is ½. The second one is ¼ and the third one is ¼. Okay so now we’ve got our 3 column done.

Now we can just open up our typical two column content and just drag our WP loop with the post box into the main content column. Drag our main sidebar into sidebar 1. And then you know, we could easily just create another widget area, call it sidebar 2. Let’s see, sidebar 2 to widget area and drag it up into sidebar 2. And now you’ve got a 3 column layout.

So if we go over to one of our pages, let’s see… let’s go to a page and let’s look at our sample page here. And let’s just pick our 3 column template, hit update. View the page and there is is now. You’ve got your 3 column layout.

Oh no, I’ve got my menu in the wrong spot in this template. So we drag that menu back down, save it again. Now let’s see, I don’t have that on my menu. But in any case, there it is.

And with these kind of pushed up against that so we could take our typical 3-column layout and let’s… we don’t want to… let’s just save that again. And actually, in this case, maybe we want to make sure that our… actually, I don’t think our top menu area has any padding.

So yeah this maybe one of those cases where you know, we want to end up adding padding to this. But you know, that’s something you can do separately. I think you probably do want to add a little bit of padding here. And to add padding to this, probably the easiest way to do that is actually to write the CSS for that.

So if we came over here to your content area… oh that might… oh there it is. But come over to your content area and just deliberately, directly in content area, give yourself some top padding. Now I’ve got a system of variables here for padding so I’m just going to say P100 which is 24 pixels. And if we save that, there we go. Now we just added 20 pixels of padding to that.

Okay, let’s see. John, did that answer your question?

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
2 comments… add one
  • online11 January 21, 2013, 1:22 pm

    hi Rick, If I want my whole blog site to have this setup for every page to be 3 columns:

    1. Do I have to create a custom template as shown or can I just:

    2. Apply all fo these boxes and settings to the Home Template.

    Thanks,

    Eve

    • Rick Anderson January 21, 2013, 2:12 pm

      Eve, You need to make the same change to all of the templates. Changing the Home template only affects your blog page but won’t affect any other template.

Leave a Comment