Build Your Own Business Website header image

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’re going to talk about the relationship of boxes to actual pages. We just looked at the different types of templates in Thesis 2.3 so now it makes sense to look at what makes up those templates and how that is reflected in the pages themselves.

Layout of Boxes in the Template

You have the basic Thesis Classic Responsive layout here. You can see the template here. So let’s dive into that. The HTML Body is colored in pink and that covers the entire page.

HTML Body Box

Everything in the browser window is inside the HTML Body. And if you know anything about HTML you that is true by definition. Anything visible on the web page needs to be inside the HTML Body tag. This HTML Body box is the HTML Body container on the page.

Container Box

Next up you have the Container box. This box contains everything else and is providing us with the definition of the width of the page. The Body extends from edge of browser window to edge of browser window. The Container is as wide as the CSS rule tells it to be and that is the page width.

So you can see that you’ve got the pink of the Body and the pink of the body showing in the background. And then the orange of the Container and everything that’s inside that Container.

Nav Menu Box

The Nav Menu is not a container. It’s stand alone inside the Container. That Nav Menu represents this nav menu here on the website. Let’s go back to the Front Page template which is what we’re looking at in this example.

You can see each box or element is highlighted with color as I move through the template. Here’s the Body, the Container, the Nav Menu.

Header Box

The next thing is the Header. If we open that up you can see that it contains the Site Title and the Tagline. The Header is an HTML container, in this case it’s a div. It could be a paragraph, a section, an article, a header, a footer, a sidebar. And there’s a special thing where you don’t have to have any HTML wrapper for it at all. That is very occasionally useful. It could be any kind of HTML container but in this case it’s a div.

Block Level Elements in CSS

Chris: So, these are known as Block level elements in CSS and they are not related. Each of those tags there is kind of a general tag. Whereas an H1 or an H2, those are block level elements but they are specifically for formatting text. I guess you could argue a P tag is a lot like that as well. But it kind of has a more universal application so that’s why it’s included in the HTML tag list for this box.

For some reason this idea of a container confuses people because they think of something specifically as a div or as a section. And really, there’s no difference between any of those things. It’s just a semantic naming principal applied to them.

If you wanted you could have an entire website built off of nothing but divs, you could use sections. These things are sort of interchangeable. They just have a semantic meaning applied to them. They’re really all the same.

Rick: And each of them has inherent CSS properties associated with them. They are all the same properties. You can see that here.

Let’s come over to our Front page and inspect the element. Let’s just look at the HTML here. There’s our Body. There’s the Container. Here’s the Menu. Then we’ve got our Header. If we open that up we’ve got our Site Title and the Tagline. Neither of which you can actually see on the page because the CSS pushed them off the page. That happened because we used a header image in place of the title and tagline. We also have header image link which is the link for our header image.

Content and Sidebar Columns

Let’s close up the header and come next to our columns. Let’s open up the columns which is a container. Inside that columns container are two columns, a left column and a right column. The left column is the content and the right column is the sidebar.

So if we come over here back and close our header and content column. You’ve got your columns, your content column and your sidebar.

HTML Layout

Something that confuses beginners at first is that HTML is written from top down and generally speaking left to right. You can use CSS to manipulate that left to right order. But in this case these two are side by side with the left column above the right column, generally speaking. Even though they are side by side on the web page you don’t see them side by side in the HTML.

That’s why you don’t see them side by side here. This template reflects the HTML elements and their layout. This is the div with the class of columns and inside of that is a div with a class of content. Below that is the div with a class of sidebar which is what we see over here. Div with a class of columns, div with a class of content, div with a class of sidebar.

Open up the content and you now have a div with the class of post box. Open up our content and inside of our wp loop is our post box. If you open it up you don’t actually see the class post box but Thesis automatically adds the class post box to it. And the one thing that you did see there was GRT. That is one of the classes applied.

So we’ve got this div with the class of post box. Inside that div is the headline area and the post content. If we open up this inside the post box is the headline area. It is a div with a class of headline area. Then we have the post content which automatically gets the class of post content so we’re not going to see it there.

The WP featured image and the Thesis post image are boxes that are here but because we haven’t specified a featured image or a post image for this post, they don’t display anything. Had we specified a featured image it would have shown up on the page and it would have shown up here below the headline area.

If we open up the headline area we’ve got the headline and the we’ve got the byline. Open up the headline area and we’ve got the headline. We turned off author avatar in the Skin Display section so it’s not displaying anything. We look at the byline and it’s a div with a class of byline and a class of small. Open up the byline and you’ve got the author, the date and the edit link.

Let’s come over to the site and look at the byline. We’ve got the author intro. We’ve got the post author. We’ve got the date published and we’ve got a couple of other things like date intro. We’re going to talk about that in a minute when we talk about the post box. And the post edit is here. All of those things are contained inside of the div called byline small.

Hopefully what you are seeing is the arrangement of the HTML as it relates to these boxes. We looked at the content column and then there’s the sidebar column. If we come back over now you’ve got your content column and your sidebar, side by side inside of that columns.

On the sidebar we’ve got a text box and we’ve got a text widget. Then there’s the footer area. Hopefully you are seeing a pattern here as to how the templates are made up of boxes and the arrangement of content inside those boxes.

0 Comments… add one
0 comments… add one

Leave a Comment