ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   HuskerLiz
   Member

   I found the following link extremely helpful in changing background and font colors at most levels of the sf menu:
   http://themeshaper.com/forums/topic/help-with-css-styles-for-drop-down-menus-in-thematic-09#post-2235

   However, I am still stymied for the font color at the top level. I have added a background for the top level only. Changing the font color in that same selector didn't work, so I added a 2nd selector to address the color only. But that didn't work either. All of the "hover"s and "a"s work just fine at all the levels, but I want to have a white font color over the background graphic that I've used.

   I would greatly appreciate your help with this.

   Posted 3 years ago #
2. 

   EvilEsq
   Member

   Menu items are links "a" and you will probably also want to change the visited color as well. Here are css selectors I changed. I've tested this in ff, chrome and IE8. Based on a comment in the css, there maybe an issue with prior versions of IE.

   .sf-menu a {
   color:#fafafa;
   }

   .sf-menu a:visited {
   color:#fafafa;
   }

   Posted 3 years ago #
3. 

   HuskerLiz
   Member

   Thanks EvilEsq. This works except for when I hover over a link that is not the current page link and it has no submenu.

   I'm traveling right now and will not be able to test until about 15 hours from now. I'll have time then to see if maybe I have something else in my css that counteracts this.

   Posted 3 years ago #
4. 

   EvilEsq
   Member

   Add this:

   .sf-menu ul a:hover {
   color:#fafafa;
   }

   Also, I'm changing the background color of the menu in the hover state. If you'd like to do the same, add the following:

   .sf-menu li:hover, .sf-menu li.sfHover,
   .sf-menu a:focus, .sf-menu a:active, .sf-menu a:hover {
   color:#000; /* changes font color to black */
   background:#fafafa;
   outline:0;
   border-bottom-color:#fafaf;
   }

   .sf-menu ul a {
   background:#fafafa;
   border-bottom:none;
   }

   One caveat.. I'm not using the Thematic default.css If you are, and have any issues, you should to check to see if there are any conflicting properties between default.css and your child theme's style.css

   Posted 3 years ago #
5. 

   HuskerLiz
   Member

   Thanks for the clarification. I'm still doing some testing on my site and will let you know if I have any additional questions. For now, I am changing this to "resolved".

   Posted 3 years ago #

RSS feed for this topic

Reply

You must log in to post.