Using CSS to change menu bkg & font colors

• 

  walterwalker · Member · Jan 18, 2013 at 5:59 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  designsimply · Member · Feb 7, 2013 at 11:44 pm

  • Copy link

  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.