Image Buttons on Vertical Page menu
 

Used to do this easily but I've been away from it for so long I've forgotten. can't find it in the forum but I know there is a way to replace the Gray/Black rectangle next to a page menu item and make it an image that alternates upon roll-over.

if someone could refresh my memory of what CSS I need to do that, I'd appreciate it!

Nick

/no one knows the answer to this? Really need help on this.

Are you talking about the sidebar?

Yes, When I put a Page menu there the gray background bars (to the left of each menu item) that are there now, I'd like to replace with graphics with a simple roll-over. I'm embarrassed to say I at one time knew how to do this and remember it was relatively simple. But I've not built a site for over 18 months and don't have the CSS Insert sitting around any longer. Would greatly appreciate any assistance.

I think you are looking for HOWTO: use CSS list style types (or widgets, bars, bullets and squares oh my)

Thanks this helped get rid of the gray bars, but does not cover how to add an image in there place.

well you could add a background image to the menu li

Yeah, like I said at the start, long time since I've done this and I'm clueless. I've searched through the forum for hours, I've tired dozens of things and nothing. Just trying to put an image to the left of a vertical nav menu.

Thanks for trying. I'll just have to hire someone to fix this for me.

seriously? I just gave you the answer. add a 'background-image' to the CSS selector 'menu-item' like
you may have to position the <a> to the right a little

Juggledad, Not trying to be snarky, I was just out of time to spent on this. your assistance in the past and now is greatly valued and appreciated! I am not a coder and have forgotten what little CSS I knew in the past. I did really look and try quite a few things including your nicely written guide I found <color coded...>. I'll try some additional things today but at some point I need to cut my time loss on this. I'm sure it's something little I'm doing wrong but again, thank you for your assistance.

where did you come up with '#menu'?

I've just banging around other sites looking for clues on how to do this.

you should use firebug and look at what is actually being used.

If you could just confirm if this goes in the CSS Insert section that would at least send me in the right direction.

i think I'm on the right track. thanks

OK, Slowly but surely. Used what you gave me with some code found on other site to create a roll-over. Now need to figure out how to make the image/menu height taller to accommodate a taller image and more vertical spacing. thanks again

.menu a { color:#666; padding-top:0.9em; text-indent:2.4em; border:none; background: url('http://yourURL.com/wp-content/uploads/2013/05/Green-hand.jpg') 0 0 no-repeat !important; }

.menu a:hover, .menu .current a:hover { color:#666; background: url('http://yourURL.com/wp-content/uploads/2013/05/red-hand.png')0 0 no-repeat !important;}.menu-item {
padding:0 1.2125em 0 2.8em;
}

Got it!

.menu a { color:#666; padding-top:0.9em; text-indent:2.4em; border:none; line-height: 40px; background: url('http://yourURL.com/wp-content/uploads/2013/05/Green-hand.jpg') 0 0 no-repeat !important; }

.menu a:hover, .menu .current a:hover { color:#666; line-height: 40px; background: url('http://yourULR.com/wp-content/uploads/2013/05/red-hand.png')0 0 no-repeat !important;}.menu-item {
padding:0 1.2125em 0 2.8em;
}