Build Your Own Business Website header image

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.

Lesson 5 – Part 6 – Style the Footer

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing to do then is style the footer. Now, the footer has a whole bunch of styles that we have to create do. We’ve got these widgets that are going to have different styling than these widgets and I think the first thing we should do here is just put some widgets in in these widget areas so we can see what those are going to look like.

Place Widgets in Widgets Areas

We’ll go over to Appearance and Widgets and Footer Widget Area 1, let’s put Recent Posts in Footer Widget Area 1 then Footer Widget Area 2, let’s put Categories, Footer Widget Area 3, we’ll just put “Some Headline” and “Some Text” and Footer Widget Area 4, let’s just drag this one in here.

Let’s take our Footer Widget Area Left and put a Custom Menu 1 there then Footer Widget Area Right, let’s grab a text widget. Let’s just see how that looks now. That pretty much looks right. You know, I don’t think so. Actually, I’m going to pull that one out, I think that’s causing a bit of a problems here so drag that one there, let’s get rid of it. Let’s just drag that one in there.

Adjust Text Alignment

Now, we’ve got these in here to style and we’re going to start this styling by adjusting the text alignment. Let’s come back over to FireFox down here and look at text alignment for a second. You can see that all of these are text aligned to the right automatically because of the way Thesis does things and I think it’s probably under div id footer. Color, text align to the right because we don’t want that, we want text align center.

I have extra padding I think in here so we’re going to get rid of the padding. Do we have a padding and footer area .page? No, I don’t think so. I think we’re good with the padding so we’re just going to take our footer and put text align left. So, #footer, text-align:left then go ahead and style our h3s for this.

Change Footer Color

We’ll say, #footer and then ul.sidebar_list h3 and this h3, we’re going to make the font size 24 pixels and change the color. Let’s scroll down here and look at what we’re changing that color to, now we’ve got to turn all of our footer back on. That should get us there. Let’s get that color, that’s the color there. Come back over to this and put the color and we want to get rid of ,that font variant thing, font-variant:normal and we’ll say, letter-spacing:normal. That worked.

Actually, I think we want this to be a bit bigger here but while we’re fooling around with this, let’s just inspect that element. This underline comes from a border, if you can believe this, from a border of the link element. I don’t want the underline there so I have to get rid of the underline from the link element.

The next part of that then is, #footer a, we’ll just say border:none. That solved that problem. Let’s see, that looks okay. These are links so I want to change those to white when I roll over so we’ll say, #footer ahover, color:#ffffff so now it gets to be white when I hit it. Interestingly, there’s not a color assigned to footer p so it’s getting its color from the sidebar color.

In this case, we are going to also say, footer ul.sidebar_list and color. I want this color here, inspect the element, which I currently have set as 888. I don’t think I’ve set the footer styles yet, just go ahead and add this in then we’ll go back and set the footer design options, that’s what I forgot to do.

Come back over here to footer, paste that and actually, we’re going to combine these over here then footer a, footer a:hover, ul.sidebar_list, footer-left, footer-right, footer-bottom. We’ve got those working correctly there so let’s refresh this.

Set Footer Design Options

Now let’s fix our footer design options. The footer design options I have, font family is inherited from the body, the font size is 15pt and the font color is different entirely, it’s this color here. That’s got that saved, let’s save this. That’s going to change the way this stuff looks now.

We’ve got some things that look right although that’s really interesting, isn’t it? Because you would think that we have everything the same size. Inspect the element with Firebug, where does it getting its size from? Font size, it’s getting its size from li widget, 1.3em and this is getting its font size from what? Inspect the element, this is getting its font size from footer p 1.3em.

The ems are throwing us off here unfortunately because they’re different in different places. What I’m going to do is come in and make a blanket statement about the font size for all of these.

Footer Font Size

In fact, we can do that from here. What I really need to do here is say #footer p, I think I might have to do this a couple of times, font-size:15px, this isn’t the same size either and I think we’re just going to say #footer a as well. There we go.

Now we’ve got font size all the same size. We’ve got font text 1 color, we’ve got our link a color and we’ve got all of our font sizes the right size. The only other thing we really need to do is adjust some padding down here and do that from a different screen. Really, the only thing we did with this is this, footer p, footer a and font-size.

The next thing we need to do is we’ve got to figure out why that’s not all the way down there. That is actually coming from li widget margin bottom there. Also, I think we’ve got some height issue with this menu. Actually, I’m going to move the menu out of there for the moment because I don’t have time to style them today.

I need to make sure this looks reasonably correct by the time we’re finished with this so we’ll pull the menu out of there for the moment. Bottom Left, Custom Menu, add some text, “Here is some more text”, here we go.

Remove Widget Margin Bottom

Now, what we have to do is get rid of that bottom widget, li widget margin bottom 2.769em and then you can see once we get rid of that, it sits down where we want it to sit. I think the only widget bottom we want to get rid of that for really is this bottom widget. What we’re really going to do is address the footer-bottom-widget-column and ul sidebar_list widget.

Let’s see, li widget so footer-bottom-widget-column, li widget, get rid of the margin bottom. I said that was down our .footer-bottom-widget-column li.widget. I think I actually created the first one for me, li widget, we’ll say margin-bottom:0px, that way the top one still maintains it. I think I really want that font size to be smaller too so we’ll say, font-size:14px, hit save, upload, save it and refresh it. There we go, now it’s sitting down inside of where we want it.

Actually, I want this to float to the right though. Right now, it’s floating to the left and it looks worse. Remember when we created this, we added the left class to this side and the right class to this side?

We’ve got our footer-bottom-widget-column right so what we’re going to do is make the footer-bottom-widget-column right, we’re going to give it a text align of right. I think I can just copy that, I can. One more time, .footer-bottom-widget-column.right and we’ll say, text-align:right, save it and upload it then refresh it. Bingo, there we go.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment