I hope that y'all have been playing with Thesis 2 since it dropped October 1st,…
Thesis 2: How to Create a 3-Column Layout
There’s no denying that Thesis 2 has a bit of a learning curve. But, after talking to Matt and Chris, I am pretty stoked about some of the stuff that is already in Thesis 2, and even more excited for what they have planned for the future.
So, today I decided that it was time to start learning Thesis 2 and I made it my goal to learn how to take the Thesis Classic skin and convert it to either a 1-column or 3-column layout. Below is what I came up with.
A Quick Note
You will need a basic foundation with HTML and CSS. Art of Blog has a great introduction to CSS that was written by Adam Baird. If you are not experienced with CSS, I recommend you check out Adam’s CSS introduction before going any further with this tutorial.
How to Get a 1-Column Layout
Getting a basic 1-Column Layout with Thesis 2 is actually relatively simple. Here are the steps.
1. Navigate to the skin editor
2. Hold down Shift and drag blue boxes from the Sidebar column onto the Content column.
Next, you will need to reposition the blue boxes. Drag the two blue boxes below the Prev/Next box.
3. Navigate to the CSS editor and select the Columns package.
Change the Column 1 width to 900 px and set the alignment to default.
4. Remove additional CSS within the Columns package.
These 5 steps will give us a basic single column layout of 900 px. Please keep in mind that you will likely need to add some CSS to style your website to your liking. To start out, I would suggest you remove the additional CSS within the Columns package.
How to Get a 3-Column Layout
For a 3-Column Layout, let’s start by creating our 3rd column. To do this:
1. Navigate to the Skin Editor.
2. Add a new Container Box.
I would suggest you name it Sidebar 2. This is what we will use to hold our new Sidebar.
At this point, you can also go ahead and create an extra text and widgets box to add to your Sidebar 2 container.
3. Hold the Shift button as you drag your box onto the Columns container.
Once you drop the box on the columns container, you can then position the Sidebar 2 container below the Content and Sidebar containers. (Yes, I know that’s a lot of words. I will include a video!)
Once you have included the Sidebar 2 container, we can jump into the CSS editor and create our 3-column template. Let’s do that.
4. Navigate to the CSS editor, then click on the Columns package. Then click on the options tab.
5. Click the drop down and select 3 columns.
At this point you’ll notice that Sidebar 2 is showing up within the first Sidebar. This is because we have not reserved any place for Sidebar 2. Keeping in mind that we have 900 px to work with, let’s edit the Column package CSS to get a proper 3-column layout.
6. Use these settings below to get a 3-column layout.
7. Remove additional CSS in the Columns package.
What Do You Think?
Thesis 2 is a very powerful theming system. The flack it has received lately is not all justified and as documentation and tutorials are released Thesis 2’s true powerhouse ability will be understood.
I want to know what you think. Now that I’ve showed you how to build a 1-column and 3-column layout in Thesis 2, do you feel more confident about this theme?
What other content would you like to see about Thesis 2?