Build Your Own Business Website header image

What’s New in Thesis 2.0 Part 3 – Create a 2 Column Layout

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - , ,

Applies to -

In this session we customize the Thesis 2.0 classic skin and show how how to create a 2 column layout. We begin with the HTML editor and create the structure using a box. We show how to use the drag and drop feature to add the box inside the body area and move it around. Then we show how to remove the existing 3 column layout. To add styling we move on to the CSS editor and create a column package in which we style the individual columns width, alignment and padding. The process is completed by adding that reference package to the custom CSS.

Customize the Classic Thesis Skin

That’s the end of the theoretical conversation and at this point we’re going to just at what you can do with Thesis 2.0. And we’re going to dive in immediately with skins and customize the Thesis classic skin.

I have that skin activated. You could activate instead the Thesis 2.0 blank skin. Let’s take a look at the Thesis blank skin now and you can see that it is really and truly blank. There’s absolutely nothing there. It’s a totally blank canvass. But we’re not going to start with a blank canvass. We’ll start with the Thesis classic skin so we’ll go ahead and activate that skin.

And with the skin activated, this is what it looks like. It’s sort of this classic 3-column layout with the menu on top. And we’re going to go about the process of editing it. The first thing we’re going to do is remove this 3-column layout and turn it into a 2-column layout.

Change Layout From 3 Columns to 2 Columns

We’ll come over here to the Skin Editor and we’re just going to take a look at not the front page, but at the regular page because we’re going to create our default layout first. And if you look at this HTML editor or this template editor, what you have here are all of the main HTML elements inside of the Thesis 2.0 page as its designed here.

HTML Screen

You’ve got the body, every Thesis page starts off with the body. Every HTML page has a body but then Thesis adds a container to the middle of it which is a certain width and floats in the middle. And then inside of that, it adds a nav menu and then a header and then it has that 3-column layout and then it has a footer.

Create the First Box

We’re going to start by changing this 3-column layout to a 2-column layout. And we do that by creating a box. I’m going to drag this Add a Box up here so it’s easy for me to get that. We’re going to create our first box and that first box is a container. And we’re going to give this new box a name and it’s going to be 2 columns and add the box. And then if you look at the little gear icon here, you can give an id. You can give it a class. You could even put a hook in here. But what we’re going to do is we’re just going to give it a class name for the moment and this is going to be important for the styling part of it.

So we’re going to give it a class name and I’m going to call it class_32. This is my own notation. You don’t have to do this yourself. But my own notation is I’m dividing the page up into thirds and it’s a 2-column layout. So obviously, one of the columns will be 2/3 and the other column will be 1/3 and that’s what this means name means to me. That’s how I’m using this. Not class, I’m sorry, columns_32 and close that.

Drag and Drop to Place the Box

We’ve now created that box. Now do a shift drag over to the container. When the container top lights up bright yellow, that’s where you can drop it. And now my two columns are dropped inside of my container. I’m going to drag that 2 columns down here to below the header and I’m going to open up the 3 columns.

Now we’re going to take the first column out of 3 columns. So we’re going to hover over column 1, shift and drag it to 2 columns. And then we’re going to hover over column 2, shift and drag it. And if we expand 2 columns, now we’ve got column 1 below, column 2 above and I want to change that. If I’m moving inside of a box, I don’t have to hit shift. I can just drag. If I’m moving from one box to another then I have to hit shift before I can drag.

Remove the 3 Column Box

Okay so now I’ve got a 2 column box with column 1 and column 2 in it. And in fact, what I’m going to do now is just move this 3 columns off of the template entirely. So I’ll shift and drag and drop it right there. So I didn’t delete it. I didn’t throw it away. Essentially, I put it in my toolbox here but I removed it from our working area.

Review the Changes

Now if we hit save template and come over and take a look at it, it doesn’t have exactly the desired result because now we have one column full width or content column is full width and our sidebar column is full width. And that’s because we haven’t created a style to apply to this which is what we are going to do now.

CSS and Packages

Let’s move to our CSS. And the way you create these styles is you create packages. So we are going to create a package and select a drop down to pick a package and this is a columns package. So we’ll select our columns and we’ll say add package and we’ll give it a name. The first one was 3 columns so we’ll call this one 2 columns.

The only purpose for this name is so that you know what it is. Now this reference is pretty important though so is this reference, we’re going to call it columns_32. And in fact, I’m going to copy that and make that my CSS selector as well. Remember I said when I created that columns that I would give it a class of columns_32? So when I gave it a class, that means the CSS selector gets a period. If I’d given it an id, it would be a pound sign instead. But we’re just going to leave it as a class.

I’ll show you what this columns_32 relates to back in the HTML in just a moment. But in any case, this is the CSS selector. And the selector here includes whether or not it’s an id or a class which is what that period is. The period is a class. A pound sign is an id. So when it says CSS selector, you need to include the selector. When it says class, you won’t include the selector because that’s implicit.

Options

Now we come over to our options. We could have as many columns as we want but we’re going to do 2 columns here. And column 1, we’re going to give a width of 636 pixels. We’re going to give it a left alignment. In terms of padding, I’m going to give it 11 pixels of right padding and I’m going to give it 15 pixels of left padding and let it go with that.

For Column 2, this is something different than what I did yesterday. Column 2, the width, I’m going to say is auto which means it will expand to fill the available space. And I’m going to make it a right alignment and then I’ll go down to padding here. And in the right padding, I’m going to give it 32 pixels. Now the reason is that I’m going to end up with a page background that needs this 32 pixels in order for it to line up. In fact, I’m going to give it 22 pixels and we’ll hit save.

Add a Reference for the New Package

And so I’ve now created this package, columns_32 package. I have to place a reference to that package in the skin CSS here. And the reference to that is an ampersand and then columns 32. So this is the reference right there. And by placing it in here, what I’m doing is I’m telling Thesis when it compiles the CSS to use this package in compiling. If I left it out, it wouldn’t be using the definitions here. And so we’ll go ahead and Save and Compile the CSS.

Review the Changes

Now come back over here and refresh our page. And now we have our 2 column layout here with the one column as our content column and the other columns are sidebar columns. And that’s the case except for, as you can see, our blog page which hasn’t been changed, it still has 3 columns and so does a Single post because we haven’t changed those templates yet. So let’s go back to the front page. The front page does have this template because the front page is automatically going to take the style of page unless I change it.

Lauren asks so why did I leave this 3 columns package in here? And the reason I left it in here is because we still have pages that have 3 columns. If I took this out, hit Saved and Compiled, the definitions for 3 columns would no longer be included in the CSS file. And now, this blog page would just all be funky because now everything would be 100% wide because there’s no definition here. That’s how that works. So as long as I’ve got a 3-column layout as part of this then I’m going to save that 3-column definition.

8 Comments… add one
8 comments… add one
  • Dan January 11, 2013, 5:42 pm

    My default Thesis 2 install was not 3 columns so when I followed this step by step it didn’t work for me – I still had my new columns stacked on top of each other. After some hair pulling, I figured out that I needed to add the c1 and c2 classes to the boxes inside my 2 Column container (they just had ‘content’ and ‘sidebar’ originally). Hopefully this comment will save someone else the same aggrevation. 😉

    • Rick Anderson January 12, 2013, 11:35 am

      Thanks for sharing your experience with this

  • reem rizvi January 12, 2013, 11:19 pm

    First of all I want to Thank you Rick for these awesome lessons.
    I am totally new to developing part, I have a website that was custom built in 2010 and something totally went wrong. I am so done with my developer tantrums that I have decided to do it myself.
    I have installed lastest thesis 2.0.1 version and my default skin also does not show 3 columns. I am planning to do 2 columns following your video. My question is the default skin I have got has 900px width, can I increase the width of the container and as well as the new columns I will make to the total of 980px? Also what is the main difference b/w sidebar and columns, as in older version they have columns but my skin comes with sidebar.
    Thank you once again.

    • Rick Anderson January 13, 2013, 5:51 am

      Reem, Thesis Classic has changed a bit since this presentation. You can make the columns and the page wider by adjusting the width of the Container (in the Container package) and then the widths of the columns in the Columns package.

  • reem rizvi January 13, 2013, 8:18 am

    Thanks for a quick reply.
    So I just have to increase the width of the column and sidebar and the width of container in the css package? But how do I remove the default separator lines in the theme. I read you mentioned somewhere that they are background image. But is there anyway I way remove them al together and get plain clean page.

  • Maxine Stephenson March 5, 2013, 8:16 pm

    I’m also finding that the Classic skin has been “updated” to reflect different stuff which is throwing me off (again). I would also like to know how to remove the separator lines. Has there been a reply to this last question, or perhaps a more recent video to clarify this somewhere?

  • Ryan @ Digital Photography Hobbyist December 3, 2013, 11:15 am

    Thank you very much for the tutorial. I just switched from the old 1.8 version of thesis up to the new version and changing columns apparently became much more of a task than it was before!

    • Rick Anderson December 4, 2013, 4:02 pm

      Sure, it is a bigger task for some now that packages are on the way out. Also, once you want a responsive site, structural HTML becomes quite a bit more complex.

Leave a Comment