In this session we introduce our responsive versions of the Thesis Classic skin and demonstrate how the modifications work. We show how to add sidebars, set up the skin and how to add the responsive meta tag to the skin using the BYOB the mea helper box.
So I’ve created a couple of things here that I would like to demonstrate. One of them is the new responsive skins for Thesis. These are actually responsive classic skin versions so they’re not themes in it of themselves but they are modifications to the Thesis classic skin that you can download and import into your site, and they are all mobile-responsive.
So the first thing to do is open up a site that has Thesis installed. Let’s try this site. Okay so we’re here in this site. Come over to Thesis. Make sure that we’ve chosen the classic skin, that’s the skin that we’re working on now and that is the skin that’s active. So come on over to our skin editor.
Now we are here with the default version of the Thesis classic skin and I’m going to install the full width classic skin with the content on the right hand side. So the way to do that is to hover over this, right click on it and say “Save link as” and when it asks you how you want to save it, don’t change its name, just go ahead and save it. This is a text document and once it’s downloaded here, it will be available for us to upload.
Then we come back over to the skin editor and go to the manager and select import skin data and choose the file that we just downloaded. And let’s see, let’s organize it by date. This is the one that we just downloaded. So upload that, import that data. And now that it’s finished uploading and importing, we have this Thesis version, the responsive version of this theme with the content on the right and the two sidebars on the left.
And I think I’m going to drag a couple of sidebars into that so we can see what it looks like. So we come on over to Appearance and Widgets. And you’ll notice there’s only one widget area and that’s because of the 3 column versions of classic Thesis, even though they come with two… what appear to be sidebar columns, they only have a single widget area. So we’ll go ahead and take this widget and drop it into that widget area. Let’s see what it looks like. Save the template. Save the css and now refresh the page. There we go.
So here’s one little widget area that we created and then there’s this little text box. If you want two widget areas, you’ll have to come over to the HTML section and open up the sidebar columns. And sidebar 1, there’s the text box and then sidebar 2, there’s widgets 1. If you want a second widgets box, you’ll have to create it here with add boxes and then just call it whatever you’d like. But I’ll call it widgets 2. Add the box. Shift and drag it into sidebar 1 and then I’ll put the text box above that. And save the template and then we’ll come back over to the Appearance and Widgets one more time. Now we have both sidebars here, widgets 1 and widgets 2. And I think what I’ll do is take this text box and put it on widgets 2, refresh it. There we go. Now we have a little text box on the top and then we have a widget here and a widget there.
Okay so at that point we’ve got the skin set up, but it’s not fully responsive yet. And that’s because we need to yet add a meta tag to this site that will make it responsive in actual mobile browsers and so the way we’re going to do that is to come back over to my site and go to member benefits and plugins for Thesis theme 2.0. And come down to the responsive meta helper box and then download the plugin. So you just right click on that, “Save link as” and go ahead and hit save.
Now something to bear in mind is that this is not actually a plugin. This is a box and so it doesn’t install like a plugin does. I recently tried demonstrating how to use this by trying to install it as a plugin. And I thought there was a mistake some place in my code but the mistake really was I’d forgotten that it wasn’t a plugin and that it’s actually a box.
And so to install a box, what you do is come back over to your Thesis admin panel and go over to boxes and select boxes. And then upload the box, choose the file. This is the responsive meta zip so open that up, add that box. It says the box is successfully installed. And then what we’re looking for is that one right there. Put a check box on the side. If it doesn’t have a check box and it’s not being activated, so there’s a whole bunch of boxes in the skin that have not been activated. We’ll go ahead and activate the responsive meta tag helper. Hit save boxes and that’s all there is to it.
So now if you’d look at this in a mobile device, you would see that this is actually responsive. And we’ll take a look at that in the responsinator. Now the responsinator doesn’t actually need that meta tag even though mobile phones do. But this is what it looks like. So it’s got the menu up at the top and then the header and then it’s got content and then the first sidebar and then the second sidebar. And then some of these that are really wide, we end up with both sidebars side by side. And again, if it’s really wide then you still see everything in one full screen like that.
Now if we refresh the screen here once and then view the page source, you’ll see this meta description or this meta tag I was talking about. And it’s this meta tag right here, it’s meta name equals view port, content equals initial scale equals 1. Use a scale bold no, maximum scale 1, width equals device width. This is a piece of code that is necessary in the head of every page in order to make the page render properly in a mobile device. And that’s the code that this one box provides.
That’s really all there is to it. Now you can just start adding your content and doing some styling and you’ll have a fully responsive skin.