Thesis 2.0 Basic 2-Column Responsive Skin

I hope that y’all have been playing with Thesis 2 since it dropped October 1st, 2012. I have been playing with it the past couple of weeks and I’ve got to say that after actually putting some effort into Thesis 2, I’ve grown quite fond of it.

That being said, I went ahead and created a basic two-column responsive skin modification to the Thesis classic skin. So, if you’ve been wanting to make your Thesis 2 theme responsive, then keep on reading.

How to Install the Responsive Modification

It’s really easy to install this modification. As a matter of fact, It’s only going to take 2 steps to make your Thesis 2 theme responsive.

First, download the skin import data here → Thesis Class Responsive Modification (1918)

*Note: Be sure you are using the Thesis Classic skin before using these modifications.

1. Import Skin Data

Thesis Responsive Skin Editor

To import the skin data, you will need to navigate to the skin editor. Once you’re there, click the manager button in the top navigation bar. Then all you need to do is click “import skin data”.

Importing the skin data just makes the Thesis container slightly wider. I tend to prefer a 960px layout instead of a 900px layout. Also, the skin data import will get rid of the content/sidebar separator.

Thesis Import Skin Data

2. Add Custom CSS

Alright, so now we’ve got a 960px layout. Now, all we need to do is make it responsive. To do that, all you need to do is copy over this custom css below.

To do that, click the CSS button at the top of the window. This will take you to the CSS editor. From there, click the “custom css” tab. Then just copy and paste.

Thesis Responsive Custom CSS

img{
	max-width: 100%!important;
}
.wp-caption {
	max-width: 100%!important;
}
/* Tablet & Mobile */
@media (max-width: 959px) {
	#container {
		width: 100%;
	}
	.content {
		width: 69%!important;
	}
	.sidebar {
		width: 29%!important;
	}
}
/* Mobile to Tablet */
@media only screen and (max-width: 767px) {
	#container{
		width: 100%!important;
	}
	.content {
		width: 100%!important;
	}
	.sidebar {
		width: 100%!important;
	}
	.content, .sidebar {
		float: none!important;
	}
	.columns > .sidebar {
		padding-top: 0;
	}
}

What Do You Think?

This responsive skin modification is not perfect, and could be made better. All of the original Thesis Classic skin CSS is there. We are just overriding styles for certain device sizes.

That being said, this should be a good start for you to make your Thesis 2 website responsive.

If you have any questions or issues, please leave a comment below and I will get them ironed out.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Eric Binnion

Eric Binnion is a computer science student at Midwestern State University. When Eric is not online, he is usually volunteering in his community or enjoying time with his family. You can find Eric on Twitter.

Leave a Reply

Comments

  • Thanks for taking the time to do this type of stuff, I’m still trying to wrap my head around 2.0. I’m just so used to uploading a child theme/skin and being done with it.

    It would help if I knew the difference between a div and a container and a class, etc.. I just don’t know that stuff yet and you sort of have to in order to use 2.0 right? Maybe another idea for your next tutorial Eric, ha!

    I watch the tutorials that Rick Anderson did and I just can’t watch for more than a few minutes before my ADD kicks in, lol. He does a great job too though

  • Sreejesh says:

    What do I think? Well I bought thesis i was dissapointed that i could not afford to hire a designer to get my custom skin nor I had the time and skill to do it myself. So I felt it was a waste of an investment. But folks at thesis have made things a lot better with 2.0. Now with the help of tutorials and resources like yours. I’m able to tweak something. I’m in the work of my own theme now. Slowly doing hit by bit.

  • Patrick says:

    I have owned Tthesis since the very beginning when Chris was a nobody.

    How is this theme an advancement?

    Seriously?

    I’d like to support it all…but how can you do it?

    Show me how this theme is easier to use than a whole bunch of others at the moment.

    Again…I was a Chris fan long before WordPress was fasionable and as you can see I’m not pushing some other framework.

    Thanks.

    Patrick

    • Eric Binnion says:

      Hey Patrick,

      Thesis 2 is an awkward theme, and I don’t think that it is easier to use than many others. That being said, Thesis comes packed with some features that you will not find in many others themes, such as: easy 404 pages, Google+ authorship support out of the box, and schemas.

      • Patrick says:

        Eric:

        Okay thanks for the honest reply.

        I was getting paranoid about myself when I downloaded 2.0 and just didn’t seem to “get it” personally…lol.

        Good to know that I didn’t totally miss the boat on my first take.

        Cheers!

        Patrick

  • Chris says:

    Awesome! Thanks Eric. I’ve just learned a thing or two about Thesis 2 reading this post. Can’t wait to check out the skin.

  • Kevin says:

    This is what I’ve been looking for! I’ve been trying to figure out how to make my website responsive. Do I have to import the skin data above in order for me to use your CSS modification?

  • Nicolas says:

    Hi,

    thanks for sharing! Just installed it, it looks great. Just one little remark, for my site I’d like to have the navigation bar changing for a drop down menu on mobile device.
    I’m gonna try to do it myself, but if you have an information about how to do it that would be nice.
    If I found something I will let you know :)

    • Eric Binnion says:

      Hey Nicolas,

      I’ve done this myself for another website. I used a combination of jQuery and CSS. Check out CSS media queries and the slideToggle method in jQuery. I can plan on writing something for this in a week or so though if you’re not in a rush.

  • Twentyfourten says:

    Looking forward to the mobile navigation tutorial. Please let us know when its available. Thanks for responsive skin for thesis 2.0

  • Farzana Neha says:

    Hi Eric,
    I have been trying to make my thesis theme 3 colums. Sidebar at left side, and 2 columns for posts on the home page. Can you please help me on how I can do it? I have tried some tutorials but no luck yet.

    Thanks!

  • Chris says:

    Hi Eric,

    Thanks for the tutorial. It was very easy to follow. I noticed that this site uses Thesis 1.8.4. I currently use 1.8.5. Do you have an easy solution for older versions of Thesis, to make them responsive?

    Also, I noticed that the images are also responsive on this blog, and do not look distorted. On Thesis 2, however, they don’t shrink as nicely, but become distorted. What could be done to make images conform better to the responsive theme?

    If you need me to provide an example of what I am referring to, simply write to me and I can send you a screenshot. Thanks!

    • Eric Binnion says:

      Chris,

      Making Thesis responsive is not the easiest thing in the world, but it can be done by using a series of CSS media queries. If you look at the code I gave you in this post, I have a base style sheet for desktop browsers, then I override those styles for tablet and mobile screen sizes.

      This can be adapted to any theme using the same css media queries. The only thing that you should have to change are the .content and .sidebar to be specific to your theme.

      As far as responsive images, if you declare this code:

        img {
           max-width: 100%!important;
         }
      

      This will ensure that your images are never larger than the container that they are in, which is how the images are responsive on this site.

      When you are referring to Thesis 2 responsive, what skin are you using?

      • Chris says:

        Eric,

        I wish I knew what you were talking about. I’m such a novice when it comes to understanding coding.

        As for Thesis 2.0, I’ve been trying to work with it on my test site, using the Classic skin.

  • Awesome code! I’m in the process of migrating my Thesis 1.8.5 design to Thesis 2.0. It took me a while to finally give it ago (tried a few times in the past and gave up half-way). I just copy-pasted the codes (I have little knowledge of CSS) and it works a treat!

    Once you get the hang of Thesis 2, you can actually appreciate the easy-ness to maintain the blog (just drag a new container with your PHP code or CSS. throw away after or modify it, etc)

  • Charlie says:

    This is exactly what I have spent the last 4 hours searching for! It was very easy to add to the theme. I did not need the skin, but the CSS worked perfectly! Thanks! You have a new fan here!

  • Tim says:

    Very, very cool.
    Thanks!
    Tim

  • Sakthi says:

    Hi,

    Very nice tutorial for thesis responsive skin..

  • Karen says:

    Thanks so much for sharing this! I recently decided to start blogging and have been overwhelmed at times by all that I don’t know about the technical side of it. I’ve been able to Google may way through most of my issues, but I can’t seem to solve this one… I followed your directions to make my Thesis 2.0 responsive, but when I view it on my iPad the drop down menu bumps the last category tab to a second row. Is there something I could do to make the menu responsive? Thanks so much for any help you can give me!

    • Eric Binnion says:

      Hey Karen,

      There are many ways that you can fix this. When I visit your practical moments site, it looks like your entire header is not resizing. I would add a max-width:100% to your navigation menu and the header image. That should take care of most of your problem.

      Let me know how that works.

      • Karen says:

        Thanks, Eric, for trying to help me fix this. I did as you suggested, but it didn’t seem to work. When I changed the CSS for the menu it actually caused a 2nd tab to be forced to the 2nd row. You said there might be some other way to fix my problem? Thanks again for taking the time to help me out! I really appreciate it!

        • Eric Binnion says:

          Hey Karen,

          You may consider making each of the tabs either 100% width and stack them vertically, or 50% width and float them left. As I resize your website, I notice that several tabs end up going to a 2nd row.

  • olli says:

    Hi Eric,

    great. I was looking for something like that. Do you know what will happen, with my current layout like background, menu styling and so on?

  • Adolfo says:

    He Eric. Awesome Information, My Qs is. can I replace my current design with this code or is for new design???

    Thanks a lot for response

  • Michael says:

    Nice code, i tried it. But it didn’t work on ipad (portrait/Landscape) and Iphone. The site is to big and i have to resize all Pages.

    What should i do?

  • Michael says:

    So i had try it out, copied css code into custom css but it didn’t work, like it should.

    is it possible that there missing something?

  • Sumit says:

    Thanks buddy… You did a great job :)