Build Your Own Business Website header image

The Thesis 2.3 Skin Editor Interface

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.

The site you see here is the one we were working on last week in the Introduction to Thesis 2.3 seminar. We are going to start now by looking at the Skin Editor interface. We looked at a lot of the other parts of the interface last week.

Editor Menu

This is the Skin Editor here. You’ve got your Editor menu which is across the top. It lets you switch between the Template editor and Editor CSS. It is referring to the Template editor as HTML and the CSS which shows you the Skin CSS. That is the CSS that is being used to display the skin. The Editor CSS is being used inside the WordPress editor.

Editor CSS

So when you are looking at the page edit screen these styles are affecting what that looks like. And the purpose for this Editor CSS is essentially to give you a sort of “what you see is what you get” kind of editing experience.

Let’s edit this page to take a look. We’ll go over to the visual element and what I’m going to do is to add a subheading. Once I put my cursor in there and add heading 2 to it, notice how it has acquired the color brown and that size? That’s how we styled the subheadings in the Skin Design. This width right here, that’s 640 pixels wide.

If you remember the bad old days when you would be editing here, your text would span the whole width of the page as you were editing and any styles that you’d already applied to what the content should look like would not be added to this. Well, the Skin Editor provides editor styles here and it automatically responds to changes that you make in Skin Design. That’s what this Editor CSS is for.

Use Custom CSS For Personal Edits

As a DIY person you are not going to do any edits in either Skin CSS or Editor CSS because you have Custom CSS to create your customized edits. You are not going to make your edits in the Skin Editor.

Why Not Edit Skin CSS and Editor CSS?

The reason you are not doing that is because when the skin gets updated you have a good chance of losing all your changes. If the developer updates Skin CSS in your skin and you have made changes to this then you will lose those changes upon upgrade. Skin CSS and Editor CSS are really designed for the skin designer to use.

Sherry asks, “Custom CSS won’t make changes to editors, the editor area. They have to be made in the Editor CSS to show there?”. Yes, that’s absolutely correct. So to the extent that you want to make changes to Editor CSS this will be the place that you will change them but you won’t want to edit this. You’ll want to just come down to the bottom and add your own styles. And that’s because all of this stuff is being affected by variables here.

So whenever you make a change in Skin Design, that change is reflected in Skin CSS because of these variables. And that same thing happens over here. The variables themselves make the change. That’s why you won’t want to edit this.

Exceptions for Editing Skin CSS

But if, for example, you’ve got a style that you want to have show up in the post or page editor then by all means, add them here. What I would do though is make a copy of that in a text file and set it aside so that when you do update the skin, you don’t entirely loose that data. You can come back and paste it back in.

Where to Put Your Edits

That’s the sensible way to handle it. And if you are creating a style that overrides one of the basic styles, you’d put it at the bottom instead of the top. Because as you may know that latest rule in CSS is the one that is obeyed.

So if you want to override this font size for footnotes, for example, you wouldn’t change it here. You would come down here and add it, just like you added it in your Custom CSS, you’d add it down below and then that rule would take precedence.

Variables

There’s one other thing here and that’s variables. Variable are very powerful. These variables are tied to elements in Skin Design and automatically updated. So you wouldn’t ever want to change a skin variable here. You could actually create your own variable and use it in your own CSS.

So, for example, you can see that xhalf is a variable and if you come over here to xhalf you can see that’s a variable that represents 14 pixels. I usually use the color variables and I’ll show you how to do that in the Custom CSS later.

Variables are for any amount of code that you want to repeat over and over again. So, for example, you can see his zclearfix is display table, clear both, content, empty. Any amount of CSS code could go into one of these variables.

If you are using the same thing over and over again a variable could be quite useful to you. If you are repeating what you wrote then the chances are that a variable is a good choice for you. It means you only have to change it in one place later. And the variables can be used in Custom CSS as I’ll demonstrate.

That’s the CSS screen. You can create a variable, give it a name, give it a reference, you give it whatever value you want and you can see how it’s placed inside the code here. So that’s the CSS part.

Images Area

The Images section is also a section I recommend you shy away from because if you put your own images in here, you might lose them in an upgrade or an update. So I wouldn’t put my own images in here, I’d just use the media library for that.

This is a place for skin designers, again, to put their own images in so that they can reference them in their CSS file without having to use a hard coded reference. This allow them to use a relative URL to the images in this library and it’ll work fine. So, again, this is a skin designers tool.

Data Manager

Data Manager. This is the most important tool for a DIY person available and that is because it allows you to backup your skin data. This is something I forgot to demonstrate in the beginner’s class.

Backing Up Your Skin Data

This is where we left off at the beginning class, Introduction to Thesis 2.3. We just click “create new backup” and we’ll call this “End of Intro the Thesis 2.3”. Say okay to that and now that has backed up everything I did in Skin CSS, everything that’s done in HTML, everything that is in CSS, everything that’s done in Custom CSS, everything I did in Skin Content, Skin Display, Skin Design. 100% of everything I have done to customize the skin has now been saved here.

Restoring Your Skin

If you do something that you don’t like and you want restore it, all you have to do is click this button and you get a restore back to that point. At the end of every session or the beginning of every session you should come over here to the Data Manager and create a new backup.

The Import Skin Data is something that’s particularly useful for developers. We’ll talk about that Thursday.

And Restore Defaults can also be import to you if you feel like you ended up messing stuff up. You can choose what defaults you want to restore.

If all you want to do is restore the original templates, you can come over here and check templates and restore to defaults. It wouldn’t change Skin CSS or Editor CSS or Design or Display Options or any of those. All it would do is restore the templates back to their original condition.

Use Both Backup Software and Data Manager

So Data Manager is totally useful. Richard asks about the Data Manager, “if you are using BackupBuddy is this necessary?”. And the answer is absolutely, it is necessary.

BackupBuddy is nice and quick for backing your site up but there’s nothing faster than the Data Manager for backing up your Skin Data.

The Data Manager does not backup your site, it backs up the data about your skin.

BackupBuddy also backs up the data about your skin because it’s in the database but if you’ve got to restore, you’ve got to restore your whole site with BackupBuddy. That’s a bit of a process. However, if you want to restore back to a certain place in your skin, it’s just the click of a button in Data Manager. You didn’t lose anything and you can always go back to where you were before.

They are related in that they are backups essentially but the data manager is for backing up the work that you have done on your skin, not the rest of your site.

Canvas

Some people find the Canvas to be useful. Theoretically you can see it in real time. As you make changes you see them showing up here. I don’t use it. I feel like it gets in my way. That’s just personal preference. I have found that there are some things that don’t load properly in Canvas so I don’t find it to be particularly useful.

This is a link off to view the site and this is the Thesis Home button which takes you back to Thesis Home.

HTML Interface/Template Designer

Let’s go back to the Skin Editor briefly. Now let’s look at the HTML interface which is really the template designer. The first thing you have is the template chooser button. When you load the page, it shows you what template you’re on.

Choosing the Right Template

Something that bedeviled me when I first started doing this was I would forget that I needed to switch to the template that I wanted to edit. So I’d edit the Home template but I really wanted to edit the Front template.

In order to get to those templates you click on this button and it will take you to the template selector so you can choose the template you want. Unfortunately this is going to be a little bit confusing to you, because while these are WordPress post types, they are not useful to you in these templates. You wouldn’t edit any of these.

But, for example, if you had a WooCommerce site your product template would be here. So any kind of custom post type is going to show up under that Single template. And then you’ve got custom templates that come with the Skin or that you can create for yourself.

Create a Custom Template from an Existing One

And then you have a very, very powerful tool which is Copy From a Template. So if you want to create a page that’s very close to the Home page but just a little different, you can create a custom template and then come over here and choose the Home page.

It’s not available here now since we’re on the Home template, but you can choose that to copy into the template and you’ll have a base to start working from. You can then remove or move things around as you wish.

Template Options Button

The next thing you have is the Template Options button. That’s the little gear that shows up when you hover over the template. This shows you the options you have for this specific template.

So you can add a body class to that template only or you can add a javascript library or if you had a script that you wanted to run on your home page in the footer then you can run it here. If you have a script that is to run in the head, you can run it there. If one of these scripts requires one of these libraries then you can click on the button and it’ll add the library.

Some of the templates are designed to show more than one post. So under wp loop you can choose how many posts you want to show up on the Home template.

Additional Template Options

Then this Footer Widgets Box is from the box we installed last time. Where you can choose to remove the footer widgets from the template. So different things will add additional template options.

Box Library

Then you’ve got the actual template itself. We’re going to spend lots of time on this today but this is where all the boxes are. Each one of these things is a box. You’re going to learn how to go through the box, manipulate what’s showing up in the box and how to move them around. But this is the actual template editor itself for the template area itself.

This when I remember to refer to it correctly is the Box Library. It’s the place where all of the boxes that are available for this template are not being used exist. And all of the boxes that could be created and added to the template exist here.

Asterisk Boxes are Potential Boxes

That’s what the little asterisk means. If you want another nav menu, you’d click this nav menu with the asterisk and it would create another nav menu that you could then put in the template. If it’s got an asterisk before it, it means that it’s a potential box.

If it doesn’t have an asterisk before it, it’s an actual box that is available and you can immediately drag it in to this template.

Trash Can: Removes Items from the Entire Site

Then you’ve got the Trash Can. The trash can is a place where if you delete it, you are deleting it from every single template on the site. You aren’t just deleting it from this template, you’re deleting it everywhere.

If, for example, you don’t want the nav menu in this template, you would just move it over here to the gray box. You would not move it into the pink box because it would kill that everywhere.

This is really the main Skin Editor, this Template Editor. There are some other items here that are more technical and probably wouldn’t be needed by the DIYer.

0 Comments… add one
0 comments… add one

Leave a Comment