wpvidZ

Learn WordPress With Video Tutorials

wpvidZ Blog WordPress themes Editing WordPress 3- Background Menu Color
Menu background, hover colours changes

WordPress themes

Editing WordPress 3- Background Menu Color

Last updated on
Posted on

If you use Twenty Ten and WordPress 4.7 or newer, you can put the css code in this tutorial, directly to your Additional CSS file. See this feature on my post about WordPress 4.7 new features a few weeks ago.

With WP 4.7 or newer, you don’t need a child theme to do this, use your “Additional CSS” feature!

Steps To Change Twenty Ten Menu Colour With WP 4.7 or Newer

  1. Click on “Customize” button on your top bar, while you are logged in.
  2. Click on “Additional CSS”.
  3. Copy and paste the CSS codes below (on the step (3) – scroll down or the one with the transition colour in the end of the post) in that “Additional CSS” tab, as shown in the picture below.
  4. Click save button, and close the customizer, check your site. Clean browser cache if it does not show the change you’ve made.
If you use WordPress 4.7 or newer, you can use Additional CSS to change the background menu color
Use “Additional CSS” feature

If  You Use Older Version Than WP 4.7

If you use older version of WP, you will need a child theme.

Please create Twenty Ten’s Child Theme first before you do this. You can either follow Twenty Ten Child Theme post, or my recent tutorial to create a child theme can be found here. Or download the Twenty Ten Child that I have created and uploaded in DropBox here. NO need to register, just skip and download

Video Tutorial

To replace that default black color background, you have to edit the css file. But to be save, create a child theme first the link to my tutorial is above ↑ in the beginning of this post. So that if this default theme has updates, your modification files will stay.

Positioning Twenty Ten background Image

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

Appearance/Editor.

2. Make sure, you are selecting the child theme , you can look where it says, “Select theme to edit”, and it should be Twenty Ten child in the drop down menu (1) → See numbered spots in the screenshot below.  Make sure the stylesheet file which is called style.css file is selected or highlighted (2) then the correct file is opened and ready to be edited (3)

Changing Twenty Ten menu background colour
Using the Child Theme

3. Click that style.css, and below the */ code (4), you can add this code:

/*This is the line of code that changes the background menu colour and hover background colour*/
#access {
background-color: #900303 !important;
}

#access li:hover > a,
#access ul ul :hover > a {
background: #b31010!important;
}

#access ul ul a {
background: #900303 !important;
}

/* Removing border bottom of image header */
#branding img {
border-bottom: none !important;
}

Basically I Replaced the code background:#000; with background-color:#900303; and add the !important so that the style of the child theme will be applied as an important style.

Then, I also remove the black thin border above the menu bar, which actually belongs to header image.

Alternatively, you can alter your child theme functions.php to make the child theme override the parent theme immediately, to avoid adding !important, see the codex page.
Adding Transition Colour Changes

I think adding transition colour changes add a bit nicer delay soft changes, try it. You can add transition: background-color 0.5s ease; to each background colour targeting the menu, so this is the whole code you want to add instead the above code.

/*Changing the background menu colour, hover colour of menu*/
#access {
	background-color: #610303 !important;
}

#access li:hover > a, #access ul ul :hover > a {
    background-color: #980505 !important;
}

#access a, #access ul ul a {
    background-color: #610303 !important;
    transition: background-color 0.5s ease;
}

#branding img {
    border-bottom: none !important;
}

Result: the menu background colour is now no longer black and the hover colour will be a lighter colour than #900303, which I chose #b31010 and it has nice transition colour delay.

Menu background, hover colours changes
Menu background, hover colours changes

That’s it, now you have a Twenty Ten theme with other menu background colour.

Latest Posts

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

    • Kimi 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

    • Kimi 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?

    • Kimi 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/

  6. Adis 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

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

  8. Keith 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

  9. lisa 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

Comment form on this post is closed after 60 days.