In this session we show how to use the horizontal dropdown menu package in Thesis 2.0 and how to customize its settings. We also demonstrate how to style the submenu separately from the main menu by creating a new horizontal dropdown menu package for the submenu and adding additional styles to it.
Rick: Okay, tell me specifically what it is you don’t understand about…
Member: Well, I just… I saw a horizontal drop down menu in there and I haven’t really played with it and I don’t know all the particulars and what to look for on that. It’s a beginner’s question, I realize but…
Rick: Well, I think one answer is of course, just play with it. But the next answer is if you… we’ll just take a look at it for a second, look at the horizontal drop down package. Your options are… first, your font settings. So you can choose a font family and a font size and a font weight. You can choose a line height which is useful if the menu is going to split into more than one line. That is, more than one line per menu item. You can choose a font style, a font variant, a text transform and a text align and then a letter spacing. So that’s the font stuff.
Your link settings have to do with colors. So the text color and then the background color of the link, of the hovered link of an active link which is… obviously, a link is just plain old link. A hovered link is a link when you’re hovering over it. An active link is a link when you are hovering over and pressing down but haven’t yet released a… and you can change a text color and a background color for that. A current link is the current page that you happen to be on. And so if you’re on the homepage then this would affect the homepage link and again, it’s a text color and a background color.
And then finally, a current parent. So that means if you’re on a page that is a child of this menu item then this menu item will take a text color and a background color. And if you leave everything blank except for links and hovered links then those are the only two that will… then links will control everything except for when you hover.
So that’s how links work and then you have menu item padding which is this top bottom left right padding of each specific menu item. Again, the same thing is true with the border settings. You can choose either to have no border or you can have a tabbed border. And the tabbed border is sort of that default border thing that you see around Thesis and you can choose its width and its style and its color. And then for submenus, you can choose a submenu width for the submenu, the drop down menu.
And that’s kind of a quick run through with what exists in the horizontal drop down menu package. Is that what you were looking for?
Rick: So if you wanted more information about this, if you looked at my “How To Build A Professional Website Using WordPress and Thesis” series, if you looked at that series and just looked at styling the menu section, the interface is not the same but the concepts are identical. The… which colors you set and what they affect and I do kind of go into a more thorough description of you know, what’s a hover, what’s a current, what’s a current parent.
Member: Well, that I’m pretty well covered. What I’m looking at is… let’s say you have a menu bar across the top and then you have a submenu below it and how that all integrates within Thesis now… the drop down.
Rick: Well, the submenus take exactly the same colors as the rest.
Rick: Now, if you want the submenu to be different… Let’s go back to the skin editor or Thesis admin and change our skin for a second.
Okay so we’re going to select the skin and let’s select the Thesis classic skin. And actually, before we get too far into this, let’s look at our menus and we’re just going to add a couple of submenu items to this. So right now I don’t have any submenus. So sample page, news… news is already there or views and sample page. I’m just going to add those and I’m going to add them under the about page. Okay so we’ve got 3 submenus now, hit save, refresh the site.
Okay now… so right now, the way the menu is set up is they all you know, all the menu items are the same. But let’s say that I want the submenu to be different. So if I want the submenu to be different, I go back over to Thesis and skin editor and CSS. And what I can do is just create a whole new package, another horizontal drop down menu package, add the package, call this a submenu, give it a reference submenu. And then it’s just going to be submenu instead of menu because WordPress adds submenu in front of submenu items. So we’ll just make this apply to the submenu and now you can say now the links can be blue and the background color could be yellow. And hovered links, text color could be red and the background color to be green.
Make sure that actually got written first. Submenu did get written. Okay so I guess I need to make this one step… although I’m not sure why that’s not working like that.
Member: It couldn’t be a refresh, could it?
Rick: No, I don’t think so. I think it’s related to my menu link here. So if I look for my menu link for just a second, menu link… menu a… okay, cancel. So I’m going to change this submenu. I’m going to make it a little bit more specific, .menu .submenu. This actually makes them the selector more specific and should therefore overwrite or should take precedence over the less specific selector. And it’s not… why is that?
Member: What about important?
Rick: Well, you…
Member: Would you…
Rick: That’s probably the worst possible solution. It certainly is a solution.
Member: Yeah, I know it’s a hack.
Rick: No, no. I misspelled it. I didn’t put a hyphen in there. That’s the problem.
Rick: So let’s come back over here to submenu. It’s sub-menu. I got to get that right and then I killed something… and submenu. Oh, I changed the name of the wrong thing though, sub-menu. I needed to change the class name, not the reference name.
So… well, because it’s got the image in there, it’s still doing the image thing as well. But you can see you know, we end up with a different style because of that.
Member: Well, in this case, how do you remove that image?
Member: Do you have to go in and do… you add that into that element that the package you just created and make sure that the background is none?
Rick: Actually, not background is none. Background image is none. And really, what I would do here is just come over like this, menu a… this is how I would do it. Background image: none. So then you just have to do the same thing to adjust the height because right now, it’s taking the height. And it could be that really, the thing to do with this is actually to change my menu. So my menu probably has some specific things like… did I do menu item padding? So top padding is 45 and 45. So I could change that here in the submenu because otherwise, it’s still getting that information. So padding, top padding… call it 11, 11, 11 and 11… save. And then in my menu link, I could actually be more specific about my selector and I could say the immediate a’s of menu take this reference instead of every a and I could do the same thing with my menu link hover. I could use the menu a hover like that which would then not add the rest of that CSS to the second level of a’s. Yeah so…
Member: There you go.
Rick: Of course.
Member: Thank you for doing that. That’s…
Rick: Of course I lost my images now so…
Member: Well, that could be worked out. I mean, that’s…
Rick: Yeah. In any case, the way to handle this kind of thing really is to go back and you know, add additional styles then. You can add a new one for the submenu.