wpvidZ

Learn WordPress With Video Tutorials

  • Blog
  • Browse
    • Backup & Restore
    • WordPress Localhost
    • WordPress Hosting
    • WordPress themes
    • Version Updates
    • Plugin Tips
    • Security
    • Tutorials
    • WordPress SEO
    • WP Miscellaneous
    • Sitemap
  • WP 5+ Tutorial
  • Search
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 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

  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

  • Is my site loading fast? I use this shared hosting
  • Try my theme >

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.

background Black download menu twentyten

Latest Posts

  • Twenty Nineteen Theme Full Tutorial – Creating a Website
  • Uninstall W3 Total Cache Plugin – Incredibly Easy!
  • Create WordPress Website 2018 on SiteGround Genesis
  • WordPress Noopener Noreferrer Rel Attribute Quick Fix
  • WordPress CDN Setup with MaxCDN and W3 Total Cache Plugin
  • Twenty Seventeen One Page Parallax Scrolling Website Style
  • How To Add Google Map in WordPress Contact Page
  • WordPress 4.7 Justify Text and Underline
  • Twenty Seventeen Footer “Proudly Powered By WordPress” Text
  • How To Add YouTube Subscribe Button To WordPress Website
← Twenty Ten Child Theme Easy Tutorial
→ Best SEO WordPress Theme

Comments

  1. Mike says

    September 27, 2010 at 5:13 am

    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

    • Kimi says

      September 27, 2010 at 1:22 pm

      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) 😉

  2. Macnessa says

    October 8, 2010 at 9:19 am

    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

      October 8, 2010 at 10:42 am

      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

    November 4, 2010 at 8:55 pm

    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

      November 5, 2010 at 8:43 am

      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

    December 17, 2010 at 9:15 am

    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

      December 17, 2010 at 10:09 am

      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

        December 18, 2010 at 4:28 am

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

  5. Tor says

    March 14, 2011 at 9:40 pm

    Nice tutorial.

    But how do you change the color of the black line above the header image?

  6. Adis says

    May 18, 2011 at 5:39 am

    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

    July 6, 2011 at 2:33 am

    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

    September 13, 2011 at 12:39 pm

    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

    November 29, 2011 at 10:51 pm

    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.

Search

Worth Reading

  • Twenty Nineteen theme tutorialTwenty Nineteen Theme Full Tutorial - Creating a Website
  • Twenty Seventeen One Page ParallaxTwenty Seventeen One Page Parallax Scrolling Website Style
  • Twenty Seventeen Proudly Powered By WordPress codeTwenty Seventeen Footer "Proudly Powered By WordPress" Text
  • Where your child theme folder should be located inside themesHow To Create WordPress Child Theme Manually or With Plugin
  • How to Remove Twenty Fourteen Author Name or Link
  • How I add thumbnails with Twenty Twelve theme
  • Change Default Green Color WP 2014 Theme
  • Showing Twenty Fourteen Thumbnail in A Smaller Size
  • How To Style WordPress Caption in WP Twenty Fourteen Child
  • Proudly Powered By WordPress Twenty Fourteen

Backup & Restore

Backup WordPress Without a Plugin or FTP

Export WordPress Database using phpMyAdmin

BigDump Alternative – When BigDump Failed Importing Large WP Database

At This Place The Current Query Includes More Than 300 Dump Lines

View All..

Live Online Website

View All..

Offline Installation

How to Upload WordPress localhost to live server manually

Steps to Install WordPress on Windows 8 and WAMP 2.4

Install WordPress on Mavericks OS X 2014

Maximum upload file size in WAMP WordPress

View All..


WPvidz Hosting Image

  • About Me
  • Contact
  • Affiliate Disclosure
  • Privacy Policy
  • Term of Use

Copyright© 2023 wpvidz.com SG2021 | sitemap.xml


WPvidz.com is independent from WordPress.org but is proudly powered by WordPress & its block-based editor (Gutenberg)

WpvidZ.com uses cookies" to give you the best browsing experience possible. If you click "I Accept" below then you are consenting to this. For more information about your privacy settings on this website, please visit the Privacy Policy page. I Accept