WordPress.org

Support

Support » Themes and Templates » TwentyTen: Using image replacement for menu div?

TwentyTen: Using image replacement for menu div?

  • I’m still a bit new with the TwentyTen theme and I’m wondering how to use image replacement in my menu div instead of text. I have my own formula using CSS but it’s different than the default classes that come from the menu div. So does anyone know of an effective tutorial on how this works?

Viewing 15 replies - 1 through 15 (of 19 total)
  • 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?

    esmi

    @esmi

    Forum Moderator

    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?

    esmi

    @esmi

    Forum Moderator

    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

    esmi

    @esmi

    Forum Moderator

    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

    esmi

    @esmi

    Forum Moderator

    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;
    }
Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘TwentyTen: Using image replacement for menu div?’ is closed to new replies.