What we are going to do give the default Thesis Classic Responsive an updated look. This is the customization that we have done so far to date on Classic Responsive. It has a page width look. What people are doing much more often these days instead has horizontal appearing strands that span from one edge of the browser window to the other.
Change from Page Width into Full Width Appearance
What we are going to do is take Classic Responsive and restructure the layout of the skin making it full width skin. And we’ll demonstrate how skin data management can revolutionize your work process as you do something like this.
Let’s just go to an example of something like this. This site is using Thesis Classic but it is a full width style skin in that it’s got these elements that span all the way across the page. And then it has elements inside of those that define a page width.
So you’ve got this background image here in this feature box. The element spans all the way across the page but then the page width is inside of that keeping the content in place. So that’s what we are trying to do here.
Create 3 HTML Containers
First we’ll start of in the Skin Editor. It doesn’t matter which template we start on. Since the container is the element that provides the page width, we have to create wrappers that we put multiple containers into instead of the way it is right now.
Essentially what we are going to do is start by creating 3 HTML containers. A mistake that beginners make all the time when creating boxes is not to name them. That’s another thing that you might not go to heaven for depending upon what era you live in.
Header, Content and Footer
This is going to be the header area and I’m going to give it an ID of header area. If you are a long time Thesis user then you are familiar with this nomenclature. We’re going to call this one content area and we’ll give it an ID of content area. The only reason for the IDs is to be able to target stuff inside of the container. You can make a case for not using IDs. Then footer area.
For those of you wondering what we are doing here. We’re just creating HTML wrappers, essentially divs with IDs that we are going to start putting stuff in.
Requires More Resources Than Page Design
>>Chris: I want to raise one point about this. Rick showed you guys the Page design on the layout there that we were looking at previously, the one he’s been working on. It looks like a page set atop a desk or something like that. The page is kind of squished into the middle of the browser window and that’s the way it looks.
He’s saying we want to produce a layout that actually consists of full width elements that span the entire width of the available browser window. They just stack one on top of the other.
The page width version, the default setup, that you see right now that is in the template editor that he is showing you on the screen, that layout is cheaper. There’s less to it, it’s simpler than that full width section.
So he’s created the header area, content area and footer area for this new layout and what we are going to see is that it requires 6 of these containers to achieve a different look. Overall the presentation requires 6 containers vs one container in the original setup which is part of the reason why the Classic Responsive uses that as a default because it’s the cheapest available option.
Add Names and Classes
>>Rick: And we’re only going to create 5 new containers. We’re going to re-use one of them. Since we are talking about containers let’s open this one up. What we are going to do is use the same class as this container. The HTML class of container. So we’ll call this “header container” and give it the class of container.
>>Chris: Using that class is pretty genius for retrofitting the layout. It’s really not that bad.
>>Rick: And then another HTML container and we’ll call it the “footer container”. Give it a class of container. And that’s it. So we are going to drag the header container into the header area. Drag the header area into the body. Open that up. Drag the nav menu into the header container and the header into the header container.
Now we’ve got this one thing that spans the width. One thing that creates the page and then the original header and nav menu.
>>Chris: Real quick, do you know the tip about moving stuff into the top or bottom of a container? They keyboard shortcuts?
>>Rick: I do not know that.
>>Chris: So by default when you hold shift and drag a box into a container it places that item you dragged in at the top. Let me see what sequence it is here before I spout it off.
On Windows If you hold alt and shift or on Mac option and shift while click dragging, it will drop that box to the bottom of the container.
>>Rick: Let’s put the container in the footer area and try that. Alt+Shift, drag and it went down to the bottom. That’s nice, I like that. Excellent.
So now we’ve got our footer area and our footer container. We’re just going to grab our footer and drop it in there. Then we’ve got our last one, our content area. That comes down below the header area and we shift drag our container into the content area.
Now we have 3 horizontal elements, each of them with a page width element and each of those page width elements holding all their original content.
Save the template. The first time you do this you are going to have to do it in every template.
Let’s come over to our Single template and go through that same process of creating and moving containers around. I’ll just do that very quickly here. This is a quick process but you still have to do it for every template. Save the template. The good news is that you only have to do this once.