Support » Theme: Twenty Thirteen » Color of the menu bar and widget area

  • Resolved cpagh



    How do I change the color of the menu bar and widget area?

    Best regards

Viewing 8 replies - 1 through 8 (of 8 total)
  • Do not edit the Twenty Thirteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

    Thanks esmi, I am using a child theme I have modified the child of course. But would really like to know how to change the background colour of the Widget area. As you can see from my site I have changed the background colour of the footer (Primary) widget area.
    But have had no success pinning down in the css where to change the background colour of the secondary widget area (Sidebar)as per my pages other than the home page.
    Kind Regards

    a further problem is that the Colour of the text in the footer is either transparent or white so I need also to be able to make it black.

    Hi dpeel,

    If you want to change the color of the entire header you can target the id #masthead or the class .site-header (for this to work I believe you would need to remove the background image). If you want to change only the nav you should be able to target the class .navbar.

    Are you familiar with dev tools? They are very helpful for this sort of thing. In Chrome right click on any element of a webpage, and click inspect element and you’ll see below all the html of the page and be able to find the different id’s and classes of each section. This way you’ll be able to easily find what you need to target to change colours.

    If you are using firefox I would download firebug for this purpose.

    Hope this helps

    Thanks bouinfrederic, I have firebug in Firefox, that however is not what I use to edit the CSS file .style in my child theme. I just use a text editor. I am interested only in changing the background colour in the Sidebar (known as the secondary widget area) as you can see if you look at the site mentioned in my first post the sidebar has a pale manilla colour background I want it to be White. And with the Footer (Primary widget area I have achieved this happy state. But the text is not visible so I need to change the colour of the text to Black. All this will be done in the .Style css file of my twentythirteen child theme.

    What I mean is through using firebug you can find and target the specific css classes and ids you would need to edit. Say if you can’t figure out how to change the colour of a specific title on your website all you need to do it right click on it in firefox, click “inspect element in firebug” and firbug will tell you it’s properties. For example, it might be <h1 class=”mainTitle”>the title</h1>. Then you know that if you go to your css in your editor and type:

    .mainTitle {
           color:  "red";

    Then the colour of .mainTitle will be red. You can do that with any element, you can even change the colour directly in firebug to preview what it will look like before going and making the change in your editor.

    Thanks for the help.



    I want to change All the black to red

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Color of the menu bar and widget area’ is closed to new replies.