How to: WordPress – Different Background Colors for Different Pages

By Konstantin, August 16, 2011

I came across this idea while working on one of our themes that had to have different body colors for different pages, like a red body on the home page, a yellow one on the contact page, a blue one on the archives page and so on. Of course this would be easy to achieve if we were working on a website where we knew all the existing pages, their IDs or slugs and I’ll talk about this too, but today I’ll show you a different approach.

This post will teach you how to output the current menu item number (in the menu order) in the body element classes in your theme. We will then use the class to give a different background color to each page according to it’s position in the navigation menu. Note that this will work only with wp_nav_menu but can easily be modified to the fallback pages walker if a menu is not set.

Read full article: WordPress Tricks: Different Colors in Different Menu Items

—
Custom menu tab colors in Twenty Ten – This was also very helpful when customizing the Bunch WordPress theme’s menu to display a different hover color for each menu item. I grabbed the menu item’s ID number by hovering over the name of the Page in the WordPress admin.

Specifically, see hallluke’s response. This is what I ended up with:

.nav a:hover { background: #f8f8f8; } /* ORIG hover color */
.nav #menu-item-44 a:hover { background: red; } /* About Us page hover color */
.nav #menu-item-24 a:hover { background: orange; } /* Our Services page hover color */
.nav #menu-item-27 a:hover { background: green; } /* Our Work page hover color */