Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 5 – The Relationship of Boxes to Actual Pages

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.

So, now that you understand the types of Templates in Thesis 2.1 this leads us on to looking at the relationship of the box to the actual page graphically. We’re going to compare an actual page to the boxes in the template that page is using. And as I said before, boxes are used to create templates. They are used to add HTML structure to the template, to add content to the template and often to add both.

Let’s take a look at another site, it’s different but it’s still the same kind of thing. We’ve got the front page that has all this content in it. This is what it looks like on the slide where it starts off with the HTML body and then it has the container, columns and footer.

The HTML Body

The body consists of everything that you see on the screen. The body spans from the top of the screen to the bottom of the screen, from the left of the screen to the right of the screen. Anything that you can see inside your browser window is contained inside of the HTML body and every template has at a minimum that body.

The Container Box

Inside the body then you have the container box and in this case the container box is the thing that gives the page itself its definition. So, it spans the width of the page not necessarily the entire browser window but just the width of the page and then from top to bottom of the page.

That is the container box, everything else that is inside of this page is contained inside this container box. If we just come over here and look at this, you can get a graphical sense of it. It is essentially everything that goes from this edge of the page to this edge of the page. That blue section is the HTML box called container.

The Nav Menu Box

Next up is the nav menu box, it’s that little blue box that sits in the editor and that is the content placeholder for the menu which just sits along this one section, above the header.

The Header Box

Then the header box which is directly below the nav menu contains the site title and the tagline or could contain the header image or could contain anything that’s inserted inside of that header box. So, if we look at that header box, in this case, it has a site title and the site tagline in it. That is this section of the page.

The Columns Box

Then the columns box is the box that sits directly below the header. It contains the content and the sidebar section of the box.

The Footer Box

And then the footer box is this little piece down there at the very bottom which contains the footer.

Recap of HTML Boxes

So when you’re looking at the page it has the HTML body that contains everything, the container that contains all the rest and defines the width of the rest and then inside of that container, at the top is the nav menu, header, content and footer.

The header box has these two sections site title and site tagline as I showed you. This is the site title, this is the site tagline. Note that these HTML elements span the entire width of the container that they are inside of. They are container inside of the header. Even though the site tagline only takes up this much space, the actual container containing the tagline takes up the whole width.

Content Column and Sidebar Columns

Inside the columns box is this section here and the columns contains the content column and the sidebar column. So content column here and sidebar column here. Note that these containers, they expand as wide as they can but they only expand as tall as they need to in order to contain what’s inside of them.

Because there’s essentially nothing inside of this sidebar the sidebar actually ends all the way up here. It doesn’t continue to the bottom of the page because its content doesn’t force it down. Whereas in the content column, it goes all the way to the bottom of the page because its content forces it down.

WP Loop

So if we look at that rather that looking at the actual image but look at our columns, you have got the content column and the sidebar column. Inside the content is the WP Loop which is the primary loop on the page and essentially it is this thing that grabs the main page content and displays it on the page.

Post/Page Box

You’ve got your content column with the wp loop and then your sidebar. Now if you open up that wp loop you’ll see inside of it is this post box. Actually if we open that up, it’s still called the post page post box and that’s what exists in there now. So that post page post box takes up, again, that entire content column.

The top part of that is called the headline area and that’s the section here with the headline and then the by line. So again, looking at it here, this headline area is that top piece which has the headline which is author, avatar and headline and then the by line the author, the date and the link. That is what is going on here the author, the date and the link and all of that is contained inside of this headline area.


Then if we come over and look at this sidebar, the sidebar is that section and the sidebar has two pieces. The sidebar text box and the sidebar widgets and this is the text box and this is the widgets. On our site in particular, this is the text box and this is the widgets. It’s got a text widget and it’s got a category widget in it.

And then we look at the footer, footer being the very bottom down there. Inside that footer are the attribution and the admin link. So, down inside the footer are the attribution and the admin link.

So that’s, that is the relationship of these boxes to any given page or to the template. That’s how these boxes relate to it. You’ve got your container, the body is the whole thing. The container spans from page edge to page edge. It contains everything else. Inside of that at the top of it is the nav menu then you’ve got the header.

The header contains both the site title and the tagline below the header are the content columns. Inside the content columns are the main content area, and the sidebar. Then inside the main content area is the post box and inside the sidebar is a text box and a widget area. So that is the relationship of the boxes to the page in Thesis 2.1.

0 Comments… add one
0 comments… add one