Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 3 – Thesis 2.1 Skin Menu

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.

Now that you’ve got a grip on the Relationship Between Skins, Templates and Web Pages we’re going to move back over to Thesis 2.1 and take a look at the Skin Menu.

Skins have Different Skin Menu Elements

When I say the Skin Menu, this is the Skin Menu that I am referring to here. In Classic Responsive, the Skin Menu has these menu elements. As it turns out not all skins have the same menu elements. In fact, let’s go over to manage skins for a second and activate Thesis blank. Now the skin menu has Custom CSS, Manage Skins and Editor and that’s it. It doesn’t have all the rest of the choices we saw before.

If we activate my page width skin, Carta, you can see it has Design, Custom CSS, Manage Skins and Editor. If we activate Classic Responsive it has Content, Design, Header Image, Custom CSS and the Editor.

The Skin Menu changes up depending upon what skin is activated. There’s the possibility that any skin can add its own menu items, right? Besides its content design and these things they can always add their own menu items to this as well. So, the takeaway from this conversation is that the Skin Menu is not always the same.

Thesis Classic Responsive Skin Menu

First, we’re going to take a look at Skin Content.

Skin Content

And Skin Content contains two sections. It has the Display Options and it has the Skin Content section.

Display Options Area

Now remember when I was talking about the relationship to Skin Options to boxes? Well, Display Options is a place where you can turn on and off certain elements. So then you can come to your site title and tagline and you can turn both of those off. Save the Display Options, refresh this and they’re not there anymore, right?

We’re going to turn those back on and then I’m going to talk about this more specifically in a few minutes but that’s what the display options does. It gives you the ability to turn on and off certain boxes that are inside the template.

Skin Content Area

Now the Skin Content also does something similar to that. For example, it gives you the opportunity to use whichever menu you want. So you could choose the main menu or you could choose the category menu. Whatever menu you have already created inside of WordPress, can be chosen from this menu options.

If we come back to Skin Content, the same thing is true with the Sidebar Text box. This is where you would set the add to content to the Sidebar Text box. And also the Thesis attribution where you can add attribution text to the attribution box, okay?

Skin Design

So you’ve got Display Options, you’ve got Skin Content and next up is Design. Now Design is that place where you have another set of options. So if we choose the blue options, what Design is doing is it is changing the appearance of this, right? Now, our links are this color blue and now our menu item has this blue color to it. That happened because we changed these Design Options.

Header Image

The next one is Header image and Header Image is, of course, the place where you can set a header image to replace the site title and tagline if you wish. Not all skins use the Header Image feature, for example my skins do not.

Custom CSS

Custom CSS is the place where you can write your own CSS to affect the site and we will talk about that more in a little while.

Manage Skins

Manage Skins is the tool that you use to install update, activate, delete skins right you can use that for all that stuff.

Skin Editor – HTML

Then there’s the Editor which is where we are going to spend the lion’s share of the day today.

The HTML Editor has its own set of interface elements. Now the Skin Editor starts off with HTML and you can see it’s yellow. You can tell which elements you are in because it’s highlighted yellow. HTML really is the most active part of the Skin Editor and the HTML has 4 sections.

Template Selector

The first section is the template selector. And if you click on the template selector, it brings up the core templates, plus custom templates, plus the ability for you to copy into another template. And so you can use this to expand the templates every time there’s a little plus. You can use it to expand the template. For example, the Front Page is under the Page template. Again we’re going to talk about templates more but this is the template selector part of the HTML page.

Template Layout

Now, besides a template selector you also have the template layout that’s what this is. This is a graphical representation of the layout of your web page. And it shows all of the boxes that are being used and boxes that you can expand and contract and you can see where these things are being used. In some places you can set options for the boxes. But in any case, this is the layout. When you switch templates you are now looking at the layout for that template, so this is not a global thing this is a template specific layout.

Box Library

Next we have the box library and the box library shows you two things. It shows you every box that is not currently being used in this template, but could be and that’s these without that asterisks. These boxes already exists but they are not being used in this template and it shows you potential boxes and those are all have the asterisks beside them.

These are boxes that you can create. They don’t actually exist anywhere or in any template yet or at least the one that you would create doesn’t exist. If you create one of these it doesn’t go away, right? For example, I’ll add an html container. Now if we come down here and look at it again there it is, I can still add another one. Because this just represents a potential box. Every time you click and add one of these it adds another box but if there’s an asterisk beside it that’s essentially the potential box.

Now I have this container box and it’s available for me to use. In fact, if I save this now without having placed it in the template… and let’s move away, come back to home. Now that container box is sitting inside the library here. This is the box that I just created here, right? If it’s not being used in the template it’s over here in the library.

The Trash

Then the final part of the HTML Editor is the trash. The trash is the place where you want to delete something permanently for good from the skin entirely. Every place it’s being used, it will be deleted. So that is what the trash is.

So you’ve got your template selector, your template layout, your box library and your box trash.

Skin Editor – CSS

Next step is your CSS interface and it has 3 sections. Note that stuff over here in HTML was template specific but things in CSS are not.

Skin CSS

You start off with Skin CSS and generally speaking there’s no reason for you to ever edit Skin CSS unless you happen to be the skin’s author. If you are ever going to edit CSS you should just use the custom css section. We are going to talk about that more later but this is really there for your reference so that you can see what is going on easily but it’s not there for you to edit.

You can edit it but this is not the place for you to edit it. If you edit it, when you update you could overwrite your edits if you edit inside Skin CSS. So the first section is the Skin CSS.


The second section is the Variables. Most of the variables that exists here in DIYThemes Skins their values are generated from inside the Design Options. So for example, when we changed that color to blue it changed color 1, and color because we changed the colors in the Design Options.

Then what happens is, every time that color 1 is supposed to be used it shows up here as one of these red variables. That is what the red is, it’s a variable and starts with the dollar sign and then has the rest of the reference of the variable. And if you want to know what that is, all you have to do is hover over it, you can open it up and see its name and its reference and its variable value. And these are laid out alphabetically so they’re easy to find.


The third section is packages. We are not going to talk about packages in this class. If you want to learn about packages you can do so by watching the 2.0 version of this class which is already on the site. This is the 2.1 version and packages are going to be eliminated in 2.2 which is why we aren’t talking about them in this 2.1 Skin Editor class. However, to the extent that you’re using them or you want to learn how to use them, you can do that by watching the introduction to the Thesis 2 Skin Editor that is already on the site.

Image Library

Next up you have the Image Library and the Image Library here is intended only for CSS based images. You wouldn’t put your header image here. You wouldn’t try and put post images here. The only kind of images you’re going to put in here are things like the background image for a button, or background image for your page or that kind of thing.

This is mostly just for background images and the images that you save here are saved with the skin. And when you move the skin from one place to another the images would follow you and when you switch skins you won’t see the images that you had in this skin, right? Images themselves are dependent upon the skin.


The next thing is the Manager and the Manager is a very powerful and useful tool. It allows you to create backups of the skin development where you are. So, if you want to try and experiment but you want to be able to easily recover from that experiment before you get too far down the road, then you can create yourself a backup and then simply restore the backup.

Once you’ve created the backup you can export that skin data and then on another site you could import that skin data and essentially copy the skin setup that you have made on one site over to the other site.

If you want to nuke all your changes and get back to your default, you can restore defaults. Fortunately you can restore defaults selectively, so you can come in here and say well I really only want to restore my default templates and everything else I’m going to leave customized, you can do that.

This is a very powerful, very useful tool for you and it’s lovely to have to be able to recover from errors or to be able to get back to a fixed place in your design, or to be able to move your design from one site to another.


Next you have the canvass, and the canvass is a way of viewing your site in real time as you are making changes but before you save those changes. And so you can use this while you’re moving your html around to see what effect that‘s going to have on the page for example, before you save it. So it’s a little quicker feedback.

View site obviously takes you off to the site and the Thesis home button takes you back to the Thesis admin page. The chances are really good that you would be jumping back and forth between the Skin Editor and Skin home as you are working. And that is the Skin Menu.

0 Comments… add one
0 comments… add one

Leave a Comment