Build Your Own Business Website header image

Upgrade a Thesis 1.8.5 Site to Thesis 2.1 Using the Classic Responsive Skin – Part 7 – Setup Front Page Template – Widgetized 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.

We’ve gotten some of the pieces of the Front Page Template setup in Thesis 2.1 so let’s take a look at this in the Responsinator just to see how it’s coming out along. Because after all this is supposed to be responsive and so it’s so far it looks fine.

Change Background Color in the Menu Area

I was a little concerned about how that image would turn out but actually it looked just fine there on those devices. But I think we probably want to change this color to white, what is that? That is, span class=”menu_control”. Background-color is that color but where is it getting its regular color from? So, menu_control is getting its #808080 from the regular one but I’m going to give it a background-color of white instead.

So, we’ll come back over to the Custom CSS and back down to our menu; and .menu_control color:#fff, okay. Save that, let’s refresh that and see if it’s more readable. Yes, that actually is better and it doesn’t affect anything else so it’s perfect.

Setup The Footer

The next thing that we’re going to do is setup the footer. But bear with me here for a second; I need to create a zip file for this because we’re going to be installing the latest version of my BYOB Simple Footer Widgets for the Thesis Classic Responsive Skin.

Add Latest Version of Simple Footer Widgets

Footer Widgets here we go. I have a couple of these in here. I’m going to delete that one and I’m going to rename this one; so that it does not have that number, byob-classic-footer-widgets.zip is the box that we are going to upload and you should be seeing an update. If you’ve already using this, you should see an update soon in your window for that.

We’ll come over here to Boxes, Manage Boxes, upload box and then I’m going to go back over here where I’m storing it. Classic Footer Widgets, you can download this from my website of course as well and this is something that is free to all free members but it does require a Thesis 2.1 site. So, we’ll save the box; this is version 2.1.2. You probably have a version that’s younger than that but when you see an upgrade is available, upgrade to this.

Setup Footer Widgets

Now, we’re going to click over here to Footer Widgets and right now it’s set up to display 1; we’re going to display 2. And save those, those two widgets and then come back over to Appearance and Widgets and move the appropriate one to the appropriate location. So, let’s see this one should be in 2. We’re going to drag that up and drop that into the Footer Widget Area 2. So, then this one is probably the copyright. So, we’ll drag that one up and drop that in 1 and if we refresh this page we should have both of those there.

Remove Skin Attribution and WP Admin Link

Let’s see, we want to get rid of the attribution and that sort of thing so we’ll come back over to Thesis and Skin Content, and then under Miscellaneous we’re going to get rid of Skin attribution and WP admin link. Say okay to that and save it; and then refresh this. So, that’s fine but we are, however, missing the top one here and we’re going to set that up in the Editor.

Where to Find the Footer Widgets Box

We’ll go back to our Front Page. If you look inside the Footer you will notice that there’s no widgets in here. And the reason for that is that Classic Footer Widgets Box was created for people who don’t really want to get into the skin editor. At any rate it does not require people to go into the Skin Editor in order to use it. So, so if you are expecting to see it over here you’re not going to see it.

It’s being hooked however to this hook; the hook name footer. So, what we’re going to do is delete that hook there and in fact now if we come back over and refresh the page I bet you that stuff is not going to show up anymore. It isn’t, okay?

Create and Place Footer Areas

And we’re going to create a Footer Top and Footer Bottom and we’re going to do that with an HTML Container. We’ll call this one Footer Top; and we’ll give it an id of footer_top. Come over to our Admin and we’re not going to add that to the hook. And then we are going to create one more HTML Container and we’ll call it Footer Bottom and we’ll give it an id of footer_bottom. Then we’re going to add the hook back in.

But we’re adding the hook. What we’ve essentially done is use the power of the drag and drop editor to move the hooks around. So, we know we want to hook to this footer hook; we’ve got stuff that’s going to hook to it but we don’t want it to attach to the footer, we want it to attach to the Footer Bottom. So, now we can drag Footer Bottom and Footer Top into this.

Create and Add New Widget Area for Footer Top

And while we’re at it let’s create a new widget area. And we’re going to call this Footer Top Widget Area and again we don’t really need to give it a class or anything like that. Let’s say okay. I’m going to shift+drag this and drop it into Footer Top.

So Footer Bottom has got the hook now we’ve got a new widget area there; if we save this template and refresh this it these two things are back, right? And we have this, this top section. So, what I’m going to do now is put that widget in there.

Come over to the Appearance and Widgets, Footer Top Widget Area and that one was one of these two. So we’ll shift+drag that and drop it into Footer Top and refresh this. Now notice that we got a whole bunch of space here and I think this is again due to that whole widget bottom margin.

So if we get rid of the widget bottom margin everything would show up right. To do that we are going to say footer .widget margin-bottom:0px. I’m just going to put it here, ‘.footer .widget’. And that should get rid of that bottom margin for us, it did.

Footer Colors

Now we want this whole thing to be grey and if we look over here at the grey she’s using, it’s #777. So, we will come over here and then copy this little comment section; and drop it down and paste it in there. We’ll call this Footer Styles, and say .footer background-color: #777.

I guess I was wrong because these things she’s got using a different color and in fact this is also a different color, is it? Maybe not, that’s #999; oh, but she’s embedded that in there already so it’s already #999. And that link is #fff and #dedede. So hover is #fff and regular is #dedede. Let’s come back over to the footer and say .footer .widget a color: #dedede and then .footer .widget a:hover color: #fff.

Perfect. So our footer now works and if we refresh this view I think we’re going to find that we got it just right. Yes, we did except I think I would like a little bit of padding there. Well, I’ll be fine tuning we’ll come back to that later. Let’s see let’s just look at it in a different view here and yes, it looks good.

0 Comments… add one
0 comments… add one

Leave a Comment