Thesis 2.0 Guide – 2 column Layout

The default theme classic comes packaged as a 3 column theme, many people want to use a 2 column layout so this tutorial will show you exactly how to do that.

Follow these simple steps and you will be on your way ๐Ÿ™‚

Step 1

In the HTML editor create a new container called 2 columns

Click Add Box and a new container will be generated.

Step 2

Shift click and drag it to the container.

You will know when your on the right container because it will turn yellow. Once there just drop it and it will be added to the container.

Move 2 Columns above 3 columns. No need to use shift when moving boxes around in the containers, only when moving from one container to another.

Step 3

Open Column 3 and you will see 3 boxes called

  • Column 1
  • Column 2
  • Column 3

Now remember because we are moving from 1 contatiner to another we will use shift click.

Drag and drop columns1 & 2 to your newly created Columns 2 box

Shift click and drag 3 columns to the remove box.

By dragging the parent box 3 columns, the column 3 box will be removed too.

Step 4

Assign a class to 2 Columns.

Click the little cog next to the name and open the options.

Name your class columns-2

Close the options and save the html template.

Check your site, you will now have 2 columns but they have no CSS assigned to them so they will fill the width of the containter and stack. So now head over to the CSS editor.

Step 5

Inside the CSS editor select the package called 3 columns

Click it and the CSS options for this package will open up.

Now change the the number 3 to 2. So it will look like this.

Options

Select Options and select the drop down box and change to 2 columns

Once selected you will see 2 boxes, one for each column, set your widths in there.

Additional CSS

Finally head to additional CSS.

You will see the following css inside. Now you can either do 2 things.

Remove all of it and save, or keep going and make the changed found below.

Remove the following:

, .columns-3 > .c3 
.columns-3 > .c3 { border-left: 1px dotted $bc1; }

For the middle line don’t forget the ( , ) so the end results will look like this:

Final code:

.columns-2 { background: url('images/dot-ddd.gif') 513px 0 repeat-y; }
.columns-2 > .c2 { padding-top: $single; }

 

Note – notice for the background image, this is the line you see dividing the columns, if wish to keep it, then you will need to set the width here to the same width as you set in the column options for column 1.

Step 6

The final change you need to make is the reference, remember when you first opened the package for your columns you saw a text field called Reference. This is how Thesis 2.0 adds the CSS from your packages to your single CSS style sheet.

Now change the reference here from 3 to 2.

Once you have changed that to 2 then click Save and compile.

Check your site and if you followed these steps correctly you will have a 2 column layout.

Now watch me do it in less than 5 minutes.

Don’t have Thesis check it out here

Meet the Author

Matthew Horne

Matthew Horne is web developer who specializes in optimized development. He also builds custom solutions instead of reverting to plugins. Matthew Has a strong understanding of PHP, JavaScript, jQuery.

37 comments… add one
  • Radek Oct 8, 2012, 7:02 pm

    Great tutorial! I did this a few days back and love another aspect of the Thesis 2 theme. The ability to have a 2 column and 3 column design at the same time.

    If you want to achieve that, don’t rename the “3 Columns” package. Create a new one, with 2 columns. Just my 2 cents.

    Matthew, thanks for the support here and at the DIY Themes forum.

    • Matthew Horne Oct 8, 2012, 7:03 pm

      Yeh this theme has the ultimate level of control. The next tutorial im working on now is focussing on the skins options. This is an offshoot for it.

      • Radek Oct 8, 2012, 7:05 pm

        Can’t wait to see more. Keep on rockin’!

        • Matthew Horne Oct 8, 2012, 7:07 pm

          Not sure how much longer it will be, been writing it for about 6 hours at the moment including this one and the video.

    • Nicolaas Pereboom Oct 19, 2012, 11:46 am

      It would be good if we copy 3 columns package and then just apply changes as per tutorial. This is not possible now I guess?

      • Matthew Horne Oct 19, 2012, 11:56 am

        Its not possible just yet, but it will be possible in a future update.

  • KiwiBrian Oct 8, 2012, 10:17 pm

    Love your superb tutorials.
    Keep them coming.
    Cheers

  • Danielle Parsons Oct 11, 2012, 6:47 am

    Having an issue with post name not loading. Also having a problem with Widget 1 showing underneath my blog posts and not in right sidebar. I don’t want two Widgets but cannot delete Widget 2 for some reason.

  • Alex Oct 11, 2012, 8:07 pm

    I want to thank you for this tutorial. I am a new user of Thesis with very little web publishing experience. What exerience I had was over 20 years ago! I found your article clear and easy to understand. Thank you so much for the video it really helped me a lot.

    • Matthew Horne Oct 11, 2012, 8:12 pm

      Your welcome, there will be many more tutorials to come to help users out. ๐Ÿ™‚

  • Diane aka "The Curvy Goddess" Oct 12, 2012, 11:10 pm

    How do I create my landing page?! I am so lost. lol I decided early this week to upgrade to Thesis 2.0. Not sure if it was the right choice. Slow…learning…curve

    Thank you in advance.

    • Matthew Horne Oct 12, 2012, 11:16 pm

      In the skin editor, you can create a custom template.

      When you click on the home home button a menu appears, there you select Custom Templates Add New and then give the template a name.

      Also in the middle you will see a custom template already available called landing page.

      When you create a page in wordpress you can select the template from the right sidebar in the page/post editor of wordpress.

      • Nicolaas Pereboom Oct 19, 2012, 11:24 am

        Hi,

        I followed this tutorial and wanted to apply a 2 columns format to a custom landing page template. I now want to turn some of my pages into landing pages (e.g. http://adsente.com/?page_id=73). However, when I select the template from the right sidebar nothing happens.

  • Tom Masiero Oct 22, 2012, 8:43 pm

    GREAT tutorial!.. I got all the way to the last step but in my Thesis CSS Skin Editor I doesn’t show any options to change &3cols. It’s completely blank. Any suggestions?

    • Matthew Horne Oct 22, 2012, 8:48 pm

      You can just create a CSS package, using the drop down menu, select a columns package and just enter the relevant data as seen in the guide.

      • Tom Masiero Oct 22, 2012, 8:59 pm

        Awesome.. that worked.. but here is another issue
        http://clalerts.org/blog/ (looks good)
        but
        http://clalerts.org/blog/want-to-search-craigslist-while-you-sleep/
        Still has 3? How can I change it so it effects posts as well?

        • Matthew Horne Oct 22, 2012, 9:07 pm

          You will need to apply the same column layout to the single template, in the html editor, top left where it says home, if you click on that, a drop down list appears with other templates, so if you wish to have the same layout for different pages, you will need to apply the same layout for each template type.

          • Very Grateful Oct 22, 2012, 9:25 pm

            Thanks so much.. very helpful!

          • Matthew Horne Oct 22, 2012, 9:28 pm

            Not a problem, keep up the good work with thesis 2.0 and you will be well on your way. Glad to help ๐Ÿ™‚

  • Magnus Wake Oct 23, 2012, 3:01 pm

    Just a quick thank you for this tutorial and for thesis 2. I’m looking forward to more developers bring more skins and boxes!

    All the best

    Magnus

  • Glen Oct 23, 2012, 3:21 pm

    Great tutorial!

    But the fact that you have to do so much just to change from 3 columns to 2 shows me that 2.0 may not be as good as advertised. Look how simple it was in 1.8.x.

    • Matthew Horne Oct 23, 2012, 3:23 pm

      Yes, but if you wanted multiple layouts in which alot of people do, then it becomes more complicated.

  • Niels Oct 28, 2012, 6:25 pm

    Hey,

    Great article! Helped me out, Thanks for it!

    cheers
    Niels

  • Niels Oct 28, 2012, 6:49 pm

    Hi again,

    I have a problem! The 2 columns will be shown on the start site, but when Iยดm going in a post there is still 1 column (the content column) and the 2nd column is away ๐Ÿ™

    Can you help me

  • Annamarie Oct 29, 2012, 2:59 pm

    Very helpful as I dig into understanding what Thesis 2.0 can do.
    Thanks,

  • Guest Feb 8, 2013, 10:33 pm

    My default is 2-columns… is that strange? I’m trying to get a 3 column layout. How can I do this?

    • Matthew Horne Feb 9, 2013, 5:19 am

      I believe that was changed with an update to the skin because most people use 2 columns. You can reverse what I have done for 2 columns to make 3.

      If you go to the HTML editor, ad another container for your 2nd sidebar, give it a class name.

      Make sure the other sidebar has a class name and the container for the content also.

      Then note down these class names and go to the css editor, select the columns package and go to options, select 3 columns from the menu.

      Then open each column up, add the class, float left and set a width, either with px, or %.

      Let me know if you have any issues.

  • thachpham92 Mar 29, 2013, 2:53 am

    I love your birds ๐Ÿ˜€

  • Shuvo May 1, 2013, 6:55 pm

    Great article!

  • Kenneth Jun 24, 2013, 7:25 am

    thanks. using thesis and was looking for a way to make 2 columns

  • Orlee Berlove Aug 1, 2013, 4:19 am

    Having some troubles here. The containers that I am creating in the HTML tab on thesis are not showing up in the CSS tab. My assumption from reading this tutorial is that they are supposed to. What might I be doing wrong?

    • Matthew Horne Aug 1, 2013, 1:29 pm

      The HTML containers are just containers that can be used to house other parts of the HTML structure. They can be assigned any class or ID and then styled according to its purpose. I would use custom.css for the purpose of styling those.

Leave a Comment