Build Your Own Business Website header image

Thesis 2.1 Launch Party – Part 3 – Customizing the Thesis Classic Responsive Skin for 2.1

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.

So we’ve covered the Thesis 2.1 Interface and now what I’m going to do is to introduce you to the concepts of customizing the Thesis Classic Responsive skin for 2.1. We’re going to add a header image, we’re going to change our colors, we’re going to change the font style, we’re going to set up a sidebar and we’re going to add some bottom footer widgets.

Customization Options Found in the Skin Menu

We’re going to do all of that here today and all of that starts in the Thesis 2.1 Design section. Let’s go over to Skin and the Design. And the Design section of the Classic responsive skin is where you can essentially change all of your design options. Actually, most of Thesis 2.1 customization is really divided into sort of 3 places.

Content Options

The first one is actually the Content options. The Content options allow you to control what shows up on a page regardless of what its style is. You’re not adjusting any style under the Content options, what you’re doing is deciding what’s going to show up.

For example, if you click on the Nav Menu here, you have the choice of which menu you want to show up. Now I only you have one menu created on the site so the only one that shows up is the Main Menu but if I had multiple menus here, I could decide which menu is going to show up there.

We’re going to look at the Sidebar, Text Box and the Attribution here a little bit later but this is where you’ll set up content. The same thing is true with these items here, you can adjust content by clicking on those things and deciding what you want to show and what you don’t want to show.

Design Options

The second aspect of it is the Design options and the Design options are going to be different from skin to skin. In this case, what you have is a color scheme that you can set and then you have a whole bunch of fonts and elements that you can style using this. So this doesn’t control what actually shows, it just controls what it looks like when it shows.

If you have turned off for example the site title in the content section, even though you style the site title here, it’s still not going to show. In this section, you’re going to say what the site title should look like if it’s showing and over in the content section, this is where you would say, show the site title. So that’s the difference between content and design.

Header Image and Custom CSS

Your next section is Header Image and this is where you can set an image to go across your header.

And then finally, you have the Custom CSS and we’re not really going to talk about that today but this is a place where you can add your own CSS code snippets. More advanced users will just actually write CSS here. But beginners, you may ask a question on the forum and they say, well here, add this to your CSS and this is the place you would do that.

Start By Setting Primary Font Size and Family

Anyway, those are the main sections for customizing Thesis Classic Responsive and everything that I want to do starts by setting the primary font size and the primary font family.

Now, the reason this is the case is that Thesis Classic and all of the BYOBWebsite skins employ Chris Pearson’s golden ratio typography calculation. And as you may know, Chris is famous for his calculator that determines what size the font should be and what the line height should be based on the width of the text area and the font family.

All that is calculated from two elements, well really from three, but it starts off with these two and that is font size and font family. This is for the primary font so this is going to prevail unless something else changes it.

I’m going to choose Arial as my font family but I am going to stick with 16 as the font size. You can see this is what it looks like right now, this is the 16 pixel text size in Georgia and I’m going to save this and save the design options. If we refresh our page, you can see now it’s all moved over to Arial. We’re going to change some of these things to other fonts later on the session but we’ll just set the primary font for now.

Customize Width of the Columns

One of the main things I want to do here is specify the width of these columns because right now, these columns aren’t as wide as they want them to be. So in order for me to accurately specify the width of the columns, I have to know what the padding width is going to be and that padding width is something that is calculated using the golden ratio typography calculator. So I have to start there, start with the font family and the text size and that will tell me what my padding is.

Use My Padding Cheat Sheet

If you’re familiar with how to use Firebug or Web Developer you can look it up and you can tell what these are but I’ve actually created a cheat sheet for you. If you come over to my resources page, here on the righthand side of my menu, click on the resources page, come down to Thesis 2.1, you’ll see there’s this Download a Thesis Classic Responsive Padding Cheat Sheet.

What I’ve done here is I’ve taken the fonts in Thesis that are considered to be web safe, Thesis has some fonts that are not web safe, and I’ve tested Thesis to find out if you use a specific font family at the various font sizes, how big the padding is going to be.

The way this column things works is that each column has padding on the left and the right hand side. I’m Arial and 16 points, right? That’s what I decided I was going to use. For Arial and 16 pixels each side has 27 pixels of padding which means that I’ve got 17 pixels of padding here and then I’ve got the width of my column and then 27 pixels of padding there.

So if I want this part of the column to be 640 pixels wide, then I have to take 640 plus 27 plus 27 in order to figure out what my overall column width is. The same thing is true with a sidebar. Since I’m using 16 pixels, I’ve got 17 pixels of padding here and 27 pixels of padding here and so if I want this to be 300 pixels wide, then I need to add 300 plus 27 plus 27.

Column Layout Configurations

That’s the long way of getting around to explain that what I want to do is change my dimensions. So I have a choice of 1 Column or 2 Column layouts and I can put the column on the left or the column on the right and it comes default with these settings but this isn’t really what I want.

What I want is 600 pixel width column and since I know my total padding width is 54 pixels, I really need to say 654 pixels. The same thing is true with the sidebar. I don’t want my sidebar to be 280, I want it to be 300 plus 54 or 354. Let’s save my design options and now if I refresh it, these are bigger. It takes up more space and I can put the content in here that I want to put in at the size that I want it to be.

Because I have 600 pixels wide Thesis has changed certain aspects of the font style to match the golden ratio typography. So this clearly is very easy to read and the whole point of this is to make your website very easy to read. So that’s what we’ve accomplished by setting those settings plus I’ve decided what my configuration is and how big I want things.

I could decide I want the content on the right and if I decide that and reverse it, it just does that. Now, of course, I don’t want that, I want the content on the left so click out the layout and dimensions, switch back to left, save the design options, refresh it, now I have it.

4 Comments… add one
4 comments… add one
  • Taewon Lee July 17, 2013, 12:22 am

    When you mentioned about layout cheat sheet, 1px was missing for border.
    While using 600px for conent column, 300px for sidebar, (Arial 16px font)
    you recommended 27+600+27 / 27+300+27 = 654 / 354
    but it needs 1px correction for the border.

    Accurate size would be 27+600+27+1 / 27+300+27 = 655 / 354

    Anyway, I always thank you, Rick.

    • Rick Anderson July 17, 2013, 3:26 pm

      Taewon, I believe that Classic Responsive uses the border-box box sizing property which would include the border in the calculation. So 654 px wide area would yield a 599px wide content space. Good catch. It worked for me because I removed the borders but would indeed be one pixel off if you retain the border.

  • sybille August 17, 2013, 2:13 am

    Hi Rick
    thank you for all the hard work you are putting into bringing us the tutorials, videos and other materials.
    I am using your footer box with thesis 2.1 and I am wondering how I can get the links in the footer to be the same colour as the links in the rest of the site?

  • sybille August 17, 2013, 2:43 am

    don’t worry, I worked it out

Leave a Comment