Editing WordPress 3- Background Menu Color

How we can change default black background of TwentyTen’s menu color to any colors you like by editing the stylesheet css file.

Alan asked this TwentyTen question last week, and i have already uploaded video in YouTube but didn’t have time to create this wordpress post.

Video Tutorial and The steps:

To replace that default black color background, you have to edit the css file. But to be save, copy your TwentyTen’s files, so that if this default theme has updates, your modification files will stay.

1. In your dashboard, go to “Appearance” and “Editor”.

2. Scroll down, and find “stylesheet” file called, “style.css” file in the right bar.

style.css file is the red highlighted.

3. Click that style.css, and copy all the codes to html editor, i use notepad++.
4. In Notepad++ it is on the line 375. (see image)

Line 375 in Notepad++

Replace the code background:#000; with background:#990000;

Result: The background will be replaced with dark red color, but the hover will stay having default color (greyish). If you don’t want to change that color, then you can stop until here, but if you want to change that color, then you can continue reading or watch the tutorial ;)

The background of menu bar is changed, but not the hover.

5. To change the grey default hover menu background’s color, still in notepad++;

In line 423 Replace the code: background:#333 to background:#990000; (so the same color as no.4 above)

Line 423.

Also in line 432, replace the code background:#333 to background:red;

Line 432.

Result: Child menu has same background as the menu bar, and hover color is changed.

End result of TwentyTen background menu color.