Build Your Own Business Website header image

Part 16 – Choose the Right Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Now that we have the Front Page and Typical Page layout in mind, it’s time for us to choose the right Skin. It’s in my opinion that there’s never really a right answer or wrong answer especially in something as custom as this.

Use Main Characteristics of the Site to Decide

Having said that it does makes sense to me to always start with a Skin that is as close as possible to the design that you’re looking for already. So that means that you want to make a list of the characteristics of your design that will influence the decision that you make about your Skin.

Really, in this case there are really just two characteristics. The first characteristic is the page layout and the second characteristic is the design elements.

Page Layout

So in terms of our page layout, what would be perfect would be to find something with a header on the front pages featuring three columns and then below that everything else being in one column with the content area and footer area. That would be the ideal situation.

Also ideally, we would want one that supports the full width Thesis header image and that allows for or has some styling for the vertical sidebar menu that we have.

Design Elements

In terms of other types of design elements, really we don’t have a lot of highly detailed design elements going on in here. We don’t have special icons and we don’t have special colors and special areas. We have a fairly consistent color scheme and otherwise there are a lot of things in this page that are particularly unique. So that means we’re probably looking for something that is relatively vanilla.

Tool to Create Responsive Columns in Thesis Skins

You probably know that there are very few Thesis Skins that can accommodate a three-column layout like this. Today I’m going to be presenting a tool that will be available on the website here very soon which solves that problem.

It essentially gives you the ability to create responsive columns in any Thesis skin. You can drop those columns in where you want them in the Skin editor, configure them the way you want and then use them even if the Skin doesn’t have those things.

Review of DIY Theme and BYOB Thesis Skins

So the first thing we’re going to do is go over the DIY themes and take a look at their Skins. There are lots of Skins out there. This is not an exhaustive review of the possible Skins that you can choose. We’re only going to look at the DIY theme skins and the BYOB website Skins.

The purpose for this really is to give you a frame of reference. When you’re looking at Skins you might in fact go look at other people’s Skins and so you’re going to ask yourself the same kind of questions we’re asking right now.

Thesis Classic

We’ll start off by looking at the Skin demo for Thesis Classic Skin. It’s not obvious from this demo but the Thesis Classic Skin does support the full width header image. It does not support three columns but we’re going to be able to overcome that by using the box that I’m going to present today. It does support a single-column layout which we can use on the front page.

It doesn’t have a lot of different styles. Its styles are very generic and so there’s not a lot of styling that you have to overcome when you’re considering styles. So this is probably something that you continue to consider.

Effectus

Next we’ll take a look at Effectus. Let’s go to the homepage and you can see Effectus has this kind of setup. I think it does in fact, support the Thesis header image. It’s got a very highly stylized menu that’s not really like anything the hypnotherapy site’s.

It’s got a great big opt-in box that is something we wouldn’t use. It has a header title styles that again not the kind of things that were using. It does, however, support a three-column layout and so that might be a reasonable way to pursue it.

And it also has this YouTube and Vimeo video thing for responsive video. So since we’ve got a video there theoretically we could lose that responsive video plugin that we’re using and use the one that’s built into this.

So there are a couple of things that are similar to what we want to do and there are a bunch of very specific kind of styles that don’t reflect what we want. That leads me to think that this is not a good choice of a starting place.

Flex

Flex is also a new skin. Flex does not support the full width header image. It’s got a little logo image that you can put here and then it has its menu right beside that which is a very common style but it’s not anything like what we’re doing. It is a great big full width Skin.

Let’s take a look at front page. It has a big full width banner image with a call to action and then it’s got little latest post things set up. It’s nothing at all like what we’re looking at and so I don’t think Flex is a good starting point at all. It’s a beautiful Skin but is not a good place to start for the hypnotherapy site.

Promo

Promo also has the little logo image up here so it’s not the full width Theses header image. It’s a logo image so it’s a smaller one. Then the menu across the top again with fairly specific styling. It’s got this little Promo bar which is something we’re not using at all.

It’s got certain types of icons and little round buttons for submit buttons and that sort of thing. It automatically has avatars and other things like that which we aren’t using. Again, it’s a highly stylized Skin and because of that I don’t think this is a good choice for our project.

Personified

Personified is probably the most highly stylized Skin. It’s got little special icons by the headings. It’s got its own cute little widget titles. It’s got its own button style. Again it’s got the logo image with very highly stylized menu and it’s got a great big featured image here. So, much different looking than what we are trying to accomplish. It wouldn’t be a good choice.

Social Triggers

And Social Triggers also has a very stylized menu. It does not support three columns. Let’s go to its front page. It’s also got this little feature box here that is reasonably popular but not something that we would be using at all. It can’t be configured the way that we were thinking about using it. Again it’s not structured to work the way we want to work.

Classic Responsive Closest Match to Our Site

So of all the DIY Theme Skins Classic Responsive is the most appropriate for us. Primarily because we don’t have to write a bunch of custom code to get rid of the very specific stylings that are in the other Skins.

BYOB Website Agility Skin

Then we also have BYOB website skins. The first one is the Agility Skin and this skin is a very sophisticated Skin. Agility does support a three-column layout and does support the full width Thesis header image. It does have a fairly specific menu style although the menu style is not going to really constrain us in this case.

The front page has this great big image with a call to action and then it’s got these attention boxes and its featured content boxes as well as all the sharing buttons. It has a double footer.

These are styles that we would have to undo if we were going to use Agility for this and while you can certainly make Agility look like this other site, I wouldn’t recommend using Agility.

BYOB Website Carta Skin

The other choice is the Carta skin. Let’s take a look at that. So Carta does support a full width image across the top. It, in fact, has the ability for you to change images based on the width of the browser window. So you can change out your header image depending upon what kind of device is looking at it.

It also has a fairly highly stylized menu in the position that the hypnotherapy site is not going to use. It actually isn’t developed with these. This is something that is added onto it so it does have a fairly simple layout but it’s got very distinctive layout.

It’s got a background color and then a page width color and a separation between the footer and the content area. These are all things that we’re not doing so I don’t think this is a good starting place either. I wouldn’t choose this Skin as a place to start.

Really, the real answer in my mind is that the Thesis Classic Skin is the skin to start off with here. It’s the skin we already have installed on the site so we don’t need to make a change.

We’re going to be using two tools to construct its layout and then to style it so that it looks like what we want to look like. We’re going to use the BYOB Responsive Column System and the BYOB Thesis Style Manager. Both of those tools will allow us to lay this site out and to style it the way we want.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment