Thesis 2.0 Basic 2-Column Responsive Skin

Blogging.com » Blog » Tutorials » 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 (2830)

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

1. Import Skin Data

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.

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.

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.