Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 5 – Make the Big Dimensional Changes

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.

We’re going to start customizing the Thesis 2 version of our site by making the big dimensional changes to this, our columns and the like. We’ll come back over to our Skin Editor, look at our canvass and the first thing we want to do is change our column widths.

Changing Column Widths

If you look at the Cheat Sheet for a second, columns are set in this columns package so that’s what we’re going to need to open up in order to make this the way we want it.

We’ll come over to CSS, come over to our columns package and we’ve got 2 Columns. You might be tempted to just make this change, make it 600 and 320. The problem with that is that, in columns, you need to include the width of your padding and margins or in this case, really just padding when you do that.

If you look at the Column 2 right padding, it’s got a half padding on the right and a half padding on the left for Column 2. As irritating this is, Column 1 doesn’t show any padding in it.

Why Column 1 Doesn’t Have Padding?

Now, the reason Column 1 doesn’t show any padding in it is because the padding for Column 1 shows up in the post box. So lets just save that and come over and take a look at our posts styles. You’ll see that our posts styles actually have under Additional CSS, single top padding, single left padding, no bottom padding and half right padding. I’m sorry, other way around, single, left, top, right.

In any case, what you have is the padding you would otherwise expect to see inside of the column is actually inside of this post box so if you want your post area to be 600 pixels wide, what you really need to do is specify 600 pixels plus the single and the half padding. We scroll down here and take a look at these variables of single and half, single is 25 pixels and half is 13 pixels so the total of those 2 is 38.

Add Padding to Column 1

Actually, our columns package needs to be, Column 1 needs to be 638 pixels so it accommodates both of those sets of padding and Column 2 needs to be the same thing. Well, we’re still going to do 358 so you’ve got 320 plus 38 pixels of padding and 600 plus 38 pixels of padding. That adds up to a total of 996 pixels which is more than we currently have in the canvass.

See how our sidebar comes all the way down here? Because we’re not wide enough to accommodate our sidebar so we have to widen the width of this container. If we come over and look at the container for a moment, the container width is 900 pixels and what we just said is it needs to be 996 so you need to set this 996.

In the Full Width Framework version of these, you have to come down to this page wrapper and you also have to set it to 996 and that is wide enough to accommodate both the columns and their padding. Reload that now and there we go.

Customize Font Settings

Now, everything fits in the space. We just didn’t fit before because the sum of those 2 columns was greater than the space that was available to them so this column couldn’t site beside it, it had to drop down below. So we’ve got our column widths, now we’re going to take a look at our typical font family.

In Thesis Design Options, if we come down to our Font Colors and More, our font family is Arial and our typical font size is 14 pixels. We’ll come over here to our body which is where Thesis Classic sets the general font information, come over to our body, look at our font settings, instead of Georgia we’ll select Arial. We are not going to actually select the font size here.

Actually, I’m going to set it here, I’m going to say 14 pixels here. That gives us a starting place and now you can see what it looks like with Arial. Then we have some general font sizes I want to set up. Those first font sizes we should set up start with the Site Title.

Let’s come back over to CSS and we have our Site Title, let’s click on that one and go to options, its font settings show the font sizes at 42 pixels. If we come over and look at what we did here for the heading, it’s Arial Black and 40 pixels then we’ve got a color of this color green.

The tagline was supposed to inherit from this, it’s 16 pixels and it’s this color blue or actually, this is the color green, this is the color blue. So these are the things that we’re going to transfer over.

We’re going to select our font, it’s going to be Arial Black, not 42 but 40 and Arial Black doesn’t want to have a bold font weight so we’ll take that off. The text color here doesn’t matter because the title is a link so whatever you put in here for the text color isn’t going to affect the color of the site title because it’s link so what we’re going to have to do is come up with a links package for that.

The other thing is that the typography is not 937 anymore but it was 996 minus 50 so 946 is the width of the typography. Pretty close actually, it wouldn’t hurt if you left it that way.

Create a Links Package

We want to change the color of the site title and the way we’ll change it is to create a new links package. We’re going to create a new links package and we’ll call it Site Title Link then site_title_link then we just know that Thesis calls this #site_title a so that’s our CSS Selector.

We’ll go over to our options and this is where we set our text color. The text color for the site title was this blue so we’ll come back over and paste that blue color there, text decoration was none and hit save.

We just need to make sure that we add that Site Title Link to our references here so put that reference in, $site_title_link. I’m sorry I didn’t say this before but I should have said this earlier, this class does presuppose that you’ve already watched my beginning class on the introduction to the Thesis Skin Editor.

There are lots of concepts I explained there that I haven’t been explaining here but it’s the same kind of thing. I’m presupposing you are already familiar with what’s going on here. If you aren’t, you should go watch the videos on the Beginners Guide to the Thesis Skin Editor first. Sorry it took me an hour to tell you that.

Okay, so that was our links package. If we take a look at our link now, you see it’s changed its color. Now, it says blue color and we want this to become that green color and it needs to be the Arial Black as well.

Come back over to our Site Tagline and this is not a link so it doesn’t need another style. What we’re going to do is take the text color that we want which is this one here. Take the font setting that we want which is Arial Black, we’re okay with 16. I think we’re okay with everything else, we just hit save, come back over and take a look at it. Now we got that color the way we want it.

Delete Extraneous Text Box

I just have a couple of other little things that I want to do here in this section and that is, if we go back over to our HTML editor and look in our Sidebar Column, we have this little text box. I’m going to delete this text box. I’m never to use this text box so I’m just going to drag it there into this trash can, hit save template and now, every version should be free of that little text box.

0 Comments… add one
0 comments… add one

Leave a Comment