Build Your Own Business Website header image

The Thesis 2.3 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.

Now that I’m done with singing Thesis 2.3 for WordPress praises what I’d like to do is take a look at the Thesis 2.3 interface.

This is a new Thesis 2.3 site here that I’m going to use for the rest of the seminar. It happens to be hosted at GoDaddy. The reason why I mention that is because you are going to see me flush this cache a lot as we make changes.

First I thought I should do this on a site where there’s no caching like one of the sites hosted through me on WP Engine but I decided that I would be doing a disservice because most everybody else out there in the real world has to deal with caching as they are doing development.

You can watch how I have to deal with caching on a regular GoDaddy WordPress site. It’s the same way you’ll have to do it when you go to make changes on your Thesis website.

Admin Menu

The Thesis 2.3 interface has essentially the WordPress centric part and then the Thesis centric part. The WordPress centric part is this Thesis Admin Menu here on the WordPress Admin Menu. Once you click on that it takes you to Thesis Home. And now everything that you can do on the website with Thesis can be accessed from here.

You do have a lot of it over here now in the Admin Menu and it does have an inherent organization. You’ve got the Thesis Home button, then you’ve got all of the options associated with the skin that you are using. Then this list of options of is different depending upon what skin it is.

And then you have Manage Skins and Manage Boxes which are not so much options and settings but they are loading and unloading of boxes and skins. Then system status.

Skin Menu

All of that is over here as well. So if you look at this list of menu items in the admin you can see that list lines up along here. And then it also shows up in the Skin Menu. The Skin Menu has all of these same things and the Skin Menu is going to be different depending upon what skin you have installed.

They’ll share commonalities like content and design and custom CSS and editor but some won’t have docs, some won’t have a logo, some won’t have header image while some will have something else. This is the place where the skin gets to decide what kinds of options it wants to provide for you there.

The new interface element is that you click it and it stays open. You click it and it closes. It used to be you hover now if you click it it’s open and then click it and it closes.

Differences Between the Skin Menu and Site Menu

Across this menu bar you have again pretty much all of the stuff that you would need to access in order to work on your site. So, you’ve got the Skin Menu. You’ve got Site Menu.

Skin Menu Changes Depending On Skin Used

The difference between the Skin menu and the Site menu is that any changes you make here in the Skin menu or any options that you set in the Skin menu are dependant upon the skin that you use.

If you switch skins you’ll have a whole different set of options and the options that you set here won’t carry from skin to skin. It is skin dependent.

Site Menu Settings Independent of Skin Used

On the other hand, the Site Menu where you have tracking scripts, site verification, analytics, publisher, favicon and the rest of this stuff. This is actually independent of the skin. Settings that you set here will stay the same no matter which skin you use, even when you switch back and forth between skins. Whether you are working in development mode or not, this set of options is specific to the site not specific to the skin.

Thesis Boxes are Independent from Skin

And then the same thing is true for boxes. Boxes have options that are specific to them and if you change skins the boxes still stay there. And if you set options in boxes those box options still stay. The are dependant upon the actual installation of that box.

Note that this Site Options can also be found down here. Site Wide Options can be found here.

You’ve got a button to go off and to view the site. And then you’ve got a More button. A place for your license key. A place to check system status. Links off to the user guide and the support center and the blog and the affiliate program.

Find Thesis 2.3 Version Number

The most useful thing I think of here is the version. I often have to answer questions on my forum about the Thesis and I have to ask what version of Thesis they are using. They routinely answer “I don’t know”. This is how you find out which version you are using. Go to the More button and look down here.

Skin Specific Options

That’s sort of the broad overview of the Home Menu. That’s what I think of this as is Thesis Home. Most skins have all of their skin specific options in one of three places. They have them in Skin Content, they have them in Skin Design and they have them in Skin Display.

So, if you click on Skin Content you actually see both. The Skin Display options and the Skin Content options share the same page but the Display options are a set of options that allow you turn the visibility of something on and off. And, again, these are dependent upon your skin.

Skin Content and Display: Content Display

The Content options are places where you decide what kind of content is going to be display. Right now you really only have 3 choices here but by the time you are done customizing the skin, especially if you are working in the Skin Editor, you could have many, many choices in this list.

And so you’ll choose what nav menu you want to display here. You’ll choose what content you want in a text box here. Different boxes will give you different sets of options as well that can be seen here.

Chris: Not everything you’d add to your site is configurable or has additional options. Anything that is currently enabled and does have such options is accessible from the Skin Content Menu where it can be changed easily.

You can see, you get a little snapshot there, this is the scope of stuff in my design that is configurable. The rest is pretty much…you’d need to reference the Skin Editor to make some changes, examine it or whatever. This is kind of a way to bring all your points of interactivity into a single location.

Skin Design: Change Appearances

Rick: So you’ve seen Skin Display and Skin Content and then you’ve got Skin Design. And Skin Design is distinguished from Display and Content in that it doesn’t change what you see or setup the visibility of something. What it does is changes the appearance of that thing.

Fonts and Colors

Let’s go over to Skin Design. This gives you places where you can setup the fonts that you want, font styles, font colors and that kind of stuff. And then this is where you can play with colors. And we’re going to do that soon.

Skin Editor: Template Customization

Once you step out of the beginner’s comfort level and you start talking about the most powerful part of Thesis 2.3’s customization that’s what you get in the Skin Editor. We’re not really going to talk about it today but we’ll cover it in another seminar coming up, The Beginner’s Guide to the Thesis 2.3 Skin Editor.

This is the Skin Editor which is essentially the template editor and this is the place where you can choose the templates that you want to customize and then having chosen what you want to customize you can decide what you want in the header and what order you want it in.

This is also where you choose where you want the menu in relationship to the header and that kind of stuff. That’s the sort of thing that happens inside of the Skin Editor.

CSS Editor – 3 Editors

We mentioned the CSS Editor and there are actually three CSS editors. There’s the Skin CSS. There’s the Editor CSS which controls what the text looks like in the WordPress editor essentially so that you get close to a “what you see is what you get” kind of experience.

And unless you are a Skin Developer you aren’t really doing anything with either of these two things. If you are customizing a skin you’ll do it in Custom CSS and we’ll talk about that in an upcoming seminar.

Thesis Data Manager: Backup Your Skin

The one tool that I want beginner’s to be familiar with is the Data Manager because the Data Manager is the place where you can backup stuff you’ve changed. And it’s so simple to back it up here.

We talk about backing up things as being complex and you backup in order to prevent a disaster and so you already have negative anxiety consequences associated with word backup.

Backup After Every Skin Editing Session

But it is so simple to backup the options that you’ve made in the skin right here. I recommend that at the end of every session that you have been editing your skin you come back over here and you create a backup.

Benefits to Backing Up the Skin

It takes 5 seconds and if you decide at the end of the day that you don’t like anything that you did and you want to go back to where you were yesterday, all you have to do is restore yesterday’s backup.

Backup Before You Make Changes If Necessary

When I’m working on something complicated and I think I know where I’m going to go but I’m not absolutely sure I come over here and make a backup for where I am at that very moment. That way after I’m done fiddling around if I don’t like my solution I can just go right back to where I was at the beginning. Again with literally the push of a button.

So that’s what the Data Manager is best at and we’ll demonstrate that when we are done making changes to the skin today.

Restore Part or All of the Skin

Chris: I would add that anytime you’re going to mess with the Skin Editor at all it’s a good practice just to go make a backup before you get started. Another kind of bonus of that system is that it makes a backup of your entire skin but your skin is comprised of many different pieces of data. Your custom CSS is a piece of data, you Skin CSS is a piece of data, Editor CSS, your templates.

The Data Manager allows you to restore just a subset of that data or all of it. So if you only screwed up your CSS you can just restore that and leave the rest alone. Not only is it super handy it’s also super flexible. Theoretically you can just fix the exact thing that went wrong.

0 Comments… add one
0 comments… add one

Leave a Comment