Build Your Own Business Website header image

How to Create a Full Width Skin in Thesis 2.0 – Part 2 – Create the HTML for the Full Width Page Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

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

We demonstrate the process of using the Thesis 2.0 Skin editor to create a 2 column full width template. We create the various HTML Boxes, place them in their order and assign them appropriate classes and Ids.

Now what we’re going to do is select our page template to edit. As I do this, the first thing I’m going to do is just show it to you. I’m going to walk through the process of reorganizing this template and then I’m going to come back and talk about what we just did.

Current Page Template Layout

But first, I’m going to talk about the way this page template is laid out right now. And now, every single template starts off with a body, just like every webpage in the world.

The Body

The very first HTML content box is body. And the body can take a class so you could give a custom class to this body if you wished or you can automatically use WordPress custom body classes by checking on this box.

The Container

Inside of the body is a container and that container currently holds absolutely everything. If you open up the container box options, you’ll see that this container box options has a div for the HTML tag and the HTML id of that div is container. It could take a class as well and it could take a hook.

Hooks

And so if you were going to put a hook in here, you’d give it some kind of a hook name and then what Thesis does is it automatically creates 4 hooks for you. It’ll create the Thesis hook before the container of that name, the Thesis hook at the top of the container, the Thesis hook at the bottom of the container and the Thesis hook after the container. So if you put a unique hook name in here, Thesis will automatically create 4 hooks that you can use to hook something to.

Now we’re not really using code in this class so there’s not any reason for us to use hooks. But to the extent that you are going to write some custom PHP that you do wish to hook to a hook, you now have complete control over where those hooks are located.

Contents in the Container

Now back to the container, inside it there is a nav menu and below that nav menu is another container called header. And inside of that container is a site title and the tagline. Below the header is another container called 3 columns and that 3 columns has 3 columns in it.

Column 1 is the content column and it has the loop and the single post box. Column 2 is a sidebar column and so it has a widget area. And column 3 is a sidebar column and it has a widget area.

And then below the 3 columns is the footer and inside the footer, there is the Thesis attribution and the WP admin link. And those are all the HTML elements this page. On this page, those are the HTML elements of that site. You’ve got the wrapper around all this, the nav menu, the header, the 3 columns which is content, sidebar and sidebar and then the footer.

Change the Existing Page Template

We’re going to change all of that and we’re going to start changing that by creating those containers that I talked about earlier for the full width framework.

Add New Container Boxes

And we create those containers with this Add Box dialog. I’m just going to grab this Add Box dialog and drag it up here for a second. I’m going to add a new box and the new box is going to be a container box. I’m going to talk a little bit about these later. I’m going to call it header area. I’m using the same naming convention that the Thesis 1.8 uses for that space. Add that box.

I’m going to create another box container and I’m going to call it content area. Add that box and then I’m going to create one more container and we’re going to call that the footer area.

Adding an ID or Class to a Box

Each of these containers that I’ve created, have a name but because we may want to attach styles to them, we need to give them either an id or a class. I’m going to give these an id. An id is a name that only shows up one time on a page. I’m going to give this the id of header area. I’m going to give this one the id of content area and I’m going to give this one the id of footer area.

If you’re an HTML and CSS Ninja, you already know what those things are for. If you aren’t, I’m going to show you here before we’re finished.

Moving the Boxes

And now what I’m going to do is shift these into place. I’m going to shift and drag the footer area and when that container name lights up bright yellow, I can drop it into place. So now footer area is above this container. Shift drag the content area and shift drag the header area and now I moved the header area, content area, and footer area into this page or into this template.

Add Containers Inside the New Areas

So the next thing is to create those page parts of these areas that I talked about earlier, right? We’re going to add another container and it’ll be header area page. Add the box and then another container and it’ll be content area page. Add the box and then finally, a 3rd container and it will be footer area page, add the box.

In terms of their id or class name, I’m going to use a class for this and I’ll explain why later. But I’m going to use the class page_wrapper. I’m actually going to use the same class on each of these pages. So header area page has the class of page, content area page has the class of page and footer area page has a class of page.

Then I’m going to shift drag these into place. So shift drag the header area.page, drop it in the header area. Shift drag content area.page, drop it into content area. Shift drag footer area.page and drag and drop it into footer area.

If we expand those, we can see that now, each of these content areas contain another content box or another container. So let’s go ahead and close those containers for a second and we’ll open up our big container.

Moving Containers Around

Now in our big container, we have the nav menu. I’m going to put the nav menu in the header so I’m going to shift drag the nav menu and drop it in the header area. I’m also going to take the header itself and I’m also going to shift drag it and drop it into header area .page.

Now let’s expand this. You can see the menu is down below this section of the header. We can close up the header area now because I’ve taken everything out of there that we want. We go to content area .page and we have 3 columns here.

Change from 3 Column Layout to 2 Column Layout

Remember I said I wanted 2 columns? So I’m not going to drag the 3 columns into this content area. I’m just going to create a new container that we’re going to call 2 columns. I’m going to add the box and I’m going to give 2 columns a class. And that’s is going to be olumns_32.

This could be anything you want it to be, right? But I’m using a convention that I routinely use when I think of columns and that is the first number represents the number of divisions that the page gets. And the second number represents how many columns there actually are.

So this column’s definition is going to have 3. The page will be divided up into thirds and there will be 2 columns. Thus, one column will be 2/3 wide and the other column will be 1/3 wide. This is what this means. And it’s just my own notation. It’s not something that means anything to anybody else other than me. But that’s why I do it that way. It could be fish sticks. You can name anything you want. You’re just going to have to be consistent when you name it.

I’ve given it that a class and now I’m going to shift drag it into content area .page. And then I’m going to take column 1 down here out of the 3 columns, shift drag it and drop it into columns. I’m going to take column 2 that’s down under 3 columns, shift drag it and drop it into 2 columns.

Moving Boxes within Containers

And then I don’t quite have this organized the way I want it. That is, I want column 1 above column 2 and if you’re moving a box within its own container, you don’t have to shift. You can just drag and move it around. But if you’re trying to move a box someplace else, you have to shift drag. Okay so anyway, we have columns 1 and columns 2 lined up the way I want them.

So that’s content area and now what we have left is the footer area. And all I’m going to do here is to shift drag the footer and drop it into footer area .page.

Moving Boxes Into the Library

Now this container is left only with the things I don’t really want on the page. So I’m going to take the container and I’m going to drop it into what’s essentially a storage area or a library here for things that have been defined but not being used on this page. All of these things here have been defined inside of the Thesis classic skin.

If you were working on a blank skin, there wouldn’t be any boxes here because there wouldn’t be anything to find. But these things have all been defined inside this skin and these parts are simply not being used on this page. And I’m going to drag this container and drop it over there because I’m not using it on this page.

Deleting Boxes

Now if I really didn’t want it, I could drop it down here which would actually delete it entirely and delete it from every other template in this skin. So that’s kind of a drastic thing and you’re only going to do that when you know you don’t need it. For the time being, I’m going to leave this here in the library.

Review 2 Column Layout

We’ve got our header area, our content area, and our footer area configured the way we want them, that is we’ve got them laid out on the page and we’ve got the content placed inside of them.

Now what we do is save our template. And with the template saved, we can come back over and look at our canvass. And our canvass shows you what the layout looks like now. So the page is all the way across the width. There’s nothing here in the middle. And the sidebar is down here in between the content and the footer. And essentially, everything is stacking one on top of the other as they’re laid out in these boxes. And the reason that’s the case is because we also need to add some CSS styles to these containers.

0 Comments… add one
0 comments… add one

Leave a Comment