TwentyTen: Using image replacement for menu div?

Try this tutorial

HTH

David

This really isn’t what I was looking for. This only makes one graphic for the background with plain text for the foreground. I want complete image replacement. One image for each button. Graphics and all. So the About Us graphic should be about.gif and the Contact Us graphic should be contact.gif. This just seems to use the same graphic over and over again.

OK, Found a tutorial that for the most part, explains what to do. And it works:

Hi, would you mind sharing the link to the tutorial you found? Thanks

So close, yet so far away. Would anyone mind posting this tutorial or similar.

Thanks heaps.

If I were to use Firebug to find out what IDs WordPress has given the various menu items and then target them using these (eg “menu-item-28”), would this work? Or is there a more elegant solution?

Don’t edit the Twenty Ten theme! Your changes will be over-written the next time you upgrade WordPress or the theme. For this reason, it is recommended that you consider creating a child theme for your customisations.

Thanks for your response Esmi. I have no intention of editing the twentyten theme. I have created and have been using a child theme. I was planning to use the solution I suggested above in my child theme. Bad idea?

On the contrary – that’s exactly what I would suggest. ?? But I can’t think of a more elegant solution than simply targeting the individual menu classes/ids.

Cool, thanks.

Having a bit of trouble targeting the current page. Should the selector look something like this?

#access ul.menu li.menu-item-28 a.page-item-10,#access ul.menu li.menu-item-28 a.page-item-10:hover,#access ul.menu li.menu-item-28 a.page-item-10:active

I just cannot target the active menu item. Does anyone have any advice?
Thanks

Try styling on .current_menu_item

Yeah… I’ve been trying all sorts of permutations of this, nothing seems to be happening. The home page active class is page-item-10. So I would expect this to work, but it’s not:

#access ul li.current-menu-item a.page-item-10 {
	background-position: -700px center;
	cursor: default;
}

Thanks

The .page-item-x class is applied to the li tag – not the a. Try:

#access ul li.current-menu-item.page-item-10 > a {
	background-position: -700px center;
	cursor: default;
}