Build Your Own Business Website header image

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.

Setup the Thesis Classic Responsive Skin – Lesson 6 – Part 9

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we’re going to talk about is setting up the Thesis Classic skin. Here we are in the skin and we’re going to start off by looking at the Classic skin.

The Basic Layout and Setup

You can see that it’s a 2 column skin, it has a text box at the top of the sidebar that’s waiting for you to put some text in it. If you’re not logged in you won’t see this text, you only see this text because you’re logged in.

Then there is also a sidebar widget area that is the same thing, it’s got a little message here for you to add a widget. You won’t see that if you’re not there. You have a menu area, you’ve got your header area, you’ve got your content area and then it’s got the WP admin link and the attribution link down here. And that essentially is the basic breakdown of the skin.

This is a page. If we come over and look at the blog page, you’ll see it is setup to show the featured image and to show the full content. I want to show you an archive page but I don’t have any archive links here so let’s quickly put archive links into that widget area. We’ll put categories and we’ll put archives in then refresh this.

Now we can look at our category archive page and by default Thesis is setup to show the title, the author, the date, an edit link and the number of comments and that’s the case for all archives whether its date or its category. This is essentially the basic setup of Thesis Classic and now we’ll go about setting it up.

Skin Design

We’re going to start off by looking in skin design. Skin design has this Thesis ColorScale. These are the default colors, you’ve got red links and gray menu backgrounds.

Change the Color Scheme

But you can pick from the ColorScale and choose any color scheme you want. Save the design options, refresh it and now you’ve got a different color scheme. Picking a color scheme from the ColorScale changes all of those parts. Let’s say I want something bluer and there you go.

Now you can set it this way using the ColorScale or you can set your own colors. You can click on any of these options, for example, let’s choose our secondary text and let’s say we want those to be really dark purple. I’ll just choose the color in here that looks like what I’m after and now when I refresh this, you can see the secondary text is that purple color instead of the light gray as they were before.

You can also use this to pick complementary fonts and so this picks complimentary colors for you. I’m going to copy this color first and then let’s pick a complimentary color say that color there. Put that color back in there and then pick my blue again.

Now I’ve got a complementary color to this blue color which is pretty cool and you can also modify these to your heart’s content. You can change these things anyway you want. The color scheme generator is a pretty cool feature and it does pick up a nicely styled colors.

Changing Layouts, Fonts and Sizes

Besides the ColorScale you also have these various things you can change in Layouts, Fonts, Sizes and Colors. For example, let’s change layout dimensions. You can put the content on the left or the right, you can choose between 1 column or 2 columns.

If you want you can also set the width of your content column and your sidebar column. Just make the change and save it.

You can also change font sizes and font styles so say you want your primary font size to be 17 instead and let’s pick Arial. Now the site looks quite a bit different and that changes things all the way across the site.

Styling the Site Title and Tagline

You can then choose various design elements to change. For example, we can take our site title and instead of Arial let’s make that one Arial Narrow and we could change the text color. We could make it sort of a blue-gray color instead of the black color. So we’ve got these things that we can change. As you can see there’s a lot of customization that you can do with this.

Same thing is true for the site tagline as well. Let’s say we want the tagline to go up to 18 pixels and let’s just choose something very different for the font. Let’s choose Calibri instead. So we’ve got quite a bit of control over these elements.

We can also change the site title font size, let’s take it down to 36 to make it fit all the way across the screen. You have a lot of control over these elements in the skin design options.

You can also change the font size and style of the nav bar and you can also change widget headings, these are all kinds of things you can do with that. So those are the kinds of stylistic changes that you can make to Classic Responsive.

Skin Content

You can also come over to the skin content and make changes. First, this is where you set the menu that you’re going to use.

Set the Menu

Right now I haven’t selected a menu so we’ll just use the first one but any menu you’ve created in WordPress will show up here. So say okay and we’ll show the main menu which is what it’s showing now because that was the first menu. It’s showing that but I can always just go change that menu to the footer menu. So you can set the menu there.

Add Sidebar Text

You can add your own text to the sidebar text box, I’ll add “Learn to Build a Website”. This is very much like a text widget, you can put any text here you want or put any HTML you want, not just text. Save the options and now this text box is going to change to show what you’ve added.

Change Attribution

Then back in skin content, you can also change the attribution so now you could say, “Copyright 2014”, save those options, refresh the page and now the attribution has changed. It used to say “Powered by Thesis”, now it’s got my little copyright in there.

Using Display Options

In skin content there’s also the section called display options and you can choose to display or not display things. For example, you could say that you don’t want to display the tagline here, save the display options and uncheck that tagline and now the tagline is not going to show up.

You can also do something similar to that with post and page output. Let’s show everything for a moment and save it. Let’s refresh our page and now on pages, my image shows up. If we come over and look at articles, now it shows up on the home page . It also shows the category that it’s in, the image shows up here. Although an author box does not show up.

Now that I’m showing the featured image this post image and the featured image are the same. I could go edit the post and remove the post image now. No, I’m showing both featured image and Thesis’. Okay, we’ll go back over there and just turn off the Thesis post image. I can come back over here and view the post and now we’re back to just the one image showing up, the featured image.

I could take out the author description, I can take out tags. I’m going to take those things out, say okay to that, save it and reload it. Now it’s got the date and it’s got an edit link and it’s got the category.

If we come over and look at a regular page, it doesn’t have the category but it’s got the date and the edit. If you want to see how to remove that stuff, watch the seminar Thesis 2.1 for the DIY website builder. It’s exactly the same in Thesis 2.1 and in Thesis 2.2.

We’ll take out date also. Say okay to that. In terms of comments, you can say I want comments on posts and comments on pages, I want comment data and comment avatar. Right now the comments on pages are turned off but if you check that and say okay then you’re going to see the comments down here at the bottom now. Of course, we don’t want comments on our pages so we’ll just uncheck it.

Using the Sidebar

In the sidebar, you can choose to turn off that sidebar text box so now only the widget shows up. You could also choose to turn off the sidebar widgets which is I think a little bit odd, it’s not really going to do you any good to turn off those widgets because then you just got a blank empty sidebar there.

In fact, you can choose to turn off the sidebar altogether but if we’re going to do that you may as well just make this silly thing 1 column. We’ll come back over here to the sidebar, we’re going to leave the sidebar text box and sidebar widgets all on.

Miscellaneous Options

Under miscellaneous, you could turn off that attribution which had the copyright, you could also turn off that WP admin link which is there at the bottom. You could turn off the Iconic Classic Responsive skin curly braces. If we turn that off, that curly braces was the thing that showed up around comments here aren’t there anymore but the copyright is. The WP admin link is now gone and yes, you can revert back anytime you want. All you have to do is go back in and change it.

Skin Header Image

Besides display settings and content settings, Thesis also has this header image and it will tell you how big the header ought to be and so if we select the header image, we’re best off looking for one that is 920 pixels wide.

What Happens If The Image is Too Small

I might not have a header image the right size here but I’ll show you what happens when you put one in that’s too small so this is 300×86, set the header image. So we’ve got the header image now and if we reload this, the too small header image just shows up there just fine.

It took out everything else. It took out site title and tagline, those don’t show up but a header image that I created sits there just fine.

What Happens If The Image is Too Big

Now, if we select one that’s too big like this one 114×1012, come in here and reload it. What Thesis did was it scaled it down so that it fit. If we now scale our site down, you can see that this header image just continues to shrink. This can be a good reason for actually using a smaller header image because the smaller header image doesn’t shrink.

Refresh that and then move that down, that header image doesn’t shrink until it gets smaller so that’s actually a pretty good header image for the Thesis Classic. So that’s what happens when you get one that’s too small.

When it’s too big it’s going to get shrunk down but really you’re better off always just picking an image that’s exactly the right size. It’s actually pretty clear, the header image is clickable so it’ll always take you back to your home page.

Image Sizing

If you’ve heard any of my presentations in the past you’ll know that images in WordPress are often dependent upon themes and so you want to set certain image sizes for different themes and Thesis is no exception. Because you have the ability to change the width of your content column here, you want to set your image sizes so that they look appropriate for this so I set this to 640 pixels wide.

I’m going to want to change my media settings. The thumbnail size is setup here as 200 that’s great. My large size should be set at 640 and then the medium size should be set at 320 which is half of that 640. And when you do this you’ll have a uniform size set of images that will fit nicely throughout the skin.

Let’s come back over here and look at one of these pages that’s got the image, this image size is now 640 pixels wide and it fits very nicely across the width of the skin.

So those are the image sizes that I recommend. Once you decide how wide you want your content, make the large image size the width of that, make the medium image size half the width of that and then make the thumbnail image size 200×200 and you’ll have a good setting for Thesis.

Save $200 on Membership Now!

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

Leave a Comment