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.
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.
If You Use Older Version Than WP 4.7
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”.
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)
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.
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.
That’s it, now you have a Twenty Ten theme with other menu background colour.
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
Hi Mike,
Yes there is a way by applying body class style. Article: http://www.nathanrice.net/blog/wordpress-2-8-and-the-body_class-function/
I have tried it, demo as result: kimi9.byethost32.com/about/ (if it is not yet suspended) 😉
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.
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.
Nice and easy good tutorial made it quick for me to change the navigation color and Im a newbee in WordPress.
Thanks 🙂
Frank
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.
Hi, thanks, this is simple and helpful.
Now I’d like for the menu background colors to be different for each menu item. Possible?
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.
I found this helpful today in targeting specific menu items:
designisphilosophy.com/tutorials/highlight-current-page-or-category/
Nice tutorial.
But how do you change the color of the black line above the header image?
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
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