Build Your Own Business Website header image

How to upgrade from Thesis 1.x to Thesis 2 Using the Thesis Classic Skin – Part 12 – Create the Footer in Thesis 2

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.

The next thing in this Thesis 2 upgrade we’re going to do is to work on the footer. Let’s look at this example of the footer in our Thesis 2 site. You’ve got 3 narrow footer widgets and 1 wide one. The original intention was that this be as wide as the sidebar then these 3 be narrower and fit in the remaining space.

I’m going to show you how to do it that way but I probably wouldn’t do it that way this time but I’m going to show you how to do that. What we’re going to do is, we’re going to put these in the footer but there just going to be 4 equally-spaced widget sizes.

We’re going to come over to HTML and open up our Footer Area, open up footer area .page and we’re going to create some boxes.

Create Footer Widget Columns

The first one is a container that we’ll call, Footer Widget Columns and it is going to be the container that the columns package works on so we’re going to call it footer_widget_columns. Then we’re going to create our columns so a new container and this will be Footer Column 1, add the box, Footer Column 2, add the box, Footer Column 3, add the box and Footer Column 4, add the box.

Now, in terms of classes we’re going to use c4 for Column 4, c3 for Column 3, c2 for Column 2 and c1 for Column 1. Those are the selectors that we’ll use in the columns in the column package so now I’ll just drag 4 up, 3 up, 2 up and 1 up then I’m going to drag Footer Columns up into Footer Area Page and let it sit right there on top of it.

Add Footer Widgets

Now, once we do that, we have to add our widgets to that so we’re going to call this Footer Widget 1, add the box, add a new widgets box, Footer Widget 2, add the box, add a new widgets box, Footer Widget 3, add the box then finally the last one, Footer Widget 4 and add the box. Then we’ll just drag Footer Widget 4 into Column 4, Footer Widget 3 into Column 3, Footer Widget 2 into Column 2 and Footer Widget 1 into Column 1.

That’s the structure of it so let’s save our template. Look at our canvass and you’ll see that we’ve got 4 widgets in there but they’re all stacked on top of each other rather than sitting side by side. It’s because we haven’t designed our column package yet.

So let’s come on over to the CSS, go to packages, we’re going to create a columns package, we’re going to call this one Footer Widget Columns then footer_widget_columns and this is the same class that we specified when we created the column container, Footer Widget Columns.

We go over to our options and we say we’re going to use 4 columns. The first selector is .c1 and that column width is 25%, alignment is left and .c2, 25%, left, .c3, 25%, left and .c4, 25%, left. We hit save and come back over and look at our thing and we should have columns sitting side by side and we don’t because we haven’t columns in the reference list. So footer_widget_columns, here’s our reference, come up to our columns and that in put our reference list. Now, we’ve got our widget areas all stacked up.

Add Background Image and Background Color to Widget Areas

Ordinarily you’ve seen me put padding in here but I’m not going to put padding here yet. I’m going to be doing something else here so for the time being, we’re just going to leave it just like this but we now have our footer widgets in there.

Now, we need to add a background image that our background looks like this, so we need to add a background image then we’re going to want to put a background color, background of these widget areas then we’ll be styling some text and we’ll be styling the headings so that’s next.

We go to images, choose our file, this is the footer background image, we downloaded it yesterday. We’re going to choose this file, come back over to our CSS and now we’re going to create a new package and that package is our footer area. Remember we’ve got this footer area that is filling the whole browser window so that’s the thing we want to style and remember it’s id is footer_area.

We’ll come back over to CSS, we’re going to do a single element style, add the package, the name is going to be Footer Area, the reference will be footer_area and the selector will be #footer_area. The background is going to have that background image and we just want to repeat it in the X direction similar to what we did with the header.

Hit save with this, come over and take a look at it. We don’t have it there and that’s because we haven’t added the footer_area to the list so let’s grab the reference. We got our &header_area up here so we’ll put our &footer_area below that. Let’s just save the CSS, refresh this and it’s not going to look exactly the way we want it to look.

We’re going to at least have that background image there. Obviously, we want a bit of padding on the top of this so we’re going to add some padding to this then we’re going to start styling the widgets. If we come back over to Footer Area and just give ourselves a bit of top padding, say 20 pixels. There we go, that pulled it down.

Style the Widgets in the Footer Area

The next thing to do then is to begin styling our widgets for that area. We should refresh our memory as to the HTML, we created a footer columns so the class is going to be footer_widget_columns then we’re going to add the class of widget to this. Now, this doesn’t really tell you that it automatically adds widget as a class but it does, it was automatically a class widget that’s added to this so the selector that we’re going to style is going to be this footer_widget_columns and widget.

We’ll come back over to the CSS and we’re going to do this in a widgets package, add the package, we’re going to call this Footer Widgets, the reference will be footer_columns_widget and .footer_widget_columns .widget, that’s the selector this is going to apply to.

Now, our widget titles, we want our font to be just straight Arial, we want the font size to be 15 pixels, we want our font weight to be normal, text transform is going to be none, font variant will be normal, text align is left, letter spacing will be zero.

Padding for the heading, we’re going to make 5 and these are going to set at 200 typography. I think widget font settings, we’re going to make those 13 pixels and I believe we are going to save that and add it into our list.

You know, we need to put our widgets in the first and really see what’s going on there so let’s save the CSS, come back over to the site, go to Appearance and Widgets and move our widgets into Footer Widget 1, 2, 3 and 4.

Our Categories widget, let’s just look at this again. Now, Important Links, Recent Posts, Related Sites, not Categories. So the Important Links goes into Footer 1, Recent Posts goes into Footer 2, Related Sites goes into Footer 3 and the text goes into Footer 4 and the text was our Contact Us stuff and now we should have something worth looking at. Okay, we’re getting there so if we come back over and look at what we’ve got, this needs to be white.

Add a Background Color, Margin and Padding

First, we need a margin here and this background color. That background color is this here so we copy that and obviously, 15 pixels wasn’t the right thing for that, I don’t think. Well, maybe so we need to put our background color in there so go the skin editor just so that we see what we’re referencing here.

We’re going to be referencing footer_widget_columns and widget with our background color in fact, we can see what that looks like here then we need a little margin say 15px, there we go. We probably want padding of 10 pixels so it’s going to be 10px, it pulls that stuff away.

We’re also going to want to fix an absolute height for this but I think we’re getting there. Okay, so we need to add background color, right margin and padding. If we come over to CSS and we go to our widgets, color, colon, semi colon so we’ve got our background-color then the next one was padding and the next one was margin-right.

More Adjustments for the Heading

Next we’re going to do headings and we’ll make some more adjustments after that. We said that was widget title so .widget_title{color:#fff;background-color:#ee0000;}. Okay, let’s see what that looks like. Yes, it’s getting there. I think maybe we want this to be a bit bigger so we’ll make the widget titles 18 and I think I’m going to make them bold actually. No, I guess not, we’ll take the bold out, save the CSS. Okay, we’re getting there. There’s a bit more text styling fiddling around that has to be done but I think you get the concept there.

0 Comments… add one
0 comments… add one

Leave a Comment