Need help? Check out our Support site, then


Using CSS to change menu bkg & font colors

  1. I am considering changing the header image on The Fundraising Coach blog at http://eddiethompson.org. To make what I have in mind work, I need to use CSS coding to change the color of the menu bar to gray and the font to black. I assume this would change the drop down menus as well.

    What code would I paste into the CSS editor to accomplish this?

    The blog I need help with is eddiethompson.org.

  2. You'll probably also want to change the hover color for menu items. Here is a set of CSS you can start with that contains all of the color-related rules for the main menu in the Twenty Ten theme:

    #access {
    	background: #999;
    }
    #access a {
    	color: #000;
    }
    #access ul ul {
    	box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.5);
    }
    #access ul ul a {
    	background: #999;
    }
    #access li:hover > a,
    #access ul ul :hover > a {
    	background: #333;
    	color: #fff;
    }
    #access ul li.current_page_item > a,
    #access ul li.current_page_ancestor > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    	color: #fff;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current_page_ancestor a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    	color: #fff;
    }

    Replace the color codes with colors of your choice.

Topic Closed

This topic has been closed to new replies.

About this Topic