CSS for a full-width header image in Twenty Twelve:
#page {
padding-left:0!important;
padding-right:0!important;
max-width:70rem;
}
header hgroup, #main, footer[role="contentinfo"], nav.main-navigation {
padding-left:20px;
padding-right:20px;
}
img.header-image {
border-radius:0;
width: 100%;
}
Chris Finke on WordPress 
Brian Smith 4:20 pm on September 29, 2012 Permalink |
Hey Christopher,
Thanks for this mod…where is this located at to change…I cannot find the particular /css to edit…
Sorry, I am not very good at programming…
Thanx,
Brian
LikeLike
Christopher Finke 9:40 pm on September 29, 2012 Permalink |
If you install the Jetpack plugin, you can add custom CSS under Appearance -> Edit CSS.
LikeLike
Bas van Leeuwen 1:18 pm on November 30, 2012 Permalink |
Thanks for the code. However, there is still some white space, now only on the right side of the image. How can I get rid of this / what did I do wrong?
LikeLike
Bas van Leeuwen 1:23 pm on November 30, 2012 Permalink |
I already fixed it. Turns changing the max-width optimal for 2012 fixed it. The code (in case you are interested) was:
#page {
padding-left:0!important;
padding-right:0!important;
max-width:68.571428571rem;
}
header hgroup, #main, footer[role=”contentinfo”], nav.main-navigation {
padding-left:20px;
padding-right:20px;
}
img.header-image {
border-radius:0;
align: center;
}
LikeLike
francois hall 11:50 am on April 2, 2013 Permalink |
Hi, thanks for this piece of code – it’s just what I am looking for, I need to update from twenty ten child theme to twenty twelve… but having found your site, what’s this about twenty thirteen? is it better to use this as a basis for a child theme, or is it twenty twelve with bells and whistles…
Thanks
LikeLike
Christopher Finke 12:30 pm on April 2, 2013 Permalink |
To me, Twenty Twelve feels more like a “site” theme, while Twenty Thirteen is more of a “blog” theme. Both themes can be used for both kinds of sites, but that’s just my impression.
Keep in mind that Twenty Thirteen is not yet complete, so you may be asking for trouble if you start using it right now.
LikeLike
chris 5:41 pm on May 2, 2013 Permalink |
Thank you so much!
LikeLike
Kevin Lycett 8:48 am on July 18, 2013 Permalink |
Thank you so much, been searching for this everywhere, does your CSS still allow the site to be responsive?
LikeLike
Bill 6:42 pm on January 12, 2014 Permalink |
I spent hours today trying to figure this out. Tutorials had me messing with functions and tons of code. Yes, I do use child themes and this one was SPOT ON! So, I had to stop and say thanks!
LikeLike
Barbara Bamber | justasmidgen 8:38 am on May 24, 2014 Permalink |
I am trying to do this with my Home page only.. is there a way to do this with custom css? I would be so grateful if you know:) This is my homepage: http://justasmidgen.com
LikeLike
Christopher Finke 11:16 am on May 24, 2014 Permalink |
Yes, you can apply it to just the homepage by adding
body.hometo the beginning of each rule:body.home #page { padding-left:0!important; padding-right:0!important; max-width:70rem; } body.home header hgroup, body.home #main, body.home footer[role="contentinfo"], body.home nav.main-navigation { padding-left:20px; padding-right:20px; } body.home img.header-image { border-radius:0; width: 100%; }LikeLike
Barbara Bamber | justasmidgen 2:03 pm on May 24, 2014 Permalink
Thank you so much!! I’ll give it a try!
LikeLike