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.
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.
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.