WordPress.org

Forums

TwentyTen: Using image replacement for menu div? (20 posts)

  1. databell96
    Member
    Posted 4 years ago #

    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?

  2. Digital Raindrops
    Member
    Posted 4 years ago #

    Try this tutorial

    HTH

    David

  3. databell96
    Member
    Posted 4 years ago #

    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.

  4. databell96
    Member
    Posted 4 years ago #

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

  5. hoplink
    Member
    Posted 4 years ago #

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

  6. wambamboo
    Member
    Posted 4 years ago #

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

    Thanks heaps.

  7. wambamboo
    Member
    Posted 4 years ago #

    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?

  8. esmi
    Forum Moderator
    Posted 4 years ago #

    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.

  9. wambamboo
    Member
    Posted 4 years ago #

    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?

  10. esmi
    Forum Moderator
    Posted 4 years ago #

    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.

  11. wambamboo
    Member
    Posted 4 years ago #

    Cool, thanks.

  12. wambamboo
    Member
    Posted 4 years ago #

    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

  13. wambamboo
    Member
    Posted 4 years ago #

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

  14. esmi
    Forum Moderator
    Posted 4 years ago #

    Try styling on .current_menu_item

  15. wambamboo
    Member
    Posted 4 years ago #

    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

  16. esmi
    Forum Moderator
    Posted 4 years ago #

    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;
    }
  17. wambamboo
    Member
    Posted 4 years ago #

    Esmi, it's people like you that make the web go round. Thanks so much.
    Don't know if it will help anyone else but this was my final solution on the active links:

    #access ul li.current-menu-item.page-item-10 > a,#access ul li.current-menu-item.page-item-10 > a:hover,#access ul li.current-menu-item.page-item-10 > a:active {
    	background-position: -700px center;
    	cursor: default;
    }
  18. esmi
    Forum Moderator
    Posted 4 years ago #

    Glad to hear that you got it working :-)

  19. mcmahant
    Member
    Posted 4 years ago #

    esmi,
    I could kiss you. That was PERFECT. I tried so many different things. I had given up hope.

    to add just a little bit more info, using Firebug you can figure out what the current page item is for each menu item. So for wambamboo he needed to use #access ul li.current-menu-item.page-item-10 But that will change for every page.

    So the only part of the code that will really work universally is
    #access ul li.current-menu-item.page-item-XX

    Change XX to your current page number.

    databell96,
    I think there should be a special kind of punishment for people who ask a question on a support forum, find an answer on their own, let everyone know they found an answer AND THEN DON'T SHARE THE ANSWER. [head-slap]

  20. close
    Member
    Posted 4 years ago #

    databell96 did post a link but he forgot to give it a readable name so it's not visible. Here is the link again. Scroll down to the comments section to find the same solution as described here.

Topic Closed

This topic has been closed to new replies.

About this Topic