Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 13 – Add and Style the Footer Menu

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects - , , ,

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.

This is Part 13 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to add and style the Footer Menu using Thesis Design Options and the BYOB Thesis WP Menus plugin.

Video Transcript

So in order to add this button to the menu, we go back to our BYOB Thesis WP menus plugin and we essentially follow the same pattern that we followed before which is we put our main menu at the top. Now, we’re going to put our category menu and we’re going to sign it before the footer. We’re going to make sure everybody can see it and we’re going to assign it the green style. Hit save.

Somebody asked, “Why would you bother having more than one style?” Well because there are… you might have different colors in different places on a site. You might want different style menus, different sets of colors for those menus. So if you… I mean the other thing you could easily do on this would be simply to use the Thesis Navigation menu style and apply it to both conditions and not have a custom style at all. And if we were going to do that, let’s actually do that. Let’s… for this, let’s say we’re going to use a Thesis nav menu style.

Actually, let’s use the green style for this one but for the main menu, let’s use the Thesis nav menu instead of green, the same with Thesis nav menu. Hit save, come back over to this. Now it’s looking like that so the first thing we want to do is let’s get rid of… well, let’s get rid of the background colors. Let’s see, yeah we’re going to get rid of background colors first. And so under Thesis Nav Menu Styles, here’s a place where we can manipulate the text style if we want. And so you can see here we did Arial 16 point normal spacing. Let’s just go ahead and select normal spacing here and we’ll go ahead and select bold here as well. And then under Thesis Nav Menu Colors, we’re going to remove all menu background colors and hit save, come over here and refresh this. Now, we got rid of our nav menu colors and now the rest of the styling will happen inside the Thesis Nav Menu Settings themselves.

So now, we’ll go over to Thesis Design Menu options. Because the way this works is, you use Thesis Design Options to style this the way you want as far as you can and then use my plugin to add additional styling when the Thesis nav menu doesn’t give you everything you want. So the parent link color was ffffff, white. This color was that green so let’s go back over and grab that green. And then this was that yellow color there. Now we don’t want any nav border so we’ll just say 0 to that. And actually, I think if we just hit save, I think that’s probably all the styling that needs to happen on that. Hit refresh.

Okay so now our nav menu is a little small actually. Let’s see how bigger our menu items can be. I think 14 is all the bigger it gets here though. So we’ll come back over to our WP menus plugin and under nav menu text styles… yeah, I guess that’s good. Nav menu colors… so the only choice we have here is our typical left and right padding.

Now, because we’re using the WP Nav menu, we can’t make the font size any larger than 14 points. We can make it because my plugin allows us to go larger than 14 points. But in this case, we can only go to 14 so what we’re going to do with that, we’re going to just space it out further so our typical left and right padding, let’s just say it’s 30. Typical left padding and right padding of 30. Okay, maybe 35. You know, this is exactly the same concept as in the other style. It’s just that we’re applying the style to the Thesis Nav menu. Yeah, there we go. 35 did the job and that looks pretty much the same.

Okay and if we wanted to, we could always come over to our category menu and instead of using the green style, we could use the Thesis Nav menu style which will make the font smaller. It would probably make the padding not work quite right as well. Yeah, padding on this one doesn’t work quite right because it’s a different menu than this one is. But nevertheless, you have that choice of applying different styles to these menus which I think extends the power of the WordPress menus substantially.

So anyway, now we have… well…

0 Comments… add one
0 comments… add one

Leave a Comment