Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 16 – Example – Create a 3 Column Custom Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

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.

Adolfo has a question, he asks how to create 3 responsive columns. Adolfo, I’ve just unmuted your microphone if you’re with me. Otherwise I’m going to assume by that, what you mean is that you wish to take this two-column layout into a 3-column layout.

Change Column Dimensions

Now there are a variety of ways in which you can do that but the way we’re going to do it is to make 2 columns this size and then 1 column this size. So we should go over here to Design Options for just a second, Skin Design, Layout & Dimensions. Okay so we’re going to make this 280 and then 280×2 which is 460. We’re going to keep it in 2 columns here, say 460 and 280. Save those design options, come over and look at our thing here.

Make Changes to Front Page Template

Now that it has gotten smaller, what we’re going to do is to create another copy of this in the Skin Editor. So we come over to Skin Editor and let’s go to our Front Page. We’ll just do this on the Front Page for the time being.

So we’ve got WP Content Column and our Sidebar. We’re going to add a new container and our Sidebar 2. It will be a div. We’re going to give exactly the same class. We’re going to give it a class of sidebar and then we’ll come in here and drop it into Columns. We’ll put it at the bottom of this and then we’ll open up Sidebar 2 and then we’ll put our Home Page Query Box in it.

In this case, we’re going to show only Headline and Excerpt. post_box and also grt. GRT stands for Golden Ratio Typography which is a class that exists inside of Thesis Classic Responsive that will adjust sizes of stuff. This is going to stay in h2. Now we’re going to save that template, we’ll come over and look at it.

Widen the Template

Now what we want to do is widen the template so that this can exist side by side and in general, the container width is set to 740 so we will add 280 to 740 making it 1020. This is the template front, so we’re going to come over here and say, in our custom CSS, we’ll use the templates class so we’ll only apply it in front page. .template-front space .container{ and then we’ll say width:1020px.

Create a Media Query

And we are also going to need to create a media query so we’ll come back to that in a minute. So .template-front .container{ width:1020px; Let’s see if that solves the problem of the stacking sidebars. That does.

Now we have two sidebars, each one side by side. It doesn’t really matter what our content in here is, what matters is that we have 2 columns side by side and if we play with responsiveness, I think it’s going to break because it’s not going to make it smaller.

Now we’re going to come over to his CSS and we’re going to go down to his media queries which are down at the bottom. So he’s got a break at 450. He’s got a @media all max-width content so I’m just going to copy that and come back over to custom CSS and add the media query. Here the max-width is going to be 1020px.

We’re going to go back and look at his queries, so this is the code we want to change. In here, what we want is all this. Grab that media query and then the max-width here is 1020px. Then we’re saying .template-front in front of all this stuff. .template-front body, .template-front .container, obviously we don’t care about .landing .container because that is a whole different beast. So .template-front .header. Let’s see, .landing .header can just be delete. .template-front .columns.

Let’s see what happens with those changes. Let’s just refresh this and then let’s narrow it down. There it goes, right? Everything drops down now to 2 columns. We’ll come out here and it’s fine at 3 but then we come in here and then it goes to 2 and it stays to 2. So that’s a way to make a 3 column layout be responsive using Thesis Classic Responsive Skin.

Recap of the Process

So essentially, set the size so that’s equal to one column and to one content area, and then create another column with the same class as the existing sidebar column. Put everything you want in it and then change up the CSS so that the container size changes to the overall width and then create a media query for that overall width that allows it to behave in the same way as the max-width.

Theoretically, you could come over to Skin Design here. If you did it everywhere, you could theoretically come to this and instead of max-width, you can say max-width:1020px. In Skin CSS, that may or may not survive an upgrade but that would be relatively easy way to handle it also.

0 Comments… add one
0 comments… add one

Leave a Comment