Here we go, Barking Chihuahua Cafe, this is what our com page looks like and this is what our homepage is going to look like when we get done. The first thing we’re going to do is take this 3 column layout and create a 2 column layout.
Thesis Skin Editor
We’re going to start in the Thesis Skin Editor and we’re going to look at Boxes. Now, these are HTML boxes as opposed to the boxes that we talked about here. Don’t confuse those two things. This box can create a box over in the HTML Box Editor but this is really just an HTML thing. If we look at the structure of the default theme, what we have is the body. Inside of that we have a container and this is a page width container so it sits in the middle of the site.
Inside the container, first we have a Nav Menu then we’ve got a header container. If we open up our header container, it contains the site title and the site tagline. If we look at the 3 column layout we have here, we have this container that holds the 3 columns, Column 1,Column 2 and Column 3. Column 1 has the WordPress loop and on the page, it has a single post box that is, it shows a single style of post like a page.
Content Column
In it, it’s configured to show the headline and the content although you can also add the author avatar, description, you could use an excerpt instead, number of comments, categories, tags, Thesis post image, Thesis thumbnail, WordPress Featured Image, any of those can go in here. If you define taxonomies, then custom taxonomies would also show up in this. You can drag a custom taxonomy into place and have that show up as well. That’s Column 1 which is a content column.
Widget Column
Column 2 is the widget column and it’s just Column 2 with the widgets setting in here and the same thing is true with Column 3. The footer, is just the footer container, it contains the Thesis Attribution and WordPress Admin Link. Those are the HTML elements that are showing up in the main page. What we’re going to do is create a brand new one, a new HTML element and that is going to be a box so we open up this thing that says, Add Boxes.
The type of box to add is going to be a container. We’re going to create an HTML container and we’re going to call it 2 Columns. We’re going to add the box, here it is. This button here shows or hides the box options. I’m going to open that up and that allows to me to set an HTML ID, an HTML class and if for some reason rather I want to hook around this thing, I could put a hook name in here and it’ll automatically create the hook.
Create the Hook
For example, in order for columns to work, I need this HTML class to match a package I’m going to define in a minute so the class is going to be column-32 which means in my jargon, the page is divided up into 3 parts but it only has 2 columns which means that 1 column is going to be 2/3 wide and the other column is going to be 1/3 wide. That’s my own way of keeping track of this because I’m going to use a columns-2 in a minute.
I’m just going to say the unique hook name, I’m going to call it main_content. We’re not going to actually use this hook, I just want you to see how that’s created. What it will do is, it will create thesis_hook_before_container_main_content, thesis_hook_container_main_content top, thesis_hook_container_main_content_bottom and thesis_hook_after_container_main_content. That’s what it’ll create automatically for hooks based on this name, main_content.
We’re not going to use the hook because you have to use programming to use hook and we’re not going to do any programming but that’s how you create your own hooks in Thesis. We can go to the Admin options and say we want this box to always open up by default in the template editor but I’m not going to choose that. This is good enough for me and we’ll just go ahead and close it then shift and drag to bring it into position.
Arrange Columns in the Container
If I want it in the container, I just drop it in the heading of this container like that, just drop it and now it shows up on the top. To move it within the container, I don’t need to hit shift so I can just move it here and I want to move it below the header so I got a 2 columns above 3 columns. Now what I want to do is take column 1 out of column 3 so shift, drag and drag it up into column 2 then I’m going to take column 2, shift drag and drag it up into column 2 then I’m going to take 3 columns out of this entirely. I’m going to shift drag and bring it over here and drop it here.
Now I have 2 columns here, except I’ve got them reversed so I got Column 1 at the bottom so I just drag it up and put it at the top so now I’ve got Column 1 and Column 2 and I’ve got this 2 columns thing. If I hit save template, we can go over and take a look at the site. It’s not going to look right but you’re going to see it looks different. The reason it doesn’t look right is because Column 1 is full width and Column 2 is full width because I haven’t created a package yet that defines this.
Create a Columns Package
However, you see if we go back over to the home page, it’s still retaining the 3 columns style because all I did was change the page template. Come back over to the Thesis Skin Editor, we’ll click on CSS and we’re going to create a new package. It is going to be a columns package and if we add the columns package, we’ll give it a name, let’s just call it 2 Columns. We’re going to give it a reference, I’m going to call it columns_32. I’ll show you what that reference is for in a minute and the CSS selector that I want is also going to be .columns-32.
Difference Between Selector and Class
Notice the difference between selector and class. Selector here will take any selector so you could put a # sign in front of this so you’re picking up the ID and you could even be more specific, you could add other selector elements. The selector can be as long as you want it to be so this is going to be a way for you to create very specific CSS for a very specific application.
It doesn’t just have to be a single selector in here but we’ve created this, named the 2 columns, give it a reference of columns_32, give it a CSS selector of .columns-32. Come over to options, select the number of columns, we’re going to select 2. Column 1 width in this case, is going to be 636px and I want it to float to the left. In column 1 padding, I’m not going to give it any top padding but the right padding is going to have 11px and the left padding is going to have 22px.
It’s important to note that the way this works is, this padding comes off of the overall width so 636 is the overall width of the column and 11px of padding and 22px of left padding means that the content is going to be 600px wide. So content of 600px with a right padding of 11px and a left padding of 22. Come over to Column 2, it’s going to be 300px, I’m going to float it to the right, I’m going to give it 30px of top padding here. Right padding is going to have 22px, left padding is going to have 11px and I’m going to hit save to that.
Automatic Clearing Divs
Now, if I wanted some additional CSS, I could actually write additional CSS right here if I felt like I need to but I’m going to need to. What this does is this automatically creates the CSS for this 2 column thing including clearing the divs. If you know anything about floats, CSS and HTML, when we said we want a one thing floating left and another thing floating right, this automatically creates the clearing of those divs so that thing that happens below it, doesn’t try to float beside it.
In order for this to show up, we have to take this reference and place it over here. You can have packages that you don’t actually write CSS for. You could have packages that you want to keep around but you don’t want it to be added to your skin because you don’t need it at the moment. There isn’t have to be a one to one correspondence between your packages and this. This is where you tell Thesis what CSS you want to write.
In this case, we need to add the reference which is $columns_32. If we hit save and compile, it’s now written the CSS. I think I must be missing something, columns_32, $columns_32. I called the CSS selector columns-32, must be a different CSS selector so we come back over to this and we look at the CSS selector, it’s column_32, not columns. This is where that correspondence has to happen. This HTML class needs to be the same as the CSS selector.
Notice that the HTML class doesn’t have a period in front of it? That’s because it’s a class so it automatically has a period. If you put a period in here, it’s going to confuse it. Same thing with HTML ID, if you chose to put an ID in, you don’t have to put the # sign in, it automatically supplies the # sign. Save the template, come back over, refresh it and lo and behold, now what we have is a 2 column template with the sizes that we specified that we wanted. Our pages have that and our home page still has this.