Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 10 – Style the Footer

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 this session we show how to style the footer using the Footer Widgets plugin. We rearrange content in the footer, give padding, change font size and get rid of the Thesis attribution. We also assign and customize the footer row text style.

Video Transcript

Okay so we’re going to want to rearrange. We’ll want to put that Facebook in there first and we’re going to want to give ourselves a little padding. We want to pull this thing down, we want to change the font size here and we want to get rid of the Thesis attribution.

Let’s go to HTML view of this first. So we’ve got Active Rain here, yeah. What we’re going to do is just come down and cut that one out and paste it at the end and hit save. Okay that should give us the arrangement we wanted it. No, the Twitter went in second. So let’s see, I got to get the a href equals. We’re going to cut that one and then href equals. Let’s get to the end of that a right there.

Now we don’t want to put spaces in between these things, like returns because they will go on a separate line. It’s got to really flow altogether like this in order for that left alignment thing to work properly. Okay, there we go. Facebook, follow me on Twitter, Active Rain.

Now, we just need to style this stuff so it looks right. Let’s go over to our Footer Widgets plugin and let’s work on some styling. First thing we want to do is get rid of the Thesis attribution. So we check that we have the Thesis license and we remove the Thesis attribution. In our footer padding, let’s give ourselves 20 pixels of top padding. Okay, that pulled that down.

Actually, am I mistaken? That’s an image there, isn’t it? Let’s see, let’s inspect that element. Oh, that’s the menu background image which already have. And all we need to do is specify… let’s just see. Yeah, that’s 50 pixels tall so yes, we can do that though. Anyway, maybe. We’ll come back to that yet.

The next thing is to change this font size and what is that font size? 10 pixels, wow that’s small. Okay so we’re going to be 10 pixels and white. We’ll come over here to our footer row text style. We’re going to customize the text style and then footer row text style, it’s going to stay Arial. The font size is 10 pixels. We’re going to customize the font color. It’s going to stay white. We’re going to let the link color be white. We’re going to have the hover color be white but we’re going to underline the link. Oh no, underline the link text, that’s what we’ll do. And that actually all we have to do with this. Let’s hit save and see what happens.

Almost. It must not be 10 pixels because that’s a lot bigger. So let’s take that down, footer row text style and let’s take that down to 9 pixels and let’s see what happens when we do that. Okay, well that looks about right except that this essentially wants to be a little bit more space over here. And I think the way to do that is to give it a little bit of left padding. Remember that padding and margin are cumulative so actually, we’ll give it margin. We’ll give it 20 pixels of left margin and we’ll have to then bring this down to 100 pixels wide because otherwise, the sum of those will be greater than the width available. Look at that, it’s perfect.

Then it’s a little too tall but what we can do is I think we just get rid of the height specified. If we go under our Full Width Backgrounds, I believe we have specified a height for this. Our footer area height… no, we didin’t specify a height so why is that getting to be that tall? I have not specified a height. Oh, it’s going to be that tall because the page has no content so the footer goes all the way to the bottom regardless of what else is going on.

Since the page has no content, it just keeps on going. Once we put a whole bunch of content in it then the footer will just be… in fact, let’s just go ahead and do that.  Let’s get a bunch of Lorem Ipsum text and put it in there. Let’s get a bunch of Lorem Ipsum text and let’s see, let’s get 8 paragraphs. Okay, that’s a bunch of Lorem Ipsum text, come back over here and we’ll edit this page. I think what we’re going to do, in our visual view, let’s open up the… pardon me. Exit full screen.

I didn’t want to full screen. What I wanted was the kitchen sink. Open up the kitchen sink, paste as plain text, insert, update. I’m going to go over here and refresh this. Okay, view page. Okay there we go, see, it’s only as big as it needs to be in order for that to work. So that is working just fine.

0 Comments… add one

Save $200 on Membership Now!

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

Leave a Comment