Build Your Own Business Website header image

How to Convert a Static HTML Site to Thesis Part 7 – Style the Submenus

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 submenus background color, text font size and text colors. We customize each menu item separately by creating 3 different menu tabs which have customized width and border. We create classes and apply the style to each of the menu tabs.

Video Transcript

Now we have this thing set up and actually, it looks pretty much the same so now we need to style the submenu. Let’s see, what does that submenu do? You hover over it, it stays black all the time but then hover goes to light gray. Okay so I think that’s probably just it, right? Link background style, we’re going to use a background color. I think that’s it.

The background color we’re using is 000 and in our submenu text style, we’re using Arial. We’ll use 17 pixel font, we’ll have normal spacing. We’re not going to do any of those things and the submenu text is going to be white for the link text. It’s going to be some kind of a gray and then for current, it’ll say white and current parent will stay white. So we hit save to that.

I think now, our menu is going to look very, very close. One of the things we’re going to do is come back over to the Thesis Design Options and we’re going to set the color here for the time being in the Nav Menu. The link background color will be 000. The hover background color, the current background color and the current parent background color is all going to go to 0. That stuff should override, yeah okay.

Now, I guess 250 pixels is bigger than what we wanted and maybe this text is bigger than what we wanted to. Maybe we should reduce the size of this text. How wide is that? Well, it says it’s 299 pixels. I just made it 250 pixels. Of course, that 250 pixels includes margin. Okay well, let’s do it 200 for the moment or 220. Then we’ll come back over to the Nav Menu and our submenu text style, we’re going to take down to 15.

Let’s save that and then we’ll come over and take a look at what we’re doing next. Okay, I guess we made this thing as big as necessary in order to have these only on one line so I guess it’s something to consider there. Then it looks like each one of these things is a different width. I think we should try to standardize it a little bit.

We could theoretically make everyone different but I don’t think that’s a great idea. So we’ll make this one the long one and we’ll make this one the normal one. In Thesis Design Options, make the normal one smaller and we’ll use custom styles to make the… so we’re going to take this down to say, 180 pixels. Let’s see if that does it and it works okay.

Okay so this one, we need to make lighter and the other thing we want to do is get this hard line under these. So we’re going to create a custom style for these things. We’re going to do it in a way that’s kind of different from the way you expected my stuff to work because what we’re going to do here is to customize each menu item separately. We’re going to create 3 different styles or different menu tabs. We’re going to create the typical long menu tab, a typical long with the underline and then a regular one with an underline, okay?

So we will do that, we pick 3 different menu tabs. So customization option 1, we’re going to customize its width. That’s the only thing we’re going to do with this one, is customize its width. Style 2, we’re going to customize its width and its border and style 3, we’re going to customize its border, okay?

In style 1, the width options, this one we’re going to make 220 pixels wide and hit save. Then we’re going to take this tab 1 style and we’re going to apply it to this submenu. So if we come back over to Appearance and Menus, we come up under Screen Options and we say show these CSS classes. Then we come down to Phoenix Biltmore and now we’ve got a place for CSS class. I’m going to type tab-1 and that’s going to apply this CSS class, that’s going to apply the width then to this submenu. Hit save. So that takes our tab 1 style and applies it to each of these submenu items. And now that’s 200… okay so 220 pixels wasn’t enough. We need to extend it a little bit more.

We come back over to the nav menu here and tab 1 width. Let’s make it 240 pixels, see if that works and hit save and then refresh it. Okay, maybe a little bit further out here. So we’ll come back over and adjust tab 1 styles one more time. Well, let’s just try 250 then because 250 seemed to work last time. No, we still need more. 270, I guess. Let’s try that. Okay, that worked.

Now we need to create the style that will put that border under here. We’re going to apply that style to this Scottsdale Properties For Sale. I suppose we could put a top border on the MLS Property Seach instead. I suppose we could do that. Let’s try that.

Actually, you know what? It occurs to me… actually, we may be able to get away with just 2 styles. I’ll show you how. We’re not going to bother with the width in this one. We’re just going to add border to this. So this one’s going to have a border style and we are going to configure each side of the border differently. And what that means is, we’ll use a top border but we’ll have no right border, no bottom border and no left border and the top border width is going to be 2 pixels. It’s going to be a light gray and it’s going to be solid. We’ll hit save and then we’ll come over to our menu and we’re going to add to this. We’re going to say .tab-2. So we just added the next class to that. Let’s see if that works. I think it will.

Oh, maybe not the dot. Maybe what we have to do is… yeah, no that’s right. We have to get rid of that. Tab 1 tab 2… let’s try that. Otherwise, we’ll just have to create that. No, okay so we’re going to… I was mistaken. We’re going to go ahead and create a tab 2 border style and we’re going to add a width to the tab 2 style. Let’s hit save and then the width is going to be 270 also and then we’ll come back over to this one and it won’t be tab 1, it’ll just be tab 2. So it will have the same width but it will have the border added to it.

Okay, not quite. Added the border to the left, not to the bottom so let’s try that again. Tab 2 border style, allow each side to be different. No bottom border, no left border. This should be working just fine, save. Look at our menu. That’s tab 2. Shoot, okay why don’t I have my border? Okay so it’s got a class tab 2 added to it and what does this thing say to that tab 2 class? Yeah, let’s go to resources and let’s look at our stylesheet in BYOB Custom CSS stylesheet. Custom Thesis menu tab 2. Oh, it’s giving you the color of 0.

It’s not taking the color and it’s also not making it border top. It’s making it border everything which means that my border style just isn’t working correctly. If I do each link state, so maybe I have to come back and I’m going to allow each side to be different and hit save. You see my plugin is not working the way I expected it to, I think. So let’s see, link border style, it’s going to be 2 pixels, light gray, solid, no right border, no bottom border, no left border. You all know I hate it when I make mistakes like this in my plugins. Oh, there we go.

Okay so I just need to do that one thing and then it’s going to be working. So there was my workaround. My typical one didn’t work properly but hover border, typical border width is going to be 0. Current border style is 0. Current parent border style is 0. So we’ll save those, come back over here and refresh this. Yeah, there we go. Oh so hover, I want to put that in there too, right? My mistake. Couldn’t have anticipated that one, allow each side to be different from the hover and then hover border style, it’s going to be 0 and gray. No, not 0, 2, gray, no right border, no bottom border, no left border, save.

Okay so we’ve got that menu thing the way we want it. Now we have to come over here to multimedia. I believe multimedia wants under Seller or above Home of the Week and above Local Business Update. So that’s the next one to create. That’ll be tab 3 style and border style, we’re going to have to configure each one separately.

In link border style, we’re going to configure each of those separately. Well actually, I think let’s just try this. And then link border style, it’s going to have 2 and then light gray, solid, no right, no bottom, no left. Let’s get the right color of gray here. Let’s just use the same color gray every time instead of switching it out every time. 2, no right border, no bottom border, no left border, no left, no bottom, no right. Okay, hit save.

Then we need to apply tab 3 to those specific conditions. As I recall, I think it was Home of the Week at tab 3 and then so did Local Business Update. Hit save to that. Okay, I think I missed out on… Home of the Week didn’t get its thing. Tab 3, not tag 3, tab 3. There we go and that’s pretty much like that.

Okay well actually, that was a lot more trial and error than I expected it to be to get to what we were looking for but we do have our menu essentially working like the other one.

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