Build Your Own Business Website header image

Thesis 2.1 for DIY Website Builders – Part 5 – Understanding the Relationship of Boxes to Actual Pages

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.

We’ve talked about what types of templates are and how they operate so now we’re on to the fun part, the relationship of boxes to actual pages in Thesis 2.1. I’m going to be jumping back and forth between slides and the website and an HTML view so you can get an idea of this but.

Relationship of a Page Template and Page

We’re going to start off here with our slide. Let’s open up the Skin Editor for The Barking Chihuahua Cafe, we’re going to look at the front page template and look at the front page at the same time. So let’s go to the front page template and to the front page which is where we are.

The Body Box

The body is the main container, everything is contained inside of the body and the body is the entire browser window. Every piece of your website that is visible is contained inside of the body. So as an illustration look at the body box because that HTML body is a box. The body box contains everything.

Every template has a body box and the body always contains everything so you’re never going to have anything in a web page that’s not inside the body so that’s the lowest level of containment organization in the template.

The Container Box

Inside the body, we have the container box and the container box contains everything else. So you can see the container box actually has sides, right? It’s got left and right sides.You’ll see a little while later it also has some top and bottom space too although that’s not evident in this illustration but the container has dimension.

The body always fills the entire browser window period, the container is however big you make it and in this case, the container is the width of the page. There’s the container and the container is everything we see here. If we just look at the raw HTML here for a second, there’s your body, there’s your container, body, container.

The Nav Menu Box

The first box inside the container is the Nav Menu. The Nav Menu is at the top of the container here – that’s the way this works, you work your way from top down. Sometimes there are things left to right and in that case left is always first, right is always a second thing in terms of order. You’ll see that again but the Nav Menu is this section right here up at the top.

The Header Box

The header then is this section. So, if we come back over and we open up our container, you can see we’ve got a menu, we always saw that and then you’ve got a header and the header is that second section inside of the container.

The Columns Box

Next is the columns box and the columns box starts at the bottom of the header and goes down to the top of the footer but contains both the content and the sidebar. So there’s your columns box, if you open it up it contains the Content Column and the Sidebar. If we come over here and open up columns, we’ve got your Content and your Sidebar. That is the columns box so you can see the HTML and how the HTML progresses with these boxes or the relationship of these boxes to the HTML.

The Footer Box

So then you move on to the footer box and the footer box is the last box inside that container and it’s at the bottom of your webpage, right? Again, that’s your footer box here and the footer is in this case, here at the bottom of your web page. It’s below the columns and that’s that footer box.

Areas of the Header Box

Then your header box is actually divided up into other sections, right? The Header box has both the site title and the site tagline. Ours is a little bit different here because we are not actually showing our site title and tagline. It’s been replaced with our image but in fact, the header still actually has a Site Title and still has a Site Tagline, they just are set off to the side off of the screen so you can’t see them. If you open your header, there’s your Site Title, there’s your Site Tagline. If you rearrange it, you can rearrange it, Site Title, Site Tagline inside the header box.

Areas in the Column Box

A similar kind of thing is true for the columns box. The columns box has both the Content Column and the Sidebar column inside of it. So the Columns box spans that whole width of the page but has both of these elements in it. Close up the header and here’s our columns with our Content Column and our Sidebar. Again close up the header, here’s our columns with our Content Column and our Sidebar all contained inside the Columns box then inside the Columns box are more boxes.

Content and Sidebar Boxes

There is the Content box and the Sidebar box and then it starts to get more complicated because if we open up our Columns box, there’s a Content and the Sidebar and even though these are left and right. We don’t have them laid out left and right, the left one is the top and the right one is below it, that’s the way HTML lays out.

How HTML Displays Left and Right Positions

HTML doesn’t write itself in left and right positions either so this follows the HTML convention of having what’s leftmost above what’s right so your content column and inside your content column, you have things like WP Loop and then inside of the loop, you have your post and page, your post page box, inside of that is your Headline Area. Inside of the Headline Area is the Author avatar and the Headline and the Byline.

For example, there you are in your Headline. The Headline’s got both the Headline and the Byline so you’ve got both your headline and your byline. Notice that in the Headline, there’s the Author Avatar in the Headline and also notice the Author Avatar isn’t showing up. The reason the Author Avatar isn’t showing up is because we told it not to in the content options. Over here under Content, under post and page output, we unchecked Author Avatar. If this was checked, it would be showing up there so this is a switch that turns on and off the display of that box in the template.

Let’s go back here. The Headline Area has the Headline and the Byline and our Byline has Author, Date and Edit Link in it. And in fact, right now we have all of these things turned off so none of those things are showing up in here because the only thing that’s showing up is the Edit Link because there actually isn’t a way in Thesis Classic to turn off the Edit Link.

Boxes Inside Boxes Make Up HTML Structure

So if we look under Content and under Post and under Headline Area, here’s our Byline and our Byline has in it the post Edit Link. So these are examples of these boxes inside of boxes which make up your HTML structure.

The same thing is true with the sidebars. The sidebar consists of a Sidebar box and then a Text box and a Widgets box. So back over here and look at our sidebar, we’ve got our Text box and our Widgets box which in this case, is our Text box and our Widgets box all inside of our sidebar.

Boxes are Stacked, Arranged and Nested within Each Other

Hopefully this is helping you get a sense of how these boxes come together, right now you obviously have the footer which is down below all that. That’s how all these boxes come together, you simply stack, arrange and nest boxes within each other in order to ultimately make this arrangement.

This is the kind of arranging that we will be doing as we work our way through this for the rest of time that we’re together today.

0 Comments… add one
0 comments… add one