I seem to have a problem customizing the Twenty Eleven theme. I would like that the top header above the header image to have a background color that goes from side to side in the window. Found out that the problem may come from max-width set to 1000px, but could not find where to put it so it doesn't mess up the theme elsewhere.

How can I achieve to have a color on the top of the page (ex. like facebook top blue header) that has the width of the browser?

1 Answer 1


In your Twenty Eleven child theme (don’t edit the main theme!) create a new header.php file, copy the content from the parent theme, and replace this part:

<body <?php body_class(); ?>>
<div id="page" class="hfeed">

… with something like this:

<body <?php body_class(); ?>>
<div style="background:#345;color:#eee;padding:10px 20px;margin:0 -2em">Hello</div>
<div id="page" class="hfeed">

But move the CSS into a copy of the style.css, and adjust the styles in the media queries too, because body doesn’t have a padding in smaller windows, and you have to remove the negative margin then.

  • Thank you, will try it later today and check back with the results.
    – dare2k
    Oct 30, 2012 at 11:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.