Different color menu tabs when highlighted

sugarriversports · Member · Dec 6, 2012 at 3:32 am
Copy link

Add topic to favorites
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: (visible only to logged in users)
designsimply · Member · Dec 27, 2012 at 5:42 am
Copy link
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.
designsimply · Member · Dec 27, 2012 at 5:44 am
Copy link
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/
sugarriversports · Member · Dec 27, 2012 at 7:03 pm
Copy link
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!
sugarriversports · Member · Dec 27, 2012 at 9:33 pm
Copy link
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!

No items found.