The menu bar in TwentyTen is, by default, black with white and grey text.
These colours are defined in the STYLE.CSS file in the theme directory, which can be edited in WordPress administration panel.
Each part of the menu is defined separately. Here is a how to change the colours, with a guide to which part of the style sheet changes which part of the menu:
1. Log into WordPress using an administrator account.
2. Now click on “Editor” in the “Appearance” section of the sidebar.
3. Next, click on “Stylesheet (style.css)” on the right-hand side of the screen.
4. The menu is defined in its own section, which is labelled and therefore easy to find:
5. Now we can change the colours, by editing the relevant sections.
Changing “background” in the #access section sets the background colour for any unselected menu items:
The colour is defined by the three letters or numbers between the hash (#) and the semi-colon (;). These stand for the amount of red, green and blue in the colour, so #000 is black, #f00 is red, #0f0 is blue, #00f is green and #fff is white. “f” stands for 15, as each colour is measured on a scale of 0 to 15, with 10 to 15 being replaced by a to f respectively.
Further down the file, the section “#access li:hover > a” also has a background element, which sets the background colour for any menu items that the mouse goes over:
Similarly, the “color” (note the U.S. spelling!) element in the same section sets the font colour for those items:
The main font colour is defined in “#access a” as the “color” item:
The font colour for the current page or category is defined in a section called “# access ul li.current_page_item”, where it is the “color” item:
You can also change the background colour by adding the following line between the “color” definition and the closing bracket “}”:
(where #000 is the colour to use).
These few options should allow you to change all of the colours of the menu bar in its simplest form. The colours for any sub-menu items are defined separately, and I’ll explain those in a future post.
If I have missed out anything on the menu bar that you would like to change the colour of, leave me a comment and I’ll look into it!