Build Your Own Business Website header image

Lesson 8 – Part 5 – Style the Bottom Menu Area of Agility

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

The next thing we’re going to look at is styling the background of the footer areas. Right now obviously, one footer area has gotten some of the green and the other footer area has gotten this as the default color down here. And if you look at the site that we’re emulating here, both of those are red.

Create a Footer Menu

One other thing you should probably notice is that the menu down here is different than the menu up here. So one of the things we’re going to do before we dive into that is just create a footer menu and stick the footer menu down there.

In order for us to do that, we have to go back over to the dashboard and go to Appearance and Menus. We’ve got our main menu. Now we’re going to create a footer menu. Create the menu. The footer menu is going to be an abbreviated menu so what we’re really going to do is just put Articles, Testimonials, About and Home here.

I want to put Home up at the top, Articles at the bottom, change the label to Home. The label Testimonials is fine. About and Articles are fine so we’ll go ahead and hit save to that. We’ve now created our footer menu.

Add the Footer Menu to a Template

Let’s come back over to the Thesis Skin Editor and open up our bottom footer area page, footer area columns and footer column 1. And now pick a different menu and we’re going to pick the footer menu. Okay, save that template, refresh it. And now we have a whole different menu showing up down here.

Change Footer Menu Styles

In fact, we really want a whole different set of menu styles for this. There is a package for the footer menu and it’s this package right here. Let’s open up that, I think we’re going to leave the font settings alone. But in terms of our links… well let’s see, what does that look like actually?

Create Variable for the Colors

Well, we don’t want it to be that color. And if we come over here and look at this, it is this color here and then it’s going to that gray. So let’s create a couple of variables for this. And I’m going to inspect this element here and figure out what that color is here. That’s the hover color and this is the regular color.

We’re going to come back over to our variables and we look at our accent text color. What we’re going to do here is make this the accent text color. So TC3 and then our accent link color is that. I take it back. We’re going to use the second one instead. We’re going to use TC5 and then TC6 will be that other color, that brownish color, this one here. That’ll be TC6.

Set the Link Style

Now we’ve got TC5 and TC6 in our footer menu. So we go back over to those options, go to our link settings. I do want the background color to be transparent there but the text color is going to be TC5 and the hover will be TC6. And I want it to underline when it’s hovered. There’s not going to be anything current or current parent or active.

But my font settings I’m going to change so that the text transform is none and letter spacing is 0. I’ll say 0 px. Sometimes, 0 doesn’t really work because it misinterprets 0 as being something like false. So I’ll just type in 0 px for that, save that and now this is our color for our menu down here. And we’re back to Georgia.

So one more time, we’ll go to the footer menu and we’ll change the font style back to Georgia. Okay so we’ve got our footer menu set up here.

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