Now that we’ve covered the 4 main concepts you need to know to effectively use the Skin Editor, we’re going to take a look at the new Thesis 2.1 skin interface. This is the site that we developed on Monday, The Barking Chihuahua Cafe.
Areas of the Skin Interface we covered in the Launch Party Videos
We made all of these style changes and formatting of this site using the Design and the Content sections of the skin and we talked about the general layout and configuration of this part of the interface on Monday. So if you didn’t see Monday’s videos and this is looking all new to you, go back and take a look at the Launch Party videos and watch those so you can get a good understanding of those aspects of this interface because I’m not going to be repeating that.
What we’re going to spend essentially all of our time today in is looking at the Skin Editor. The Skin Editor is found under the Skin menu, we come over here and click Editor and we can see the Skin Editor.
The Skin Editor and Custom CSS
Actually, before we go to the Skin Editor I’m sorry, I want to show you one other thing. We have the Skin Editor but we also have Custom CSS and Custom CSS has been moved. In Thesis 2 it used to be under the Editor, in 2.1 it’s now here in the Skins section instead. We will actually be using this Custom CSS interface quite a bit here today.
So you’ve got Custom CSS that can be found under the Skin menu and then you have the Skin Editor that can be found under the Skin menu and the Skin Editor takes you to the newly revamped interface essentially for the Skin Editor, it’s been changed quite a bit.
5 Sections of the HTML Editor
The first section here is the HTML section and then the second is CSS, then Images, Manager, Canvas and then Thesis. We’re going to start off here in HTML editor and it has essentially 5 sections.
The first section is the template selector. If you click on the word Home here, well this is indicating that we are working on the Home template right now. If you click on Home, you can see all of the Core Templates plus the Custom Template and the Add New custom template and the Copy from Template dialog.
So you’ve got the templates selector that you get when you click on this Home and if you choose say, the Page template here, this will change from the Home template to the Page template. This is where you’re going to choose the template that you’re working on.
The second part is kind of hidden until you hover over here and that is the template options. If you click on this, that’s that little gear shift right here, right? This little gear shift right there is template options. Each template has its own set of options. The template options is this dialog and as I said, each template has its own set of options and they are dependent upon what you’re doing. There are different kinds of options for different templates.
The third part is the template layout and that’s this thing here, this is the template layout. We’re going to spend a whole bunch of time talking about the template layout.
Then you have your box builder and we’ll talk quite a bit about the box builder here in a few minutes as well but this is sort of the box builder/box library. It gives you the opportunity both to choose which boxes you want to create from scratch and then boxes that have already been created and you can just simply add to your template. So that’s your box builder/toolbox.
Finally, there is the trash. If you want to delete a box entirely, you can simply just drag it over here to the trash and it’ll get thrown away. So that’s the 5 sections of the HTML editor.
Sections of the CSS Editor
If we come over to the CSS editor, it has 3 sections.
You have Skin CSS and in this case it’s for Classic Responsive. So you’re looking at all of the CSS associated with a the skin and here that is all of Chris Pearson’s CSS.
Then you have the variables and these variables show up here. That’s what this $font, $f_text, $h_text are, those are variable references inside of Chris’ CSS and as it turns out, these variable references are also tied directly into the content and design options.
For example, site background color here is ff right? If we come back over to our Skin Editor and CSS and look at colors, color 3 is the skin background color which is fff. If you change that here, let’s call it red, and save the CSS then actually it’s going to change the background color to red. So if we go over to the design section…okay, there’s a bug. That should actually have gone to red. We’re going to go ahead and save that design option again and we’ll turn it back to white. That’s something I had not noticed before but there is an interoperability though between the two.
Okay, so back to CSS. These are your variables and you can create a new variable here. When you create a variable you give it a name and a reference and a value and we’ll talk more about actually creating your own variables on Friday, we won’t be talking about creating your own variables today.
The third section is the packages section, this is something that is a hurdle from 2.1. If you’re using a skin that was designed and built in 2.1, chances are you have a whole bunch of packages and packages do get added to Skin CSS in exactly the same way as they used to.
So if you’ve got a package, it’s going to have its reference here in Skin CSS and that reference will be automatically converted into the actual CSS package. But we’re not going to spend any more time talking about packages here today because they won’t be available to you in 2.2 so you may as well not get used to them here in 2.1.
The next section is images and images has a couple of sections. One is to upload your image, to choose your file and add the image. And then you’ve got your image library which shows a little thumbnail of the image plus gives you the reference for the image and its height and width and the ability to delete it.
Your manager allows you to backup your skin, where you are in a specific location. And if you back it up, it comes down here to the section of backups. You can import skin data from another site and you can restore the skin’s defaults. This is exactly the same as it was in 2.0 and if you have any interest in understanding how this works, go ahead and watch the videos I have on using the skin manager in 2.0.
A new innovation is the Canvas now does not automatically open all the time. Those of you who are familiar with 2.0 had the canvas always opening. The canvas is a tool that you can use to preview changes that you’ve made to your site in your Skin Editor. However, at the moment it’s not flawless.
For example, these things are showing up even though they’re not actually there and the CSS that was created to display the footer widgets in the correct location also is not showing. So at the moment we’re not really using this although I’m guessing that by the time this becomes live, the little glitches here in the canvas will be removed
And of course, you have the Thesis button which takes you back to Thesis home.
How to Manage Thesis 2.1 Boxes
Now, I just wanted to do one other thing here under the Skin Editor and that is to show you how to manipulate or manage these boxes because there’s just a little bit of dexterity that’s necessary in order for this to work.
Each one of these things represents a box so the container, if you hover it you can see what that box contains. The container contains everything and then header only contains header. Well actually, let’s do this first. You can contract the contents of your container so you can see just the container or you can expand it.
Most boxes have an expand or show/hide box contents and also box options. If you click on the box options then it brings up the options available for the box similar to the template options. And if you open up, for example, the header you can see that there’s a site title and a site tagline inside the header and there are a couple of kinds of dragging operations you can do.
Drop and Drag
The most common dragging operation is one that moves stuff from one box to another. So if you’re going to say move the Header into the columns, you would shift and then click and drag and the thing that you can drop it into is showing up in bright yellow. So right now, because columns is bright yellow, it could be dropped to there and now that’s in content columns. It could be dropped here or it could be dropped in WP Loop or in Home Post Box. Notice Nav Menu does not change color because you can’t drop the header into the Nav Menu.
You could also bring it over here and drop it here to remove it or bring it here and drop it there to delete it. So it’s shift+drag to move it from one container to another and then just drag to move it inside the container.
Both the Header and the Nav Menu and the Columns and the Footer are inside the container and so, to move the Nav Menu to the bottom of the container, all you have to do is just click and drag, that’s how things move around. So you have shift+drag to move stuff from one box to another and drag to rearrange things inside the box.