Build Your Own Business Website header image

Introduction to Customizing the Thesis Classic Responsive Skin for 2.3

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.

Now that we’ve had a review of the Thesis 2.3 interface let’s move on to the kinds of customization that we are going to do here on this website. Right now it’s plain jane, unedited and unaltered Thesis Classic Responsive.

What We’ll Be Working On Customizing

What we are going to do is to change the site’s colors. We’re going to change the width of the page. We’re going to add a header image. We’re going to turn off some elements of the skin. We’re going to add a widgetized footer. We’re going to style some widgets.

Once we’ve done that we’ll add some stuff to a text box so you can see what you can do with a text box. Then we’ll look at installing and activating other skins.

I’m demonstrating using Thesis Classic Skin because it is the simplest Thesis 2.3 skin but there are lots of other skins available to you and several available to you through DIY themes that have different sets of options. This seems to me the default starting place for everybody.

First: Set Widths of Content Columns

We’re going to proceed with the customization to the website in an order. The reason has to do with typography. I used to say that you start with how big you want your font to be and then let that decide everything else.

I have since changed my mind about that and now I say decide how big you want your content columns to be and then set your fonts up based on that. Then let all the rest of it handle itself. We’ll talk about why it handles itself and how soon.

Skin Design: Layout and Dimensions

That process starts off in Skin Design by looking at Layout and Dimensions. This is where I recommend you start at the very beginning. You have a choice of a 1 column or a 2 column layout.

If you choose a 1 column layout, you just pick the width of the content and you are done. If you want a 2 column layout then you can choose whether the content is going to be on the right or the left. I always like the content on the left so we are just going to leave it like this.

Set Column Width of Content and Sidebar

Then you can set the width of both your content and your sidebar. I like to set widths based on the size of videos because I think video centrically because of the nature of my site, byobwebsite. So, half the size of an HT video is 640 pixels, a quarter of the size of an HT video is 320 pixels. That’s what I want my content and sidebar spaces to be.

How Padding and Margin Work

As it turns out Thesis adds padding and margin inside these columns.

Chris: Skin specific. This has been a kind of an issue forever. If you are doing this intuitively you’d think it’s 617 pixels is how wide my resulting column is and that’s not the case in Classic Responsive.

So the padding here is not a Thesis thing it’s a Classic Responsive decision that’s probably a bad one. I think it’s in Pearsonified that the number you have there is exactly the width of the actionable area of your column. It’s just one of those things. What question do I want the user to ask me “Why it’s wider than they specified or why it’s smaller than they specified”.

Rick: I think generally people aren’t really worried about the overall desktop width. Generally what they are concerned about is the width of their content spaces. If they think they care about the overall desktop width then they are probably mistaken.

In the case of Classic Responsive it adds 52 pixels to the width of the column and so I’m going to make the content column 692 pixels wide. And, again, it adds another 52 pixels to the other column so this one is going to be not 320 but 372.

Chris: Real quick, the skin actually changes how much padding gets added based on how big the primary font size is.

Rick: Yes. It does.

Chris: And how wide the resulting column is – there’s a lot of tweaking variables and a lot of things getting moved around there.

Rick: And so there is a little bit of play back and forth and if you don’t end up with 640 pixels you can always come back and change it a little bit.

Review Content and Sidebar Width Changes

Now we’re going to save Skin Design Options. And if you come over here to the site…I just want to point out that this is the managed hosting, the more expensive hosting at GoDaddy that is supposed to be really fast but it obviously isn’t. Okay, here it is now.

Caching Issues

If you reload the site you’ll notice that nothing changed because you still have to flush the cache. Every time you make a save like this and you want to see executed. Doesn’t look like it happened.

Chris: Always hold shift and click refresh if you are doing any work on your site. That will force the browser, in addition to the server caching the browser caches stuff as well. In Chrome within the last few months has become even more aggressive about caching browser related entities.

Disabling Chrome Caching

Rick: Right, two weeks ago I had a seminar on dealing with caching like this. As long as you’ve gone over to the network section in Chrome and clicked “disable cache”, then when this is open is stays disable. It doesn’t disable the GoDaddy cache it just disables the Chrome cache. As soon as you close the inspect element the Chrome cache kicks back in again.

Now we’ve got our wider space here. We’ve got the 640 pixel and 320 pixel columns done.

Second: Set Font Sizes

Once I do that I like to come over here and search for Golden Ratio Typography. Since I never remember this stuff I just always go to it and say my content width is 640 pixels. Then Chris’ calculator tells me what my font size ought to be and then I make sure that the right font is picked because that will change the font size. Here my font size should be 16 for Georgia.

Then I come back over here to the primary font size and it’s already set to 16 and Georgia so I’m good to go. I now have a layout and a font size that will allow headings and padding and margin and everything else to be calculated properly using the golden ratio typography API inside of Thesis.

This is may not be where you think you ought to start but this is where I recommend people start. If you don’t start here then font sizes and margins and stuff like that start changing potentially and when it changes you may have made other changes that were dependent upon the widths and then don’t look right.

Everything starts with font size. If you’ve chosen 16 pixel Georgia font in a 640 pixel width content area then the sidebar text has been sized. This meta text has been sized. Your headings have been sized. All of these things have been sized according to Golden Ratio Typography.

Why This Order of Customization Is Important

Chris: Literally every measurement in that design is based upon a 1 unit value. And one design unit in this case is a result of the primary font size and the width of the primary content column. Thesis uses that information, deduces what the primary unit of white space and then that primary unit of white space is halved or doubled or quartered or whatever it is to yield the different spacing and everything in the layout.

So the primary font size and the width of the primary content column are the most critical geometrical values for the whole thing.

Rick is absolutely right to say start there and work out from there because that controls everything in your design. If you choose those and don’t manipulate other values you will have a completely cohesive design as far as spacing goes on any of our house DIY Themes skins.

Rick: That all happened in Skin Design.

0 Comments… add one
0 comments… add one

Leave a Comment