Build Your Own Business Website header image

Restructure the Layout of a Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

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.

3 Comments… add one
3 comments… add one
  • Martin Slack July 11, 2017, 12:16 am

    Whilst I understand this exercise was intended to illustrate the use of html container boxes, there is a much easier way to achieve a full width layout.
    Just go to skin design – layout and dimensions and change the content and sidebar widths to something like 770px and 310px. The full width then is the sum of the 2.

    • Rick Anderson July 12, 2017, 8:25 am

      Martin – that doesn’t really give you a “full width framework” style of skin. Yes you can set the widths of the columns but that doesn’t define full width sections.

      Typically in this case you would be looking for a full width section for each of the header, content and footer that would allow them to be styled independently.

      This does require another HTML element to wrap the page width element.

  • Martin Slack July 12, 2017, 3:13 pm

    Rick – what I discovered is that the Classic Responsive variable $w_total derives its value as the sum of $w_content plus $w_sidebar. The width of the .container class seems to be $w_total. So, this page: was set to 1080px wide by setting content and sidebar widths to 770 and 310 (even though there is no content or sidebar boxes). You can also set the 3 values to 71%, 29% and 100% in the skin editor CSS and the page becomes full width. The problem with this though is that it is lost if you save skin design options again.
    The only disadvantage I can see is that, when Classic Responsive is updated, I shall have to remember to change the 2 skin design values.

Leave a Comment