Build Your Own Business Website header image

Part 17 – Configure the Thesis Classic Responsive 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’ve decided that the Thesis Classic Skin is the best match for the hypnotherapy site it’s time to set it up. Let’s go to the dashboard and come over here to Thesis.

Configure Skin Content

We’ll begin our configuration in Thesis Skin Content.

Display Options

We’re not displaying either the site title or tagline. Although, because we’re using the Thesis header image, we can leave these things the way they are because they will be hidden by that.

Come over to post and page output. We don’t want an author, date and we don’t like WP featured image. We don’t want number of comments or really any of this stuff showing up there so we’ll uncheck all of that.

Come over to our sidebar. We’re going to keep it but we’re going to get rid of that sidebar text box because we’re not using that for anything.

Next we’ll go to miscellaneous and we’re going to get rid of the wp-admin link which is down in the footer. And neither of these things really matter because we’re not using those templates so we can leave them alone.

We’re going to keep the Skin attribution because we’ll customize that the way we want it. And that takes care of our Display Options.

Content Options

Come over here to our Content Options and we’ll begin with the nav menu. We only have one nav menu so we’ll pick our main sidebar menu.

Then there’s the attribution. When we do our footer we’ll come back and take care of this.

Configure the Header Image

Next let’s work on the header image. We’ve already uploaded the header image to the media library so I’ll click on select header image and that header image is right here. We’ll set the header image.

Now that that’s done we can reload this. You can see we’ve got our header image set up here. Oh actually, I guess we do need to remove the site title and tagline, my mistake. Come back over to the Skin Content and we’ll turn those off. And now we have our header image.

Configure Skin Design

Let’s go to Thesis Skin Design and come out to layout and dimensions.

Layout and Dimensions

We’re going to use only one column and we’re going to set that column width to 1032 pixels. Now save our Design Options.

It’s irritating to me how sometimes these Design Options require a bit of extra effort to make them show up on Bluehost. What has to happen is we need to reload our CSS.

That’s what I just did. I came over here to inspect and CSS. Then I right clicked on that and I said open link in a new tab which opens up the CSS file in a new tab which then lets me force a reload. Now that I’ve done that it should solve the problem. Our sidebar is now down below everything here and we’re at one column.

Color Scheme

Obviously this color scheme in the header image and this color scheme from the old HTML site aren’t compatible. We’re going to dump this for a color scheme that matches our header image.

I’ll pick a color out of this and I’m going to use that as the basis of my color scheme. What I’m going to do is pick this color to be the dominant color. Then I’m going to pick a lighter, a very light color, a darker and a very dark color based off of this one primary color.

There’s a tool that I like to use for that which is CSS color converter. I can paste that color in here and it gives me a shade lighter and a shade darker. I find this tool to be very very useful. I use it all the time.

So we’ve got a this color, we’ve got a shade lighter and shade darker. I’m going to use notepad to keep track of these. For each of these colors I’m adding the names and then their corresponding hexadecimal number.

I’m only going to go one shade lighter than the main and when I click on this it gives me that. There’s my lighter. Now I’m going to go really light and so this is going to be my lightest color. You can come up with your color scheme that you want obviously, I’m just doing this because that’s the way I do it.

And then actually I should come back over here and grab my main color again. I’m going to go a shade darker which is this color. Then I’m going to go a couple more shades darker which is that color.

Then I want a contrast color from my links. So I’ll put my main color back in and then I’m going to come down here and look at these complementary colors. I think this would make a nice link color so I’m going to choose this split complementary color here.

We now have all the colors recorded so come back over to Color Scheme. I’ll start off with this link color that I just copied. Paste that and then my interior backgrounds is this one. I don’t like straight black, really even straight white except for background straight light is fine. Since I don’t like straight black I’m going to make it more of a charcoal gray for the text color. Now we save those design options.

Font & Size

Let’s go to Font and Size options. For our basic font style she is using Arial so we’re going to switch to that. And for the font size the 16 pixel font is a good choice because of the full width of the text.

Let’s come over here and look up Golden Ratio Typography. I do this all the time. Here is the Golden Ratio Typography calculator and I’m going to say my content width is about a thousand. I’m going to set my type and see what happens. So, best at 1000 pixels wide…we need to change to Arial first. Okay, now this is suggesting a font size of 20. That is easily readable and so that’s what we’re going to choose.

We’re going to use a font size of 20 instead of 16 because I think 16 will be too difficult to read at a thousand pixels wide. Let’s go ahead and save those design options and take a look at the site. Yeah, that’s pretty easy to read.

Page Title and Headlines Color

We still need to set the page title color so come down here to headlines. At the moment we’re not going to change the font size but I do want to use that darkest purple color for my headlines. Let’s go back to that notepad doc and grab my darkest color. Okay.

It’s difficult to see here that this is purple instead of the gray so maybe we want to lighten that up a little bit. Go back to our main color, go a shade darker and shade darker and call it that. So our darkest is now this color. Come back over and look at our headlines. We’ll make them that color too. There we go.

That’s just about all we’re going to set up at the moment in terms of page setup. We pretty much have the basic configuration of the Skin set up. Everything else will do as we style it.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment