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”.

Appearance/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.

Comments

  1. Mike says

    Hi,
    Great site. I am wondering, is there a way to change the color or add an image to individual pages? Not the background, or menu, but the pages. I looked under Pages on the WordPress Dashboard, but could not find a setting. I am creating a self hosted site.

    Thanks

  2. says

    Thanks for this great post – I’ve just successfully changed the colours on a friends site – but now I want to know how to change the link text colour and the visited link text color, as well as the Text that is above the header in the 2010 theme. Do you have a post explaining that? Just point me in the right direction if you can – thanks! (I just need to know where in the stylesheet to find the right bits). There are also a couple of lines in the theme that are very bold and black and I’d like to change those as well.

    • says

      Hey Macnessa,

      To change the color of link text, it depends on what you aim for. If you want to change the whole links including in sidebar text, then it is in style.css file which says, a link code.

      Or if you want to change only text link in the content then we need to put a class div color, as well as the continue reading text link color.

      I will make a video tutorial in the next days about it, subscribe if you like, it is free. Also please reminds me if i forget because i have many people ask some questions, I will be happy to be able to help!

      Thanks for visiting.

  3. Frank says

    Nice and easy good tutorial made it quick for me to change the navigation color and Im a newbee in WordPress.

    Thanks :-)

    Frank

    • says

      Hello there Frank!

      I am very glad that my tutorial was easy to follow and help you to change the navigation of your blog.

      I was once newbie too, and like you, i love WordPress more each day.

      Thanks for leaving nice words, Frank, talk to you soon.

  4. Seho says

    Hi, thanks, this is simple and helpful.

    Now I’d like for the menu background colors to be different for each menu item. Possible?

    • says

      Seho,

      Yes, it is possible, see my “free services” tab, it has different style than the others by applying page id class.

      Thanks for leaving the comment.

      • Seho says

        I found this helpful today in targeting specific menu items:
        designisphilosophy.com/tutorials/highlight-current-page-or-category/

  5. says

    another awesome tutorial, got the menu changed but did not use “red” or wording for hoover, worked fine with #.
    Still looking for a way to make rounded corners cross browser, used your other guide but works only in FF. Surprising most ppl still use IE :-(
    anyways,
    thank you again

  6. says

    Thanks, I looked at several solutions to this that did not give full clear details of how to change the colours in plain English.Really annoying, thanks to your clear instructions I did this within 5 minutes.
    Still not sure what shade is best though.

  7. says

    Thanks again for helping me out with such amazingly clear and easy to understand tutorials for WordPress. You’re brilliant and it is a fantastically helpful site. Thank you so very much.
    Kind regards
    Keith

  8. says

    I am new to wordpress and I am trying to change the menu bar color and hover color. I have look in my css and can’t seem to figure it out.
    Sincerely,
    Lisa

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">