Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 8 – HTML – Using the Template Editor

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.

With that overview of the Skin editing process in mind, we’re going to start looking in detail now at using the HTML Editor in Thesis 2.1.

Functions of Core Boxes

Let’s come over here back to the Home template. Core boxes are the boxes that come with Thesis 2.1, they are not skin specific boxes but they are boxes that come default with Thesis.

Boxes as Containers

Core boxes have 3 functions. They either function as containers. Note that containers can hold other containers. This container named container is just a container and it has all the rest of these boxes.

Boxes as Content Placeholders

It can hold content placeholders which is what the nav menu is. Another example of this content placeholder is the site title and the site tagline. They take very specific placeholders from the database and display it on the page.

Boxes as Actual Content

They can contain content, for example, the footer is a container here. That footer contains this attribution and the attribution is actually content, it’s not a content placeholder. This attribution doesn’t exist by itself in the database, it only exists because we go over to skin design or skin content and enter that information in the attribution otherwise it is not there.

Content Placeholders

Your containers can contain any of those things. Your placeholders display content that is resident in the database that exist without respect to the theme that you are using. Both of those nav menus that I am using here were also available to me to use in twenty thirteen. Those nav menus I created inside of the wordpress admin so they constitute content and this is just a placeholder to stick that content.

The same thing with is true with site title and site tagline. If I change skins my site title and my site tagline stay the same. So these little preview boxes are placeholders for that content.

Actual Content

And then your content are these unusual ones like the attribution and the text box which actually contain content and get that content from the skin itself. Those are the three kinds of functions of core boxes.

The Box Colors Have Meaning

You also have some different colors for the boxes in Thesis 2.1 to indicate what their function is.

White Boxes – Containers

The white-color boxes are all container boxes one way or the other. Technically, developers call these white boxes rotator boxes. It doesn’t matter why they call them rotator boxes but that’s what they call them but from your perspective they’re containers. They contain something else.

Blue Boxes – Content Placeholders, Multiple Instances

Blue boxes are content boxes and developers refer to them as terminal boxes but they are content placeholders or content boxes. The template can contain more than one of them. The template can have as many nav menus in there as they want. A template can have as many text boxes or as many widgets as it wants. That’s what the blue represents. The blue represents a box that is a content placeholder or content that you can have as many copies as you want inside of a given template.

Purple Box – Content Placeholder, Only Exists Once

On the other hand, the purple boxes, those are also content boxes or content placeholders, except that they can only exist once in a template. So you can’t put your site title automatically in more than once inside of your template. If you put it here in the header then it can’t be down in the footer. If you put in a footer it can’t be in the header. This box can only exist one time.

The same thing is true with site tagline and with attribution and admin link. Each one of these things are either a content or content placeholder but they can only exist once in a template.

Rose Box – Dependent Boxes

Then you have these rose colored boxes. These boxes are content placeholders and they are called dependent boxes. They are dependent boxes because they are dependent upon the box that holds them. We are going to talk about dependent boxes here in a few minutes but essentially most container boxes have dependence.

So, the post box has dependence and query box has dependence and post list has dependence and comment boxes have dependence. There are lots of these container boxes that automatically have dependence in them. If it’s orange, it’s a parent dependent box. It doesn’t have to be used inside of that box. It can be used outside of the box but it is nevertheless dependent on the box and you can see the box name.

This is home post box, that is the name of the box that is the parent of this. So you can see that author avatar is inside of a container called headline area but it still a dependent of the home post box. And you can tell what box is dependent of by looking at what it says at the very beginning of that.

How You Add a Box

So, how do you add a box in Thesis 2.1? You just saw me add a nav menu box, right? Let’s just add a regular container. Actually, we are going to have a new text box. Since that text box didn’t exist it’s a new one. I am not trying to use one of these existing ones here I want to use a new one.

I created that text box by clicking on the text box with the asterisk. If I click on the text box that was up here I would be just adding an existing box to this template. So I’m going to add that box. If you leave this thing named text box you’re going to get lost. So, what you do here instead is give it a name. I’m going to give this a name of Footer Copyright Text Box.

Once you give it a name you can choose an HTML tag I am going to choose a div for the moment. You can give it an ID which we’ll talk about in a little while or you can give it a class but you don’t necessarily have to give it either of those things. You can simply give it a reasonable name.

Placing the Box Where You Want It

Now that you’ve added the box you’re going to move it into the template some place using that shift+drag operation. So, you press shift first and then you click and drag and we’re going to drop it down here in the footer.

Notice when you can drop it, the thing that you can drop it turns bright yellow. If I move away over here I’m no longer dropping it in the footer. The footer is no longer bright yellow. So what you really want to do is to take it and hover over the title of the thing that you want to drop it in. I’ve observed people getting lost in this all the time ending up dropping it in a box they didn’t intend to. You can always just move it off the side and let go of it and it will just go back up to where it was.

We’re going to shift+drag and drop it into the footer and then if I want to move it around, I can. If I want to move it around inside of the box I can drag it. Not shift+drag but just drag and it’s always going to stay inside that box. You can’t drag it outside of the box with a drag. But I can drag it around the box inside of the box without shift+dragging.

Now, if I changed my mind and I want to move that to a different box I have to shift drag again. So, the rule here is you shift+drag to move boxes from one box to another and you drag to move a box inside of its container box.

Keep In Mind Which Template You are Making Changes In

I’m going to shift+drag this text box and drop it into the footer and then drag it to the very bottom, Save this template. I’ll come over here and refresh my skin content and now I have my Footer Copyright Text Box. And I’m just going to say ‘Copyright 2013’ and save that option.

Now if I come over here and refresh it, you’ll see it is not there and it’s not there because I placed it on my home template. If I want to see it, I have to go to my home template which is my post template and down here it is ‘Copyright 2013’. So that is creating a box, positioning the box and moving it around inside of a box.

Remove a Box to the Tool Box (For Later Use)

If you want to remove this without deleting it, what you will do is drag it up and drop it back in the tool box. Save your template and now it’s no longer down inside the footer. If you open this up, it is still inside, it’s down here at the bottom. At the moment it hasn’t had the chance to refresh but the footer copyright text box is here.

If we come back over to skin content the footer copyright text box still exists even though it’s not being currently used in any template. It’s sitting in here inside of our tool box for us to use.

Move a Box Out of the Tool Box

Note also that category nav menu is sitting inside of here as well so if I want to add that into the home page or the home template, I can click on that add the box shift+drag it to the container and then drag it down below the header. Save my template and then you’ll see that.

I have to refresh the template to get that box to go into alphabetical order there it is Footer Copyright Text Box. So, if the page hasn’t been refreshed it may be sitting down here at the bottom instead of sitting in alphabetical order but nevertheless once you’ve taken it out of this template and drag it here. It is still available to be inserted in this template.

In fact, that’s available to be inserted in any template so if we come back over to our front page, we could go down here to the Footer Copyright Text Box. Add it, shift+drag down to the footer, drop it, expand our footer and put it where we want it down at the bottom of the footer. Now we have added it to this footer.

Somebody asks “how do you copy something that, for example a footer?” So how do you copy that to all of your templates? You do it manually. That is, if you’ve got it in your front page then you’ve got to take it to all the rest of these templates. Now, that raises a conversation about dependency.

Parent – Child Template Dependency

If you never change the child templates in Thesis 2.1 they will always look exactly the same as its parent. The category template uses the parent as its template until you change the category template. At that point, it’s entirely independent of its parent template.

So, generally speaking, in a skin, as long as you haven’t changed any of these child templates and made them different than their parents, all you have to do is change the parent template and the child templates will automatically be changed as well. Because the child templates actually aren’t being used the templates being used is the parent.

However, as soon as you change one of these templates it loses its dependency on its parent for its organization. You can change the parent and it won’t change the child and you can change the child further and it won’t change the parent. So, that is a factor to keep in mind.

It’s especially an issue when you are creating custom templates because custom templates have no parent templates. So anything in your core templates that you want to transfer to your custom templates you have to do so manually. Now, it doesn’t take very long so it’s not that big a deal but nevertheless, you have that parent child relationship which can make transferring changes from one template to another a little bit easier. However, it’s still a generally a manual process.

Let’s save that front page template come back over here and go back to the homepage and now our copyright box is back there again.

How to Delete a Box from all Templates

You can also delete a box from all templates. So, remember that container box that I created? Right here, there was a box that I did not name. Well, you can delete that box by adding it to the template and then shift+dragging it into the trash and saving the template. Now that box is no longer here. It doesn’t matter what other template I go to, it’s not going to be available to that template either. There is no container box here. Now you can also do that with boxes you aren’t using.

For example let’s say you don’t want to use this copyright box anywhere. Not only do you not want to use it on this template but you don’t want to use it in any template. Well you can just shift+drag that away drop it into the pink box, save it. It’s not only removed from this template but it’s deleted from everything.

Now, it’s not in the front template but remember we had it on our blog page too and it’s not on the blog template either because it’s completely deleted. If we come over here and refresh our skin content, you’ll see it has been removed from the skin content list. So that’s how you completely delete a box.

You can remove a box from the template or you can delete the box from the whole shooting match and taking it to the trash deletes it everywhere. Which means, you really only want to do that when you know for sure you are not going to use it.

How Do You Know What the Boxes Do?

Kerry asks how do you know what each box already available in the skin does. That is, what does the box BYOB BX Content Slider do for example. Is there a box in the Agility Skin or Carta Skin that can be used to display rotating images, text on the static front page? Well, you know the only way it’s there is because you installed it.

If you are using the Agility or Carta Skins, they both have skin boxes that do not exists in standard Thesis. You can tell them from all the rest of the boxes because they say either Agility or Carta in front of them. In order to know what they do you’ll have to learn how to use a skin.

You have seen these BX Custom Slider Box or Content Slider Box in this skin because I’ve tested it here. That box is a box that’s available on the site for you to download. There are videos there about how to use it.

Anything like that, if you come across it, if you just load a skin and it’s there then it’s there because the skin created it and you’re going to want to go and look at the skin documentation to learn what it does and how to use it. Otherwise, you’ll have inserted it yourself and if you did that you know where you found it and you can go look up documentation on how to use it. However, by the time we are done today you should know how to use all the core boxes.

Dependent Boxes

The next thing to talk about in this whole HTML editor concept are the dependent boxes. These dependent boxes actually move around a little bit too, in a different way. In the first place dependent boxes can be added or subtracted simply by not dragging them up here or here. You never take a dependent box and move it over here.

Removing to the Tray

If you don’t want the dependent box in the template, then what you do is you just drag it down to the little thing here where it says drop orange boxes here to hide in the tray. And you are dropping them in the tray.

Adding a Box

A dependent box always has a parent box, it has a tray that you can drop it into. The reverse is also the case, although a little different. Let’s say you wanted to add one of these boxes into the parent box. All you have to do with that is click it. If you click it if it’s sitting down here inside the tray you can click it and that’ll put it up inside the parent and then you can move it around to your heart’s content. In that case, you can drag it around to move it inside the box or you can shift+drag it to move it into another box and that’s how that works.

Removing a Box

If you want to get rid of a box, a dependent box, you have to first move it to its parent. Now many of them are going to be in their parent but right now we just put this categories box inside the headline area. Which means that there’s really no way for me to drag it and drop it that way because the tray is not available to me yet.

What I have to do is drop it into its parent and then I can drag it and drop it into the tray. That’s how you move these things around. Never take the rose boxes and drop them here or drop them here. If you don’t want them to be displayed you can drop them in the tray and this is the place where you going to find them too.

You never going to find one of these rose boxes in the box library. These boxes only exists inside of their parent box. You can hide the tray like that. Everything that’s in the tray is hidden. Everything that’s outside of the tray is being used by the template one way or the other.

Box Settings Persist from Template to Template

One last thing to talk about here before we move on is box persistence. Settings in a box persist from template to template. For example this top nav menu. These settings are always going to be the same no matter what template this box is in. Let’s give it the id of fish sticks; I give it an id of fish sticks and save it in my front page template. It doesn’t matter what template I go to. My top nav menu box has an id of fish sticks as a class of menu.

This box is checked. That menu control text is selected. These are settings that persists with the box regardless of what template they’re in. Similarly, the setting for what menu to display persists with the box regardless of what template it’s being used in. These settings persists with the box.

What Doesn’t Persist in Boxes from Template to Template?

Some things do not persist and you’ve already observed is here.

Box Use

For example, the actual use of the box does not persist in all templates. A box, if it’s not being used resides in the library over here. It only ever gets used if somebody adds it to a template.

Box Location

So the box doesn’t persist from template to template and neither does its location. You could put the top menu in the footer in one template and have it at the top in another template and it’s position does not persists from template to template. It can be in any position, in any container anywhere you may want it in any given template but its settings are always going to be the same. It’s still going to be the top nav menu, it’s still going to be whatever menu are selected, it’s still going to have these options whatever these options happen to be, those will persist.

Box Contents

Another thing that does not persist are the contents of the box. For example this header box. The contents of this header box are not necessarily the same from template to template. I could choose on my archive to rearrange the box layout. So site tagline could go above than site title on my archive template. That doesn’t change its arrangement on any other template. We still have title and tagline here but back at archive, it’s tagline and title.

So, a box does not retain the arrangement of its content or the the existence of its content. For example let’s come over to our category archive because this is the one that we actually changed. Let’s go to our header and let’s take the site tagline out. Save that template. This header is the same header. It still has the same options that it had before but it’s in a different position that is it’s above the nav menu and it has different contents. That is, it no longer has the site tagline in it.

If we come over then and take a look at a category archive template, it does not have a tagline in it and it does not have the top menu on it. So, box persistence does not extend to the contents of a container box. Now, that may seem like it’s kind of self evident in something like the header but this is also the case in boxes that have dependence.

Because you can use this home post box. It’s the same box it has the same settings here regardless of what template it’s being used in. It’s always going to use these settings but it can be used in the category. We could have the excerpt added to it. Now our category has excerpts but if we go back to the blog page where the same post box is being used, the same post box has featured images being used. It has all these stuff showing up.

So although it’s still the same post box the contents of the parent box do not persist from template to template. So the same post box can be used to have different contents in it in different templates. That’s what I was trying to spit out.

So, this question of persistence is something that you want to wrap your mind around. I get lots of questions on persistence, “how come my post box is different in this case that is in that case?”, “I drag my header in there but it doesn’t have any of the rest of stuff in it” and so on and so forth. That’s because these things are designed such that they retain their options without retaining their content.

0 Comments… add one
0 comments… add one

Leave a Comment