In this session we talk about styling sidebar menus in the Agility Skin for Thesis 2 by changing the classes that were added to the widgets. We show how to set this up using Agility widget styles package to automatically take the styles for the sidebar menu.
Member: My next question is, if you click on Products and we’re back to these side menus that I need to create and if you hover over, it’s doing really weird things. It’s not accepting any of the link, colors or background colors that I give it and then when I do get a background color, it highlights the entire thing.
Rick: So this is a widget and…
Member: So I don’t have enough specificity perhaps.
Rick: Are you using that plugin I was talking about, Widgets Reloaded?
Member: Well, I was but when you added the class to yours, it removed the Widgets Reloaded options.
Rick: That did?
Member: I’m thinking it did.
Rick: That would be an interesting problem, let’s just test that for a second.
Member: But I thought the widgets, yes, let me get my thoughts together here. You added the class yourself to this widget, I thought…
Rick: I did and you can do that, right because the 0.6 does provide you with the ability to add a class to the widgets, yes.
Member: Okay, so that’s what I did.
Rick: Okay, and so the class that you added was widget nav menu or sidebar menus?
Member: It was sidebar menus.
Rick: Sidebar menus, okay. And so, sidebar menus then has a color blue, padding top, padding right. Doesn’t look like you’ve specified a link specifically.
Member: You see, that I just did, I did. I’m just going to my skin…
Rick: Well, let’s just see here, I’m sorry. I said it doesn’t appear as if you did. So right now, no, it doesn’t appear to be a link setting for that.
Member: So I set up a links packages, okay.
Rick: But that widget plugin though that has links inside of it where you can set up the link colors and everything inside of that.
Member: Correct and I did that.
Rick: Okay, let’s take a look at it then. I’ll let you be the presenter.
Rick: Pardon me, I was going to make you the presenter again.
Member: One second my screen went black, there we go. Okay so, I’m in my links package .sidebar_menus.
Rick: Okay but no, let’s not use the links package, let’s use the widget and see, it can’t be sidebar_menus, it’s got to be sidebar_menus a.
Member: Okay, well that was another.
Rick: But what you would do is just use my widget, do you have a widget styles that you set up for that?
Member: That was your new one, correct?
Rick: Yes. What I would do here is do all the styles for the menu in this so you’ve got links, hovered links and you’ve got background colors and borders and anything you possibly want is available to you here. This essentially brings together the Thesis widgets package with the links package and with things that neither of them include.
Rick: So for example, you can set all those headings, you can set up your lists inside of this, you can do a border and border radius and drop shadow, all kinds of stuff in there.
Member: Okay, I miss the fact that the links were also in there so okay.
Rick: Yes, and the links have color. Actually, I guess the links always have color but the links are included in this too so it’ll automatically take everything that you give this class of sidebar_menu and it’ll do all the lists, all the headings, everything based on that.
Member: Okay. So now, this supplemental menu styles that you added.
Rick: Yes, that won’t work properly for sidebar menu so it’s intended to be a supplement for the horizontal menu package.
Member: Okay, that’s all I need to know.