We’ve gotten lots of theoretical conversation out of the way like the relationship of Skin Display, Skin Content, Skin Design and Boxes so now what I want to do is go through an overview of the skin editing process in Thesis 2.1. Because the chances are that what you’re doing is working with the skin and trying to edit it; trying make it look a specific way.
Skin Editing Means Changing HTML and CSS
The skin editing process is an exercise in changing HTML and changing CSS. Even if you’re just using design options to change it, you are still changing the CSS. When you change display options, you are changing the HTML so all skin editing is going to be some combination of changing HTML and changing CSS even if you’ve never break open the skin editor yourself.
Because we’re going to work inside the skin editor the chances are you’re going to be more actively and deliberately changing the HTML and changing the CSS.
A Simple Site Change Example
We’ve already looked at simplistic, stylistic edits right? We’ve changed a setting and that setting changed the way the site looked. Let’s do that one more time. Let’s come down here to the site title and we’re going to make the title Arial black, we’ll make the font size 52 and we’ll make the text color bright yellow.
We’ve saved that and we’ve just now changed the underlying CSS of our site. Now we have a yellow text that is in larger style. So we have just changed the CSS style by changing those design options.
Simple Structural Edits – Moving Boxes
You can also make simple structural edits by moving existing boxes or by removing existing boxes. For an example structural edit let’s go to our front page Here let’s move the navigation menu to be below the header instead of above it. All we have to do is drag it below the header, save that template, refresh the template and now the navigation menu is down below the header.
However, if we go to another template the navigation menu is still up above it. Because the template that we changed was the front page template. You always know what template you’re on by looking down here on the lower left hand corner and anytime you want to edit your template all you have to do is click this to edit it.
You click to edit, it takes you directly to the skin editor with that template open. So that can be a very quick way for you to move from template to template. So, if we want to change that on the category template we click to edit and just drag that nav menu down there and save the template. Then go back to the site and go to those categories and now the menu stays below but in the home template it is still up there. So that is the way to make simple structural edits is just to move them around.
Structural Edit – Adding Boxes
Some of your structural edits are going to be just that, rearranging boxes but some of them are going to be adding boxes. So, instead of just rearranging boxes let’s say we are going to have our main nav menu above the header and we are going to create a new nav menu.
To keep this clear I’m going to give this a more specific name. I’m going to say top nav menu. I should show you that when you save this template and you go over the skin design or skin content that is now called top nav menu not just nav menu. Changing the name here changes the name here, which can be very useful. It also changes it in every other template so if you go back to the home template it’s also now called top nav menu.
Let’s add another menu. We’ll open up select the box to add then come down here and we’re going to add another nav menu wp. We’re going to call this one our category nav menu. Now, it’s absolutely critical, in every case, any time you create a box you want to give it a descriptive name. Because sometimes you need to try and figure out where it is, where is it being used and if it doesn’t have a descriptive name that’s hard to do.
I see this all the time, people creating a box and leaving its default name. And so they may have 3 or 4 different wp nav menus and not be able to tell which one is which. And that’s simply because they didn’t name each one with a name that made sense to them so that when they saw the name they could recognize it.
Also, if you always make sure that you name a box that you’re using then if you see one without a name you know the chances are you made it inadvertently and you don’t need it so you can go ahead and delete it.
But we’re just going to create that one and then shift+drag it out of the library and into the container, and then down below the header. So now we have one menu below the header, one menu above the header on the front page template. I guess I haven’t yet selected which menu I want to use though in design, in skin content.
So, now that I’ve added that menu I need to refresh my view here so now I see a category nav menu and now let’s choose a category menu. You can see that had we not given the menus specific names they would both have been named nav menu and we wouldn’t have known which one is which. Which is why you need a descriptive name so you can find it.
And actually all we have to do now is refresh this and now I’ve got my category menu here and my regular menu up here and we’ve just added a box. That’s one way to do it. So, your simple structural edits in Thesis 2.1 are either rearranging existing boxes or creating new boxes and sticking them in place.