Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 4 – 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.

Video Transcript

Okay so the next thing I would like to do is talk about the relationship of boxes to an actual page because this is one of the critical aspects to understand is how these boxes in the HTML editor actually are reflected on the page itself.

So we’re going to come back over here to the HTML editor. We’ll go over to the front page just like we’re looking at here. So we have our standard front page in Thesis here, that’s what we’re looking at and that’s what we’ve got here.

Okay so the the first thing to say about that is that absolutely everything on a page is contained inside the body. So the body spans from the edge of browser window to the edge of browser window and from top to bottom. There is nothing in the browser window that is not inside the body. The body is always everything that’s in your browser window and unless you mess it up, it spans from side to side and from top to bottom. Now it is possible to mess it up but we won’t talk about that.

And so if we come over and look at the boxes, you see your main container, the container that contains everything else is the body container. So if you’re working in the blank skin you know, there are very few boxes over here in the blank skin. But every single template has an empty body in it because you cannot have a template without a body. Okay, everything else on the page is inside the body.

Then the next thing you have is the container box. And the container box is… in the Thesis classic skin, is the container that contains everything else. So you have one container called the body and that’s everywhere. And then you have inside of that, another container and that container contains absolutely everything else. And that container is represented here by this orange, right? It is the width of the page. So that’s the distinction here between say the body and the container. The body is everything everywhere. The container is from the top of the page to the bottom of the content. So on a page, this doesn’t have much content. The container may only be as tall as this. And it spans from one side of the page to the next and it’s what represents really the dimensions of the page.

So the next thing you have inside that container is the nav menu. Here’s our body. Here’s our container. Open up that container and we have these 3 things. We’ve got a nav menu, a header, columns, and a footer. And the nav menus on the top. The header’s below that. the columns are below that. The footer’s at the bottom. Understand this one thing comes before another thing relationship here and we’re going to be talking about above and below. That is relationship of these boxes above and below each other. We’re also going to be talking about the relationship of boxes beside each other. But right now, these are all… this one is above all of them. This one’s below that one and above the other two, so on and so forth, right?

Okay so the container holds the nav menu. It holds the header box. It holds the columns box and it holds the footer box. And that’s what each one of these things is. Nav menu, header, columns, and footer.

So the next thing you’re looking at is the header box. And if we expand the header box, you can see inside the header box, you have a site title and a site tagline. And so the site title is this section here that’s in orange the site tagline is the section I made in white. And that’s essentially Thesis 2 Responsive Skin, that’s the title. Learn to Create a Responsive Skin for Thesis 2 is the tagline and the header is this section right here.

Then you have the columns box. Now the columns box contains lots of boxes. And the columns box starts at the bottom of the header and ends at the top of the footer. So it starts here and it ends there and it contains all the stuff inside of this.

Now inside the columns box, there are 2 main boxes. There is column 1 and then there is sidebars. So if we look over here at our editor for a second, we’ll close the header and open up columns. You can see we have the content column and we have the sidebar columns. Now obviously when I made this graphic, there was a little bit of difference and I called it column 1 and sidebars. So there’s a little bit of difference here between the state of the skin and my graphic. But nevertheless, the concept still exists. That is you have 2 primary boxes inside of columns. You have the content column and you have the sidebar columns.

Now when you look at this, you say to yourself, okay so the content column should be above the sidebars. But in this case, what’s going on is the content is beside the sidebars or the sidebars are beside the content. And the reason why these things are stacked on top of each other is because of the order in which a web page begins to display this stuff. The webpage doesn’t display columns that are side by side from top to bottom all the way down to column. It displays the first column first and then that’s next to it next and then the column that’s next to that next.

And so that’s the way this is structured. This is structured exactly the way your web browser understands it. Now it might be a little easier conceptually on you if you thought about… you know, these things could sit side by side that your content column is this wide and your sidebars column is that wide. But while that may help you conceptually, I appreciate the fact that they’re side by side. This actually helps you understand really, how your browser is thinking about this. Your browser never thinks about anything side by side. All if its instructions start at the top and end at the bottom. And that’s what’s going on here.

Okay so you’ve got your columns and your sidebars. Now if you open up your columns, there’s a bunch of boxes inside your columns. If you open up the content column, you’ve got a wp loop and then you’ve got this thing he’s calling single post box. Inside of single post box is this headline area and below that is a single post content. If you open up this headline area, you can see he’s got the headline as the content inside the headline area.

And really, this is where we start… and I probably should have mentioned this sooner but this is where we start understanding the difference between content, a container, and a placeholder because columns is a container. Content column is a container. Single post box is a container. A headline area is a container. But single post box headline, that is a placeholder for content and so is this single post box content. Same thing is true up here here in the header. This header is a container but site title and site tagline, those are both placeholders for content and the content is the site title, the site tagline. So that’s really the difference between the container and the placeholder. The container contains the placeholders and the placeholders are inside the container.

So the same thing is true with these sidebars, right? So you’ve got your sidebar columns which sit beside… okay so you’ve got your columns and you’ve got your content column and your sidebar columns. Inside your sidebar columns, you’ve got sidebar 1 and sidebar 2. Again, sidebar 1 and sidebar 2 are beside each other. And inside of sidebar 1 and sidebar 2, you have a couple of content placeholders. You’ve got the widgets content placeholder and then you have this textbox content placeholder.

Now this is a case where… this is that rare case where content is actually part of the template. Remember I said that content usually happens elsewhere in the admin site and only very rarely is it part of the template? This is an example of where it is part of the template because this piece of text, this is a Thesis textbox. You can write anything you want here and Thesis will format it just like a WordPress post. This piece of text is actually content and it’s assigned to this template. It’s part of this template. And so every time this template is displayed, this little textbox shows up. So that’s the way in which is this content.

Now you’re probably not going to use textbox in this way but you may have already seen me use a textbox, for example, to put a clickable header image in. That’s one of those cases where this… one of the legitimate cases, I think, for you adding your content directly to your template is like a header image. That is, in fact, content and you would add it in the template.

Charles asks, “So the placeholders will contain the content but not the container?” Well, we’re going to talk about different types of boxes here in a few minutes and that will become a little bit clearer, I think, here in a few minutes. But nevertheless, these boxes are either containers or they’re placeholders. They are one of three things. They’re either containers, they’re placeholders or they are content. And the one instance in which they are content is in a text box. Otherwise, except for text boxes, everything is either a placeholder or a container.

Okay so there’s our post box is this whole section here and then our headline area is this one little section at the top. Okay if we come over and look at our sidebars, the sidebars is just this piece. The sidebars, it doesn’t go to the bottom of the page. It just goes to the bottom of whatever content is available. It only expands in height to fit the available content. So you know, you could imagine sidebars that have lots of content and content that doesn’t. And in that case you know, the content area here would be smaller and the sidebars will be taller. But in this case, we have virtually nothing in our sidebars so they’re not… they don’t take up the space here. Sidebars only take up as much space as is necessary in order for them to encompass the content. And this is sidebar 1 and this is sidebar 2. So that’s what’s going on here.

Then you have your footer box and this should be pretty familiar to you by now. And inside your footer box, there is the Thesis attribution and the wp admin link. So if we come back over and just take a look at that, let’s see… let’s close our header. Let’s close our columns. Let’s open up our footer. Our footer is a container and it contains a placeholder for the Thesis attribution and a placeholder for the wp admin link. Okay so that’s what’s going on with this and that’s what you see here.

2 Comments… add one
2 comments… add one
  • Tracey Rose June 13, 2014, 5:19 am

    Thanks so much for this video … Thesis 2 was doing my head in … now I get it 🙂

Leave a Comment