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:

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 the color as you prefer.

5. Save the changes, and refresh your blog.

We just did change Twenty Eleven Menu background color successfully.