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 Twenty Eleven Menu Background Color WordPress Video

WordPress themes

Twenty Eleven Menu Background Color WordPress Video

Last updated on February 18, 2017
Posted on November 18, 2011

Twenty Eleven Menu Background Color – Dark Color by Default

This tutorial has been a bit special for me, because I really wanted to create it long time ago, as it is simple and does not require a lot of time to make a screencast or video tutorial.

However, I have been so busy lately, and always replaced by some other posts which I got first in my head.

Using default theme wordpress current version, 3.2.1 is kind of cool, but for a few people might be a bit boring, as it has same colors for those who use this template.

By creating child theme, you can actually modify the color or editing style css file, so at least you can tweak the default colors as you want it to be.

Small example, like today, we are going to change the menu background color of Twenty Eleven, which is by default (once you installed wordpress) is having dark gradient navigation color, which I personally think it is almost black like night without stars..

At the very first time, I had this theme activated in my blog, I was excited in a lot of things, including so many options it has in the back-end, but also I had a thought immediately in my mind, about changing that dark color.

Before we change menu background color in Twenty Eleven

If you are a wordpress blogger or currently own a website that you built with WP, and you are using Twenty Eleven theme, this tutorial can be an alternative to tweak a simple thing in your website.

If you don’t use this default theme, then this tutorial will not work, if you follow the exact steps.

But if you see me using Firebug, one of my favorite Firefox Addons to inspect a site’s element, and then apply to your current theme, then it is possible to achieve what you want to do with the theme. (for instance, if you use Twenty Ten, you can follow this background menu twenty ten theme tutorial)

Before we go to the steps of how to change menu background color Twenty Eleven, I have promised in the video to post a quick link to a small tool which helped me choosing color.

This small application is called, Hexa color finder 3.0 which you can download here.

Things I have to mention before you go to the steps and watch the video tutorial;

First, I am using a child theme in this tutorial, which is very recommended if you work with TwentyEleven theme, the reason is, as we all know wordpress developer may make changes in the theme, and if we don’t create a copy or child theme, our modification will be just gone.

Another one, is you can access the “themes” folder via FTP client (my favorite is FileZilla) or via cPanel directly in your webhost.

I know for some people this is very simple, however, I received many questions from YouTube or contact page, about “how do I access this or that folder”.

One tutorial that might help how to use FileZilla, is uploading files with FTP tutorial.

If you need further assistance with FTP client, you can also ask your host.

Steps how to change Twenty Eleven Menu Background Color

Screenshot of the result:

menu background color
From dark color to green

Video tutorial

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

Steps:
1. Creating Child Theme

2. Access child theme folder, in this tutorial I created “MyTwentyEleven” folder.

3. Open style.css file with a text editor, or code editor if you are in your cPanel. (in the video, I use code editor).

4. Add this code in the style.css file: (see screenshot below)

#access{
background:#015E00;
border-bottom:1px solid #619B60;
}

change menu color twentyeleven
The code we add

Change the color as you prefer.

5. Save the changes, and refresh your blog.

We just did change Twenty Eleven Menu background color successfully.

color gradient menu twenty twenty eleven

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
← Related posts based on category video tutorial using Twenty Ten theme
→ What is a Child Theme and Should I use a Child Theme [WordPress]

Comments

  1. Suresh Khanal says

    November 21, 2011 at 4:04 am

    Nice post Kimi. I appreciate your skill of building up interesting paragraph even for short content. Though this post is about changing menu background color, it has some useful side information. Knowing a bit of HTML and CSS makes a blogger more powerful.

    • Kimi says

      November 22, 2011 at 7:02 am

      Hi Suresh!

      Thanks for the compliment, this is because I use SEOPressor like you do lol..

      In the past, I am too lazy writing too long though, this can be noticed in my old posts from last year 🙂

      Thanks for leaving a comment!

      Best wishes

      Kimi

  2. Miki says

    November 28, 2011 at 12:10 am

    Köszönöm szépen! Szép leírás, sikerült megcsinálni!

  3. Jochen says

    January 16, 2012 at 12:29 am

    Hi Kimi.
    Thanks for your Tuto. I tried it, but nothing happened. I’m running Twenty Eleven 1.3 on WP 3.3.1_de. I checked via FTP, the new css was placed on the server correctly. Whats about the other background entries?
    ===
    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    ===

    Regards
    Jochen

    • Jochen says

      January 16, 2012 at 10:56 am

      It’s workin now. I first worked in the theme-css. Now I’m on a child-css and all is fine.

      Regards
      Jochen

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