Build Your Own Business Website header image

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.

Now let’s talk about the relationship of boxes to actual pages in Thesis 2.3. Let’s go back over to the Skin Editor and go to the Front Page template. Remember the Front Page is a child of the Page template.

HTML Hierarchy

We come over to the Front Template and lets reduce the content down here so you can see the same thing we’re seeing on the slide. That’s what we are looking at.

Body Box

The Body is everything you can see in the browser window, period. That’s the HTML Body. This HTML Body here is absolutely everything that you can see on this page here. It’s wrapped inside the body.

And if you are familiar with basic web design concepts and you come over here and take a look at the hierarchy of the template, that body is this right here. The Body box creates the Body tag.

At its minimum, you’ve got the Body tag then you’ve got the container and other stuff. That’s the Body tag that reflects the entire web page. It’s the case for every single template. You can’t remove the Body box. Every other box can be removed from the template but this one can’t be.

Container Box

Then you have the Container box. I showed you that. The Container in Thesis Classic is the width of the page. It is the sum of the content column and the sidebar column. Remember when we specified the widths of those two columns in the Introduction to Thesis 2.3 seminar last week? The Container is the box that contains both of those things.

Attributes That Can Be Applied

Let’s take a look at that here. The Container box contains all of these things you see in here. Now you can click on the box options here and you can see that we’ve given it the name Container. The HTML tag is a div. We haven’t given it an HTML ID. It has the class of Container and you could even give it HTML attributes to the extent that you wanted to.

Let’s view the page source, you can see the Body tag here. And there’s the Container, it’s the div with the class of Container and everything else is contained inside of it. If I collapse the container tag you can’t see the rest because it’s all contained inside of it.

What’s a Div?

Regina asks, “What is a div?”. A div a basic HTML container element. It doesn’t do anything but it contains other stuff. So, you use divs for defining heights and widths of things. Divs are the main structural elements.

HTML5 has other structural elements as well and you may see some of those as you work on things like this but div is the vanilla, all purpose HTML container. And if it doesn’t have anything in it, it doesn’t show up.

Menu Box

The next thing is the Menu. Well, that is this Menu here inside the container. It’s the first thing inside the Container. It’s the little blue box here over here on the left. It spans the width of the container and right now it sits at the top of the header.

Header Box

The next thing is the header box. Again, you see that header box sitting directly below the container and it is this entire piece right here. Because we have customized that, if you hover over the header you can see it has this header image in it.

But it also has the site title and it has the site tagline neither of which are visible on the website but you can still see them in the hierarchy. You can still see them in the page source. You’ve got your header and inside it you’ve got the site title and the site tagline and then invisible is the header image.

But if you are in the Skin Editor then you can see it, site title and tagline here. If we open up the header you can see it’s got a div with an ID of header and also a class of header. If we look at the page it has the div with the ID of header and the class of header.

Columns Box

Next up we have the Columns box. Again, the columns box goes below the header and above the footer. It’s this section right here and it holds the content column and the sidebar column. If we look at in real time, here’s our columns box. If we open it up it has the content column and the sidebar column in it.

If you open up its options you can see it’s a div with a class of columns. If we look over here, again, it’s a div with a class of columns. You can see it highlighting everything down below because that’s what it covers down to the footer.

If we open it up it’s got the content on one side and the sidebar on the other. So that’s what those boxes do.

Footer Box

Then the Footer box is the piece down at the bottom. The header box has these two pieces inside, the site title and tagline which we have replaced with the header image but which with CSS Thesis moves out away from the rest of the content.

WP Loop – Displays Content

The Columns box again, holds both of those things. And inside that box is the content column and the sidebar. Inside of the content column we have more stuff. Let’s open that content column up. Inside it we have the wp loop.

Now the wp loop is essentially the tool WordPress uses to decide what displays on the page. So pretty much every page has its own wp loop unless you are ignoring the default loop. Every page you’re going to see in your situation will have a copy of the wp loop in it. If it doesn’t have that it doesn’t have anything to display.

Not Part of HTML Hierarchy

The wp loop doesn’t have any HTML element to it so you won’t see it in the HTML hierarchy. In the HTML hierarchy over here, open up the content and you can see there’s no wp loop. All you have now is a div id with a class of post box. That’s what this is, the post box and that’s what wraps all the rest of the content. At the top of the post box there is a headline area.

Post Box

Let’s open up the post box. It is actually a placeholder for content. So it’s now not really a structural thing, it’s now the thing that WordPress uses to put content in and it has some HTML settings. Right now it’s set as a div. You could choose to use an article here because that’s the structural equivalent of a div but it’s an HTML5 tag which means that this is the basic content of the site.

And on your front page you can choose schema here. What you choose depends upon what you are doing on your website. In our case we are going to use article…actually because this site is for a Cafe, this wouldn’t be an article it would probably be web page so we’d choose the web page schema for the front page.

Headline Area

Then inside that post box there is this headline area. This is just another HTML container with a HTML tag of div and a class of headline area. Again, you can see that here if we open up that post box, here’s our div class headline area.

You can see here that it’s got the schema set up. It’s got schema.org, blog posting. We haven’t saved the template so the new schema’s not showing up yet but that’s where that schema shows up.

And then you’ve got your headline area. Inside of that you’ve got a headline. And inside of that you’ve got a byline. That’s a div with a class of byline. Come back over here to the Skin Editor, open up our headline area and there’s your headline.

Now we told it not to display the author avatar so that’s just not displaying but it is showing that byline with the class of byline small. Again, it’s just another div. And inside that byline is the author, the date and the edit link.

If we look at it here on the site, there’s the author. Then down here is the date and the edit link as well. That’s what those little boxes represent.

Featured Image

Let’s close up the headline area and now we’ve got a featured image. Since this page doesn’t have a featured image it’s not showing up. The same thing is true with the Thesis post image.

Content

But then we get down to our content and our content is the rest of this, post content. You open it up and you can see there is the paragraph text. Again, this content is a placeholder. It’s not a container.

What the Color of the Box Means

Containers are generally white. If it’s entirely separate and can be used as many times as you want in a template it’s blue. If it can only be used once in a template it’s purple. And if it’s a child of another box then it is orange.

How You Can Tell What the Parent Box Is

And the featured image, the post image and the content are all children of the post box. And so is headline. You can see it says post box post page headline. That means it’s a child of this post box post page. Whereas this headline area is not actually a child of it, it’s just a separate container that we moved a couple of children into.

Parent Box Tray

Then if you open up the parent box’s tray you can see there are other things that you can put into the post box as well. There’s the author description, the excerpt and the number of comments or categories or tags or the Thesis Thumbnail or Twitter profile link. These are all things that are hidden inside the tray that could go inside the post box if we chose to do that.

All of those things you can see as we work our way down, that’s what is happening. Each one of these things represents some kind of HTML element whether it’s a structural element like content or it’s a content element like post content.

Template Editor Reflects Flow of HTML

Then we’ve got our sidebar which does the same kind of thing. Here’s our sidebar and if we look down note that the sidebar is below not beside. The template editor reflects the flow of HTML. And HTML always just stacks. You use CSS to make things sit side by side.

Here’s the content column and here’s the sidebar column. It’s stacked with the content column on top. You can see that here as well. We’ve got our content column and then we’ve got our sidebar column. Then inside that sidebar column we’ve got this widget.

Let’s go back over to the Skin Editor and down to the sidebar column you can see we’ve got a text box and widgets. We used the Skin Display to hide the text box so it’s not showing up in the HTML even though it is there. The widgets are showing up there. So any widgets we put in this widget container is what is showing up in here.

That’s how these things work. These boxes all reflect something on this page. The next thing we are going to do then is start changing this website by changing those templates.

How to Find the Right Template to Edit

Something I want to note is that this little box down here in the far bottom left corner, if you click on this it will take you to the Skin Editor to edit that template. If you click on it, here we are in the Skin Editor on the Front Page template.

So if you are ever confused about what template you need to edit, you can always find it here at the bottom of the screen. The name of the template will be there. And if you can’t find it in the template list you can just click on this and it will take you to edit the template.

Only Have One Instance of Skin Editor Open

One thing to keep in mind though is that you should never have more than one tab with the Skin Editor open. You should always do your work in one tab because if you open up another tab with the Skin Editor in it, it’s saving its own version. And if you save it in one tab, it will save those settings but the other tab won’t know what those settings were. So if you then save in that tab, you’ll have lost all your other settings from the first tab. So that’s why you always want to make sure that you only ever have one instance or one tab open of the Skin Editor.

0 Comments… add one
0 comments… add one

Leave a Comment