Build Your Own Business Website header image

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

Video Transcript

Okay so having said that, let’s take a look at the interface. So this is a site that I’ll be using on Thursday to teach Lesson 3 of the Responsive Skin class. This is a technical class that is designed for people who already understand code so it’s not in the same league as this class. But nevertheless, this is the site that we’re working on for Lesson 3 and it has a default installation of Thesis 2.01 and the classic skin which is what we’re going to be looking at here from now on.

So if we come on over to our dashboard and we go to Thesis. Here’s our Thesis interface, right? Now, we’re not going to talk about all aspects of the interface because this conversation is really about the Skin Editor itself. So we’re going to focus entirely on the Skin Editor portion of this.

Now the first part of the Skin Editor really is this Select a Skin section where you can choose the skin that you want to use. And this is the skin that we’re developing in that class and this is the lesson material that has already been developed. And then this is the Thesis blank skin and this is the current skin, the Thesis classic. And you can use this button here to upload skins. You can also preview a skin. So if you’re actually working in your Skin Editor, this is your current skin but you want to be editing this skin here, the Blue Masher skin. If you preview the skin in development mode, what happens is the work that you do now in this skin is only visible to you. If somebody… well, for example, if you yourself were in your browser window right now to type in Lesson 3 responsiveskin.com or thesisresponsiveskin.com, you would see the Thesis classic skin. However, what I see the Blue Masher skin that I’m working on and that’s what this preview skin does. This preview skin allows you, the administrator, when you’re logged in to be editing a skin and to be looking at it without that actually affecting the skin that’s being seen. I’m just going to show you that here just for grins because you’ll be able to see it. I’m not logged in to the site in Firefox so in Firefox, we’re going to see the standard view. This is what it looks like in the default view or what everybody else sees. And this is what I see when I’m working on it. Okay so when we stop previewing that skin, that changes and it goes back to the regular  ot everybody else sees.

Okay so that’s how this preview skin in development mode thing works. It allows you to work developing a skin while another skin stays active and unchanged.

Somebody asked, “Where can you upload skins from?” Well, sooner or later, there will be a lot of skins available to you that you can upload. There are a couple of them that I know of. One of them is… what is it? I think it’s nude 360. So here’s a skin that this developer has released. Give it just a second here. This developer has released for free and you can go ahead and download it and install it and use it. And there are others actually, if you go on to the Thesis forum, you’ll see that other people have developed some free skins that people can use and then there are skins available for purchase also. So there are… there will be lots more of them available. I’m developing a skin for members myself and then there’s this Blue Masher skin that we’re developing. And so before you know it, there’s going to be lots of places you can download skins.

So Greg asks, “Why would you use the preview skin?” You would use the preview skin because you’re working on changing your skin or changing the appearance of your site and you want to work on it without actually changing it because your site is live. So it just makes it possible for you to say, be working… have the site display this skin and be working on the Blue Masher skin without anybody else seeing the Blue Masher skin. Because the Blue Masher skin isn’t ready for anybody to see. So since I don’t want people to see it, I can go ahead and work on it on the real site without being afraid that it’s going to affect the real site because I’m working on it on development mode.

Jaimee asks, “Are changes made in the development mode automatically saved to the skin when you switch back to default?” Yes, absolutely. Changes that you’re making in development mode are made to the skin that you’re working on. If you’re working in development mode, you’re working on a different skin than the skin that is active. You’re not working on your active skin. You’re working on a separate skin.

So back to the Skin Editor. So now we come back over here to the Skin Editor and when we click on the Skin Editor, something that happens is we get this canvass. Now this canvass is actually a pretty cool tool because what happens is when you are making changes here in either the… in the template or the Skin Editor, those changes are automatically reflected here before you save. This means you can test a change without actually saving the change which actually  makes it the whole development process quite a bit quicker.

Harvey asks, “So once you development skin is right, you can just switch skins and your site will reflect the new look?” That is absolutely right. It’s exactly what it will do and you know, it’s not just the new look either. You know, a skin can be quite complex and can have lots of different templates. And all of those changes would be made upon activating the new skin. So this process of switching back and forth, that makes this whole skin business pretty slick.

So Jim asks, “Can I repeat how I would… how you make temporary changes?” Well, it’s not a question of making a temporary change, Jim. It’s a question of whether or not you’re a making a change to the skin that’s alive or whether or not. And if you are working in development mode then you are not changing the live skin. You are changing the skin that you’re working on. We’re not working in development mode right now. We’re working in live mode. And then what happens here is that the canvass, before you actually save the template or save the css, the canvas reflects the changes that you make as you are making them. So you get this sort of real time feedback of what you’re doing. And we will be looking at that as we work our way through this.

Okay so anyway, this is our canvass. It’s a place that gives you real time feedback without having to save and compile and that kind of stuff, without having to refresh a page. Generally speaking, you can just come back over and you can see the change made. And if you’ve got more than one monitor, you can just switch it over to the other monitor and work in the interface here and see those changes immediately and automatically reflect it.

Okay so now we have our HTML… we’re looking at our HTML view here. First off, let’s just say that your Skin Editor really has 5 main pieces. It’s got the HTML view. It’s got the css view. It’s got the images view, the manager view, and then it’s got this link over here, the big, white Thesis that will take you back to the Thesis… takes you back over here to the Thesis admin side. Okay so that’s… those are the main sections here.

And in the HTML editor or the HTML view, it also has 5 sections. The first part of this is the template selector and when you click on this, this is the template name here. When you click on that template name, you have a choice of the available templates that happen to be here. And if you click on one of those templates, say for example, click on the page template, it takes you to that template to edit. Now we’re going to talk extensively about templates and what those templates are for here in a few minutes. But this is your template selector. That’s the thing to take away from this.

The second part is your template layout and that is this whole section right here. It consists of essentially everything that is inside of the body. Now when we start talking about what each of these things represent, you’ll see that I say that absolutely everything inside the template is wrapped inside this body. The template layout is all contained inside this body thing here so it’s this right hand side of your screen.

The 3rd part is your box library and this holds every box that you have created or every box that is created in the skin that is not already on the template. So if it’s over here then it’s not over here. And if it’s over here then it has not yet been added to this template. You can tell that there are parts… template parts or boxes that have been created by Chris when he created this skin that he determined were not necessary or useful on the page template. And so he moved them over here. So anyway, this is your library. It holds every box that you have created that is not already added to the template that you’re looking at.

So as you switch templates, the content here is going to change. So if we come over for example, come over to our single template, a bunch of these boxes are going to go away. So all of a sudden, our library’s a whole lot smaller because it’s got more of these boxes over here on this template than there were before.

Okay the next thing you have or the 4th part of this is your box creator or your box builder. Your box builder can be dragged around and placed in a convenient location. And this is where you actually build new boxes from.

And then finally, the 5th part is your box trash and the box trash is if you have a box that you know you do not want to use anywhere on your site period then you would drag it here. Because even if that box is being used someplace else on a different template, if you drag it over here, you’ll delete it from every template that it… where it happens to exist. So you’re really only using this to delete stuff that you’re never using. If you’re not using it in a specific template, you would just drag it over to the library because that’s where you store things that you are using but just don’t happen to be using in a particular template. And this is where you simply delete entirely the entire box.

That is the HTML section. The next section is the css section and the css section has… it has 4 main areas. The first one is your package library. And so every package that’s been created sits over here in this library. We’ll talk about what those packages are and what they do here in a few minutes. But nevertheless, that’s what this section is. It’s your package library and you can create a new package in that library simply by selecting the package… the type of package you want to create.

There’s also the second part is this variable library. Thesis does give you the opportunity to create variables. We’ll talk about those variables briefly here today. They’re not something that a beginner really needs to use. You certainly can use them if you wish and you’ll see how we do use them here. But this is maybe a slightly more advanced concept. But nevertheless, the second section is a variable.

The 3rd section is your compile list which is called skin css and we’ll talk about compiling again in a moment. But I want you to understand is that this is the list of all of the packages that will be compiled into a css file. You can have more packages… you can have packages here in your library that are not in the compile list. And the reason you do that is say that you’ve decided that you’ve created a package but you’re not using it at the moment but you don’t really want to delete it. So you can just leave it over here in the library and simply remove its reference from this compile list and we will be working on that again.

And then finally, you have this custom css. Now this custom css places where you can actually hard code, write plain old ordinary css code. And it’ll be automatically added to the css.css file. Now you’re not going to do that because this is a beginner class and we’re not writing any code. But to the extent that you wanted to write some code, to the extent that you’re not a beginner and you do understand css syntax, you can write any css you want here and it will be added to the single css file that Thesis generates.

Long time users of Thesis will know that Thesis version 1 creates 3 or has 3 css files. It’s got the css file that doesn’t change at all, that’s style css. It’s got the css file that’s generated when you change Thesis Design Options and then it’s got the custom css file which is the one that you, as an editor, might change. Well, this does away with that entirely and it packages all of the CSS into a single file every time you compile skin css. And so custom css… anything you write here will go in that file.

Okay then you have the images thing here and the images, it’s essentially a library. It’s got 2 parts. It’s got a place for you to upload images and then it’s got the library of all of the images that you have that are added to the skin. Now if you switch skins, you’re going to be looking at a different image library. This image library is specific to the skin. The images you put here won’t be in another skin if you switch skins, however makes it quite nice for you to package up your skin and move it to another website because it’ll take all the images with it. We’ll look at adding images to this here in a few minutes. But nevertheless, that’s what this is for.

And then finally you have your manager. Now the manager is something that’s new in 2.0.1 so it’s just been out for a week. And what it lets you do is first, create a backup of exactly where you are right now in this skin. So if we click create backup and we’re just going to call it first backup. You can call it anything you want, doesn’t matter what you call it. But once you’ve done that, the backup is complete and it sits here in this library and it’s stored.

Now you can have lots and lots and lots of them you know, and you may choose to delete one. This can be very useful say, you’ve got your skin to a point where you really like it but you’re going to get ready to try something new. You just go create a backup of where you are right now and if you don’t like what you did, all you have to do is restore that last backup. And this is a backup just of this skin itself. It’s not a backup of say you know, your post, your pages or your website or anything like that. It’s just backing up this skin and these backups say with the skin. So you’re only going to see the Thesis classic backups if you’re editing the Thesis classic skin. You won’t see these Thesis classic backups if you’re editing say the Blue Masher skin.

This also lets you import skin data. So you know, something we talked about last couple of days on the forum is that you know, say you’ve got several different sites and you want them to all be styled the same. Well, all you have to do is create the skin you know, or edit the skin once on one site and then you can create a backup of that, export it. And then on any other site, you can just import that skin. And all of a sudden, this next site looks exactly the last site did.

And I think this only works currently for the Thesis classic skin. I don’t believe this works for any other skin yet. But nevertheless, this gives you the opportunity to say restore back to the default. Some people talk about the you know, getting it back to its original, pristine, virginal state and restore default will do that for the Thesis classic skin. It doesn’t happen to do that for other skins at the moment.

Let’s see, so Harvey asks, “Talking about this images section, if you add images to the Media Library, are they added here or vice versa?” And the answer is no, this is an entirely separate thing. This is one of those places where you are making a distinction between style and content. Images you put in here, you are putting in here for stylistic reasons. And so they are inherent in the skin. However, post images that you add or images that you create that are not skin-specific, those are really considered or should be considered to be content images and those you would add using the Media Library. So anything you put in here is not in the Media Library and nothing that’s in the Media Library is represented here.

Okay and then your final button of course is the Thesis button that takes you back to that… your main Thesis admin page.

0 Comments… add one
0 comments… add one

Leave a Comment