WordPress.com

1. madisonkate08
   Member
   Mar 19, 2012, 4:18 PM

   Hi, I am trying to change the background and text color for my main menu and hover/dropdown tabsin the Forever theme. My site is madisonkatephotography.wordpress.com.

   I saw a similar post about this, but couldn't figure out how to apply it to my page. (http://en.forums.wordpress.com/topic/changing-the-hover-color-for-main-menu-in-the-sundance-theme?replies=6#post-832872)

   The hover background color and dropdown menu are currently black, but I would like it to be a light blue. I'd also like to change the dropdown text to a different color. Here is my current CSS for the main menu:

   .menu {
   font-family:Trebuchet MS,Arial,Helvetica,"Nimbus Sans L",sans-serif;
   font-weight:bold;
   }

   #access ul li.current_page_item > a,#access ul li.current-menu-ancestor > a,#access ul li.current-menu-item > a,#access ul li.current-menu-parent > a {
   color:#3366CC;
   }

   #access a {
   color:#3366CC;
   }

   #access li:hover > a,#access ul ul:hover > a {
   color:#FFFFFF;
   }

   Any help would be appreciated!

   The blog I need help with is madisonkatephotography.wordpress.com.

2. designsimply
   Staff
   Mar 28, 2012, 12:01 AM

   CSS needs to be theme-specific, and the other forum post you mentioned is CSS that works for the Sundance theme and so that's why you had trouble with it.

   Not to worry! Changing the menu colors in the Forever theme is similar, except you just have to use the selectors that match the theme you're working in.

   Here is an example for how to change the currently selected menu item as well as the hover background and font color for top level menu itesm:

   #access li.current_page_item a,
   #access li.current-menu-item a {
   	background: AliceBlue;
   	color: #777;
   }
   
   #page #access li:hover > a {
   	background: AliceBlue;
   	color: #1982D1;
   }

   Or if you wanted to change all of the background and font colors for all of the parts of a menu possible, including submenus, then you would want to use the following CSS and replace all of the color codes and names with colors of your choice:

   #access {
   	border: 3px double #eee;
   }
   #access a {
   	color: #000;
   }
   #access ul ul {
   	background: #000;
   	-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
   	-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
   	box-shadow: 0 3px 3px rgba(0,0,0,0.2);
   }
   #access ul ul a {
   	border: 1px solid #222;
   	color: #ccc;
   }
   #access li.current_page_item a,
   #access li.current-menu-item a {
   	background: AliceBlue;
   	color: #777;
   }
   #access li.current_page_item ul a,
   #access li.current-menu-item ul a,
   #access ul ul li.current_page_item a,
   #access ul ul li.current-menu-item a {
   	background: transparent;
   	color: #ccc;
   }
   #page #access li:hover > a {
   	background: AliceBlue;
   	color: #1982D1;
   }

   For reference, I found what CSS to use by looking at the "=Menu" section of Forever's original stylesheet and just copying any rules under that section that had colors listed in them: https://s-ssl.wordpress.com/wp-content/themes/pub/forever/style.css?m=1330663023g&minify=false

Topic Closed

This topic has been closed to new replies.