Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 10 – Adjust the Content Styles

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.

In the second half of this Thesis 2 upgrade series, we’re going to continue making changes to the styling and begin working with the templates. First we’re going to start with the content styles. Let’s come over to our Thesis Skin Editor, we’re going to start by taking a look at the formatting of this text.

Post Formatting Package

It’s not too far off but we do want to change some things in the post box and we want to change our headline styles and that sort of thing. What we’ll do is come over to our CSS and most of that is covered by this post formatting package.

Let’s come over here and select our options, I think the thing we want to do here is switch this to 600, that’s the width of the text area for this typography. I think we can leave the font itself alone but in terms of headlines, we’re going to want to choose a font. If we look at our Design Options spreadsheet here, headlines, the font family is going to be Arial, the size is 26 pixels then we have a color of 9B0000.

Set Up Font Colors

You’re going to notice that one of the things we don’t have here is the ability to adjust the font color here. I’m going to make this headlines 22 and so what we’re going to do then is create our own style for the headline. We’ve set these two fonts here and now what we want to do is set up font color for our fonts.

In order for us to do that, we have to understand what these things are called so this is an h1 class headline. There’s some instances of it where it would be h2 class headlines so we’re going to have to respond to both h1 and h2 headline. If we come down to a subheading here, this is going to post content h2, post content h3 and post content h4 in order for us to style the color for these things.

If we come back over to our skin editor and open up our post styles again, we are going to start off well, I guess we’re just going to do it right here in the middle of this. In terms of headline area, I think actually, we’ll do it right below headline area and that’s going to be h1.headline and h2.headline then color, grab the color, pound sign (#), paste that, semi colon, closing bracket. If we save this, you’ll see that the color has changed now.

Now, we’ve got this color that we wanted and we just want to do the same thing to this so come back over here, back to posts styles, additional CSS then we’ll just going to copy this here. Actually, I may as well copy that too then we’ve got .post_content h4, .post_content h2, .post_content h3 separating each of these selectors with a comma. So .post_content h2, .post_content h3 and .post_content h4 are going to have this color, hit save, come back and take a look at it and now we have set that color up.

Style the Widget Heading

The next thing I want to do in this content area is to address the styles of our widgets. Primarily, what we’re looking at is the widget heading so if we come over to the skin editor here, the widget styles that we see right now are controlled by widgets and the selector is .widget. We want to change the typography here to 320, it’s going to readjust line heights and stuff like that. Our font settings, 13 pixel font is fine, our widget titles, let’s look and see what we had for sidebars.

Headings was 18 pixels and the color was 555 so we come back over here to font settings and we’re going to go 18 pixels. It says inherit but in this case, inherit was inherit from the headings and that’s not the way Thesis 2 works anymore so what we really have to do is specify the font style that we want here which is Arial Black so we’ll specify Arial Black and we don’t want a bold font weight for that which is set as normal so we’re going to set that to be normal.

We’ll leave letter spacing at 1 for the moment, that’s fine and you can see there’s no place for us to put a color just like before so we’re going to use some additional CSS. Now, in order to refresh our memory where the selector is, if we inspect this element, you can see we’re looking at a class of widget_title. That’s h4.widget_title but I think that it’s good for us to simply say, well, you can see over here it’s being controlled right now by .widget .widget_title.

Set Up Font Color in the Main Sidebar

The one thing I want to do is make this font color to exist only in our main sidebar so what I’m going to do is preface it by using our div id content area then sidebar then widget title. I want to just make this definition very selective so that is, #content_area then .sidebar and .widget_title and now, we’re just going to say {color:#555;}. Now if we save that, I think we’re going to see that our widgets are quite a bit different.

Let’s see, that is still the small caps, is that the way this is in our example? Yes, it is small caps okay so that does look like that. That’s all we have to do with the sidebar styling for the moment and the next part of this general styling that we’re going to do is the links package. The font family is Arial, site background color, primary text color black, primary link color is this color of blue right here so that’s what we’re going to do.

Change Links Variable

Let’s come over to our links package, open that up and look at options and links. Notice that it’s got a variable here, the $links for the text color? Rather than putting our color in here, I think I’m just going to come down and change the links variable so that’s here and here’s our new text color, hit save. Well, we don’t have any links on this page so you can’t really see it but the color should be set now for that.

The one other thing I want to do is get rid of that line. Notice there’s no line between the content and the sidebar? I want to get rid of that line between the content and the sidebar and that line exists inside the columns package and it’s a piece of additional CSS and all we have to is just delete it, hit save. Let’s save our CSS and refresh this page and you can see we’ve made a bunch of progress here on this.

Comments on this entry are closed.

Comments on this entry are closed.