There’s a very strong connection between this class the Thesis 2.3 class for DIYers and the class for Web Design professionals. There’s a lot of overlap in these three seminars. So I’m not going to re-demonstrate everything that I’ve done so far.
Multiple Ways to Access the Skin Editor
We are going to start by taking a thorough look at the Skin Editor Interface. We’ll go to our Dashboard and then the Skin Editor. You can get to the Skin Editor by hovering over Thesis.
If you are at Thesis Home you can also get to the Skin Editor by clicking on the Skin Menu and coming to the Skin Editor.
You can get to the Skin Editor from the splash page of the Thesis Home page just off of this link.
Also, one other route to the Skin Editor is down here in the lower left hand corner of your pages. Down here when it says “Front Page”, it’s telling you what template is controlling the display of this page. And if you click there you will end up going directly to that location in the Skin Editor.
How to Know Which Template is Being Used
Let’s go to different pages on the site and you can see the various templates that are in use. This page is controlled by the Page template. If we come over here to Cafe News you can see this is the blog posts page and it’s controlled by the Home template. This blog post is using a custom template called Full Page but if we go back and click on another one it is using by default the Single template.
If ever you are looking at a page and you’re not clear what template is controlling it, you can find that right down here in the lower left hand corner. Clicking on it will take you to that template.
HTML Section of the Skin Editor
We’re going to start by looking at the HTML section of the Skin Editor. When you open up the Skin Editor it automatically starts off at the Home template.
How to Switch Between Templates
This big orange button here tells you what template you are on and when you click on it it brings up the template menu. So you can then choose which template you’d like to be working on and other things as well.
Template Menu and Template Options
This part of the Skin Editor has five main sections. It’s got the template selector which is this, it brings up the template menu. It’s got the template options and when you hover over the template name you can see the little gear that allows you to access the template options.
Different skins can provide different types of template options. Different boxes also provide different template options. Many boxes that I’ve written have template options for certain templates. This is a place where you can set some of those options.
The next part of it is the template layout. It starts with the HTML Body and everything you see in here is a box that represents a part of the template layout. We’ll spend a bunch of time here today.
Over on your right you have essentially the Box library. It’s distinguished from the Box trash can by the fact that the trash can is pink and the library is gray. If you select the drop down menu here it will show you every box that is available to use but not being used in this template.
What Does the Asterisk Mean?
And if it has an asterisk beside the name it is a potential box. If you wanted another HTML container you would click on the asterisk version of HTML Container and it would create a new one.
These are your potential boxes. Anything with an asterisk is a potential box that you can add. Anything without an asterisk is a box that is already been created but is not being used.
Lastly you have the box trash. Use the box trash sparingly because when you delete it from this particular template you are actually deleting it from every other template as well.
If you drop a box in the pink trash and you hit save template then that box is gone even if it was used in every other template.
So if you are not using a box in a specific template then you just drag it back into the library rather than deleting it. In the library it will be available to every other template as well as the template you are on.
CSS Section of the Skin Editor
Next up is the CSS section of the Skin Editor. It has three sections.
It’s got Skin CSS which is the skin author’s CSS area. If you are customizing a skin that is not your own you should use Custom CSS for you code. You should not use Skin CSS. The main reason is that you will likely lose any code you placed here when the skin updates.
Editor CSS is the CSS that controls what you see when you are editing your post or page in the Skin Editor. It is essentially an attempt to get to a “what you see is what you get” view. It’s all the styles that are necessary for you when you are editing a post or a page to know what that will look like as you are editing it.
If you are creating some of your own styles that you are going to use frequently in the Skin Editor you certainly could go to the bottom of this and paste those here. Then those styles would be implemented inside the post or page editor when you are working there.
The downside of that is that again, any code you place here can be erased in an upgrade. Please make sure you keep a backup of that code someplace else so that when you do update a skin and the Editor CSS gets replaced you have easy access to put your styles back in.
Then you have the variables. We talked about variables in the Thesis 2.3 for Web Design Professional seminar. There we show how to use them and implement them in your own CSS.
These variables are automatically populated by decisions that you make in the Skin Design. If you are in Skin Design and you change colors, those colors change here. If you change font size, etc that all changes here. So that’s what these variables are for.
It is possible for you to create your own variables and use them in Custom CSS but most beginners are not going to be working on that sort of thing.
Next up you have Images and images here is a place for you to store images that you want to have relative URLs. So if you are using the image in CSS for example, you can just copy this rule, just like that. You just click on it and control copy. Place its SRC or URL in your CSS rule and that will work. It makes the images portable so if you want to take this skin someplace else then you can.
The only downside to that is that sometimes you want to force an upgrade of a skin that it’s just not telling you that the skin in there. If you delete the old skin and then reinstall the updated skin you end up losing this stuff. You don’t lose it in an upgrade but you can lose it if you delete the skin and reinstall a newer version of the skin.
The Data Manager is your best friend. I talked to someone yesterday who said “Where can I find my Custom CSS in the Database? I just did something and I lost all my boxes and all my styles.” I said it should be pretty easy, all you have to do is go back over to the Data Manager where you saved it so you can restore it.
Unfortunately, she had been working on her site for weeks without having saved her skin settings. She ended up having to recreate everything from scratch.
It just takes five seconds of effort at the end of every session or at the end of every session to backup your skin data. That way if a disaster strikes you can get back to where you were quickly and easily.
It has lots of other benefits and features and I talked about those in the Pro Class, Thesis 2.3 Skin Data Management.
You can use the Canvas to view the site if that works for you. It does change in real time before you save changes. To the extent that you find that useful you’ll find that here.
Then this button takes you off to your site and this takes you back to Thesis Home. Those are the basics of the interface.
HTML Section – Box Review
I want to come back and talk about the HTML section a bit more. In this section if anything is going to show on the page, it’s going to show because there are boxes here inside of the HTML section.
If you hover over the name of the box you can find the box options, that’s similar to template options. Each box has a set of options. Generally at a minimum they have HTML and admin options. We’ll be doing quite a bit of working with that today.
If the box is a container then the box also has contents. There’s an open and close button to hide or reveal what’s in a container. If you hover your mouse over you can see the yellow lines going around the box. That is showing you the container itself so you can identify what’s inside that container. It’s giving you a little graphic help for that.
If you hover over columns you can see that content, column, wp loop, post box, all those are inside of columns. So there are all containers that can be opened and closed.
What’s in the Tray
When we start talking about the post box you’ll see that some container boxes are parent boxes which means that they automatically have a set of children boxes. Those children boxes can be found in the tray.
When you click “show tray” you can see the boxes that are not being used currently. They are available to be used but they aren’t being used. If you hide the tray you can see the boxes that are being used.
How To Move Boxes Around Templates
Then one final note about how you move boxes around templates. You have two kinds of drag operations.
Drag and Drop for Moving Inside a Box
You have the kind of drag operation that moves a box around inside the box it is already contained in. So, for example the nav menu is contained inside the Container. So I can click and drag the nav menu around to different locations inside the Container. It can’t go into the header, columns or footer by clicking and dragging.
When you see the yellow box pop up as you drag the box around, if you drop it that’s where it will go. That is a very common thing. If you are confused about where this box is going to go, look at the yellow areas as you move it around. If you want to move it down to the bottom but it’s showing yellow up here, then you haven’t dragged it down far enough.
Shift+Drag for Moving a Box From One Box to Another
The second kind of drag operation is the one that drags elements from one box into another. That is a Shift+Drag. Hold down your shift button and your left mouse button and now you have a drag and it’s no longer going to drop inside the container. Now it opens up other containers that it can go into instead.
We could drop the nav menu in the Body with this Shit+Drag. Again, when you do that the box you can drop in is going to highlight yellow. I’ll drag it around and you can see how each of these other boxes lights up yellow.
Those are the two operations you need to know. The click and drag to move a box’s location within a container and then the shift and drag to move a box into an entirely different box.
My recommendation is that you use a mouse if you are newer to the technology. I’ve found that it makes it much easier to do these operations with a mouse for the generations who didn’t grow up using computers. If you are used to working with the pad then that’s fine.
Next up we are going to talk about the relationship between Skins, Templates and Web Pages.