WordPress.com

1. karenlouisecummings
   Member
   Aug 19, 2012, 1:23 PM

   I’ve set up a brand new blog and have taken out the custom CSS upgrade so that I could make a teensy-tiny change to the navigation menu colors (which I was able to do using the color changer – love that feature by the way) but there is one thing that I can’t change through that and need to add the code to the CSS page instead – which is a bit of a problem because I know next-to-nothing about CSS!! Most of my very little experience comes from trial and error!

   If you go to my blog and click on ‘Features’ and then hover over it again you will see the dropdown background is pale with white text (which is not easy to read) and when hovering over them you will see the background changes to a darker color with even darker text. What I would like to do is switch the text colors over so that it’s white text on the darker color and dark text on the lighter color. Basically so that it is consistent with the rest of the navigation when, for example, you’re on the main page. Make sense? If so, I would appreciate any help as I am a lost cause when it comes to figuring these things out on my own even though I know it’s probably fairly easy. Thanks in advance.

   I’m using the Ever After them. Thanks!

   The blog I need help with is karencummings.net.

2. zandyring
   Staff
   Aug 20, 2012, 1:34 PM

   The theme stylesheet currently has an entry that looks like this:

   .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a {
       background: none repeat scroll 0 0 #EEEEEE;
       color: #777777;
   }

   The first part (before the stuff in curly braces) is the thing being targeted by the CSS (which is, basically, the stuff inside the curly braces). So this affects your main navigation list items on the current page that is an anchor, and the main navigation list items with the current menu item selected as an anchor. That's when you click on "Features" and you're on the Features page, how the list will look then.

   So if you add this to you CSS stylesheet (then click "preview" instead of "save stylesheet," so you can make sure it's just what you want), you should be all set:

   .main-navigation li.current_page_item a, .main-navigation li.current-menu-item a {
       background: none repeat scroll 0 0 #A9C3C6;
       color: #777777;
   }

   Since your added stylesheet takes precedence over the original, your code will overwrite the original. Notice that when you do this, it makes the background of "Features" teal when you are on that page - just FYI.

   I hope this helps!
   -Z

3. karenlouisecummings
   Member
   Aug 21, 2012, 6:48 AM

   Thank you.

Topic Closed

This topic has been closed to new replies.