WordPress.com

1. sugarriversports
   Member
   Dec 6, 2012, 3:32 AM

   I'm hoping to customize the colors of the main menu tabs when highlighted.

   As of now, all tabs show up orange. I'd like to have the tab labeled "Stevens" turn a soft red, and the tab labeled "Sunapee" turn a soft green.

   Likewise, it would nice to correspond those colors with the "Popular", "Latest" and "Comments" tabs on the widget below.

   Thank you.

   The blog I need help with is sugarriversports.net.

2. designsimply
   Staff
   Dec 27, 2012, 5:42 AM

   You can adjust the hover color for menu links in the Delicious Magazine using CSS. First, you'll need to view the page source and find the HTML for the menu. Most modern browsers and an option for that built in if you right-click the item and click "Inspect Element." I looked at your home page source and I found that the first menu item has an ID of "menu-item-204", the second one has "menu-item-201", and the third has "menu-item-198". Then I checked same page source using the browser web inspector tool to see how the background color for the menu links and I found there are several selectors. I copied what I found and added the ID values to the front of each one to come up with this:

   #menu-item-204 a:hover,
   #menu-item-204.current_page_item a,
   #menu-item-204.current_page_parent a,
   #menu-item-204.current-menu-ancestor a,
   #menu-item-204.current-menu-item a,
   #menu-item-204.sfHover {
       background: #f7dddd;
   }
   
   #menu-item-201 a:hover,
   #menu-item-201.current_page_item a,
   #menu-item-201.current_page_parent a,
   #menu-item-201.current-menu-ancestor a,
   #menu-item-201.current-menu-item a,
   #menu-item-201.sfHover {
       background: #ffe4b5;
   }
   
   #menu-item-198 a:hover,
   #menu-item-198.current_page_item a,
   #menu-item-198.current_page_parent a,
   #menu-item-198.current-menu-ancestor a,
   #menu-item-198.current-menu-item a,
   #menu-item-198.sfHover {
       background: #ddf7de;
   }

   Try adding that example to the bottom of your Appearance → Custom Design → CSS editor. Note that you can adjust the color codes as necessary.

3. designsimply
   Staff
   Dec 27, 2012, 5:44 AM

   Likewise, it would nice to correspond those colors with the "Popular", "Latest" and "Comments" tabs on the widget below.

   I don't see those areas in the widgets at http://sugarriversports.net/

4. sugarriversports
   Member
   Dec 27, 2012, 7:03 PM

   For starters, thank you sooo much! You obviously know what you're doing. ... The only issue I ran into applying your code was selecting the color for the first menu item (Stevens). The last two menu items worked fine, but the first resorted to the default grey color I had selected under the custom design - edit color option. (Before I applied your code, that grey color showed up with all three menu items.)

   In the meantime, I changes the default color to the red I was looking for, however, it know uses that red in that category font on the stories below my menu. Is there a way I can keep the grey color for my category font, and simply apply the color coding for the first menu like your code intended?

   Also, after I applied the code the dark grey space above my secondary menu on the top of the page doubled. Not a big deal, but I was wondering if you knew how I could change that.

   Thanks again for your help. I really appreciate it!

5. sugarriversports
   Member
   Dec 27, 2012, 9:33 PM

   Scratch that. I figured out the color issue — just a code error on my part.

   The only remaining issue is that extra grey space above the secondary menu (About, Photos, Contact Us...) on top of the page.

   Thanks again!

Topic Closed

This topic has been closed to new replies.