Build Your Own Business Website header image

Installing and Activating Skins

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 final thing we’ll be talking about in this Introduction to Thesis 2.3 for WordPress seminar is installing and activating Skins. We’ve been using the Thesis Classic Responsive Skin today in this seminar but we could use a different skin and the website would look entirely different.

What are Skins?

Thesis is a WordPress theme and Skins are essentially different ways of styling that theme. Skins are a collection of templates and styles.

If you are a long time WordPress user then you are familiar with child themes. Child themes are to themes as skins are to Thesis. Thesis doesn’t have child themes it has skins but they are functional equivalents even if they are different. They are conceptually equivalent.

Upload a New Skin

What we are going to do is come over here to the Skin Manager and we’re going to manage skins. We only have the Classic Responsive Skin installed here but if come over to Upload a New Skin and choose a file, we can take a look at say, the Flex Skin.

Activate or Preview

Here’s the Flex Skin. We can either activate it or just preview it in development mode. If we go to preview it in development mode that doesn’t actually change what everyone else sees but it does change what you see.

Preview in Development Mode

Here’s what the site looks like in development mode now. Although I’m not quite sure how that’s going to work with GoDaddy’s cache. Let’s flush the cache. Caching does cause us a fair number of issues.

But here it is. This is what it looks like. It’s all set up already. You’ve got these different latest posts and you’ve got the introduction, the big image and then obviously we’ve got this menu that’s a bit too large. There’s all kinds of different things you can do.

Skin Content and Skin Design Differences

You can see that we no longer have a header image for this. If you come over to Skin Content you can see you’ve got quite a few different choices. This Skin Content is different than it is in Classic Responsive. It’s got a whole different layout for the the Display Options but it has a lot of similarity.

If you come over to Skin Design. It’s also quite a bit different. You can choose a color scheme. If you pick this one, you’ve got button styles that look like this. I guess the content blocks don’t really change. What you are doing here is you’re picking a color, it’s got darks and lights.

You can also set up content width and sidebar width. Then you can also set up other things. You have a whole different set of choices in the Flex Skin than you did with the Classic Skin.

Upload and Activate a Second Skin

Let’s go back to Manage Skins and let’s upload a new skin. This time let’s choose Effectus. We can close that. Let’s activate this skin instead of looking at it in development mode. We’re not going to preview it. We’ll flush the cache.

This is what Effectus looks like. Let’s reload that. You can see there is a new set of changes. Again you’ve got the Logo, Skin Design, Skin Content. If we come over here to Skin Content, we can come over to the Nav menu. This has a choice of 2 menus. A menu to display to everybody and a menu to display when you are logged in.

If we come over here to Skin Design, it’s got interesting changes. A change in the way it does this. Different skin designers set this up differently. You’ll see that I’ve done it differently in my Thesis 2 skin, Agility.

Agility Skin Setup and Options

In fact, let’s install Agility right now so that you can see that. Come over here to Skin, Manage Skin. Upload a new skin and choose Agility. Here’s my skin, Agility Nude 3.2. If you look over here now the Logo has gone away but the header image is here.

If we come over to Skin Content you’ll see you’ve got a whole different set of display choices. Again, a different layout for the Skin Content.

If we come over to Skin Design, then we have the same kinds of things but because there are so many options it’s broken up into individual pieces. Just like before you can choose a text, let’s say you want to style headings. You can choose a font family, font size. In this case you can choose from skin colors. You’ve got other font style options that you can choose from.

You can see that every skin is different. In fact this skin has settings for social profiles and social sharing links. It allows you set the embed width which is especially useful if you are using HTML 5 video. It lets you set up some schema basics and then also gives you the ability to restore individual templates.

The Skin menu is a little bit different here than it is with other skins. If we flush the cache here you can see what it would look like.

That is what skins do. All we did was change skins and the whole site looks completely different. The trick is for you to choose a skin that looks the closest to what you want your website to look like and then use that skin.

0 Comments… add one
0 comments… add one

Leave a Comment