Editing WordPress 3- Background Menu Color

Last updated on February 18, 2017 Posted on September 15, 2010

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

Click on “Customize” button on your top bar, while you are logged in.

Click on “Additional CSS”.

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.

Click save button, and close the customizer, check your site. Clean browser cache if it does not show the change you’ve made.

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.

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)

Using the Child Theme

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

CSS

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

/*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-color0.5sease;

}

#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

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

Comments

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

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!

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

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.

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

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.