Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 6 – Style the Menu

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 use our Thesis Navigation Menu Plugin to add special styling to the menu. We customize the overall height and width, and overall background using a background image. We use the typical menu item styles to add padding and margin and the typical background styles. We also show how to edit the CSS file inside of the custom file editor which is a rarely used process.

Video Transcript

Now what we’re going to do is use my Nav Menu plugin to style this. Last night when I installed this, I used the Simple Nav Menu plugin, not fully appreciating the fact that we want to do some special styling with this drop down which can’t be done in the Simple Nav Menu plugin. So we’re going to uninstall the Nav Menu plugin that I have, the Simple Nav Menu, we’re going to install the full blown Nav Menu plugin so that we can make this menu look exactly like this menu.

So we’ll come over here to Plugins and installed plugins and let’s see. John, I’ve just unmuted your microphone. Are you with me here? I can’t hear you yet so I’m just going to leave your microphone unmuted though, just to see whether or not you can make it on.

Then we’re going to deactivate the Simple Nav Menu plugin and delete it. We’re going to add a new plugin and I’m going to upload, choose a file and grab the right plugin for this. This is actually the Thesis Nav Menu plugin, activate the plugin. Okay so we have that plugin activated.

Now we’re just going to go over and start styling it. First thing to say about the plugin of course, is it’s using this background image for the menu itself. So we’re going to need to add that as a background image. Obviously, we’re going to need to muck about a bit with the height of the menu items which we can do here with this plugin. So first, Nav Menu location is going to go below the header and we don’t really care about Nav Menu alignment because it’s going to go to the left. So we’ll just go ahead and hit save to this.

Actually, while we’re at it, let’s change something in Thesis Design Options. Let’s get rid of all those little borders. Let’s see body content area, let’s get rid of the interior layout and borders and then in the regular Nav Menu, let’s get rid of the border width. And then in the submenu, let’s see, I think we should probably make that about 250 pixels wide.

If we’re looking at our text, it’s black and in light gray. Let’s inspect that element and see what color that gray is. Let’s see if we can see it here. A hover is what I’m looking for, well, I don’t know. I don’t see that anywhere. Let’s see if we can find it under resources and see if we can find a stylesheet, a link. Okay, there’s no menu for that one so let’s see if we can find a menu for this one.

So 119, 119, 219 is the RGB value so I guess we’ll try using that. Although actually, I probably can’t get there from here. So anyway, we’ll use a link text color. We’re just going to get ourselves a gray color for the time being, for the hover color. Current is going to be black, current parent is going to be back and all the rest of the stuff is going to stay the same except our text size. What is our text size here? Our text size is… what is it? Computed style… well, I guess I’m just going to assume it’s the same since I can’t actually find… I think we’re just going to take it up to 16 points for the time being, see what happens when we do that.

Okay so then we’ll come back over to the Nav Menu plugin and we’re going to scope the amount of customization we’re going to do. We’re definitely going to customize the overall menu height and width and we’re going to customize the overall menu background using a background image. There’s not going to be any border or drop shadow or rounded corners so we’re fine with that.

In terms of the typical item, I’m guessing that we’re either going to be working on padding and margin for that. We’re definitely going to do typical item background and then we want to create some… we want to create a… well actually, we won’t do that yet. That’ll be an interesting thing to add to it.

At the very least, we’re going to customize the background of the submenu. Actually, I think we’re going to have to customize the submenu text. We’re not going to do a span text style but we are going to get rid of this 2-pixel spacing. We’re going to remove all caps. Okay so I think our scoping stuff is finished.

So we’ll save that and then now that we have it scoped, let’s give it an overall menu background image. We downloaded this to the Media Library last night. That’s not what I wanted. Okay here’s the menu jpg so let’s just grab it, copy it, put that address as the background image. We’re going to repeat it horizontally just in case, but just in case it’s not exactly the right size. But otherwise, we’re just going to leave it like that. Its height though, the menu height is going to be… let’s see, that’s 50 pixels tall. So I think the menu height is going to be 50 pixels. That’s what we’re going to have to say here. Overall menu height is 50 pixels. I think we’ll leave the overall menu width alone for just a moment and we’ll hit save. Let’s see what the menu looks like now that we’ve done that.

Okay so we’re getting some place. Oh we need to change this to Arial. Sorry about that. Is that where we’re doing elsewhere on this too? Yeah, it looks like we are all Arial, Sell Your Home. Yeah, that’s all Arial so let’s go fix that. Thesis Design Options, body, Arial, save.

Okay, I think we need to increase the font size here. Actually, let’s do that. Let’s just make sure we got it right in Thesis Design Options first. Let’s see, Nav Menu, 14 points. Let’s see what that looks like. And I guess that stuff looks like it… is that going to be bold? Yeah you know what, that might actually be bold. So that’s something we have to do in my plugin.

So we go back to Thesis defaults and we bold the text. That should probably be fine. Save it. Let’s go ahead and get rid of the background colors. So link background style, we’re going to customize the background color and hit save. And essentially what that means is that we’re going to make the background transparent, hit save and that should affect everything actually. Let’s see if it does or not. Yeah, it does, okay.

I guess the answer to the question is, I guess the font size really wants to be a little bit larger than that and not bold. And unfortunately, I don’t think I have a system here for doing that in my plugin. I don’t have a method of increasing the font size in my plugin. Let’s see, if I change this… okay well, I’m going to fake it here because this plugin needs the ability to increase the font size.

Well actually, let’s just take a look at it and we’ll see whether or not we should increase the font size in using custom CSS. It’s probably going to be the easiest thing to do. Inspect that element. And so if what we do here is new property font size 19 px. Okay well that’s too big. 16? Get rid of that font weight bold. Font size, maybe 17. Yeah, okay.

What we really need to do is create a custom style. Now, you’re going to see me do something that I tell you never to do. But I’m doing it. I don’t usually do it but I’m going to do it this time and that is edit the CSS file inside the custom file editor. Okay, .custom thesis menu a and then we’re going to say font size: 17 px semi-colon close. Okay, thesis custom menu a, font size 17 pixels, save, refresh. We need to lose the bold out of this so we’re not going to create a span text. We’re going to come back over to Thesis default. We’re going to get rid of the bold and we’re going to hit save.

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