How to change the TwentyTen menu colours

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:

MAKE SURE YOU BACKUP YOUR THEME BEFORE MAKING THIS CHANGE

1. Log into WordPress using an administrator account.

2. Now click on “Editor” in the “Appearance” section of the sidebar.

Click on Editor

3. Next, click on “Stylesheet (style.css)” on the right-hand side of the screen.

Open style.css

4. The menu is defined in its own section, which is labelled and therefore easy to find:

The menu section of STYLE.CSS(BILD)

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 background colour

The background colour

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:

The hover background colour

The hover background colour

Similarly, the “color” (note the U.S. spelling!) element in the same section sets the font colour for those items:

The hover font colour

The hover font colour

The main font colour is defined in “#access a” as the “color” item:

The main font colour

The main font colour

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:

The font colour for the current item

The font colour for the current item

You can also change the background colour by adding the following line between the “color” definition and the closing bracket “}”:

background: #000;

(where #000 is the colour to use).

The background colour for the current item

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!

About Graham Tappenden

Graham Tappenden is a blogger from Germany. He has written code for WordPress themes since 2006 and been creating websites since 1994.
This entry was posted in TwentyTen and tagged , , , . Bookmark the permalink.