Need help? Check out our Support site, then


How to change individual menu button colors

  1. I have the enterprise theme. I'd like to know how to change the color of only one tab of the menu, most likely with CSS.

    The address of the site is http://www.real-agenda.com

    Thanks.
    Blog url: http://realagenda.wordpress.com/

  2. Do you want to change the background color of one menu item? or do you want to use a different color when you hover over an item.

    Also review this guide to learn more about CSS: http://support.wordpress.com/editing-css/

  3. I wanted to change the color of the background of one single item of the menu bar. While I´m at it, I´d like to learn how to do this to every single item of the bar, in case I decide to do so later. As for the hover over I am OK with having one color for all the items and I already learnt how to change it.

    Thanks!

  4. Yes, there's really no direct way to change those. You would need to use CSS through a Custom Design upgrade: http://support.wordpress.com/editing-css/

  5. I have a custom design upgrade already. Can you please walk me through the way I would achieve the changes?

    Thank you.

  6. I wanted to change the color of the background of one single item of the menu bar.

    Each item in the top menu has a specific ID attribute. In your blog, the Technology menu item has ID "menu-item-1255" for example. This means you can change the background color of just that time using CSS like this:

    #menu-item-1255 {
    background: goldenrod;
    }

    Adjust the color as necessary.

    Note that if you wanted to use the hoverimage.gif which you have setup for current menu items and as the background on hover, you can do this instead:

    #menu-item-1255 {
    background-image: url('http://realagenda.files.wordpress.com/2011/11/hoverover.gif');
    }

    While I´m at it, I´d like to learn how to do this to every single item of the bar, in case I decide to do so later.

    To switch to a different menu item other than "Technology", view the page source for http://real-agenda.com/ in your browser, check to see what the ID is for the menu item you'd like to change, and add a CSS for each ID you'd like to update.

  7. Thanks a million. It looks simple. Let's see if I can implement it.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.