Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
Do you have a section in the dashboard named, “Custom CSS”, “Custom Styles”, or “Jetpack”?
Moderator
Jan Dembowski
(@jdembowski)
Forum Moderator and Brute Squad
We ask that you open your own thread so we can assist you with your problem. If volunteers such as yourself ignored your problem and instead helped everyone else in the thread you started, you wouldn’t appreciate that would you?
I would like the header graphic to extend to the width of the page (as opposed to the full width of the browser window).
Can you provide a link to your site? Also if you haven’t already done so you can create a child theme of Twenty Twelve and make your changes there once it’s figured out what to change.
http://codex.wordpress.org/Child_Themes
You can even download a ready to go child theme for Twenty Twelve.
http://quirm.net/themes/twenty-twelve-child/
Once that’s setup then using a tool such as Firebug or Chrome’s inspect element browser tool you may be able to confirm/play with the CSS to increase the header width.
Give this article a look to see what I’m referring to.
http://www.studiopress.com/tips/using-firebug.htm
@andrew Nevins: I have none of those things installed.
@jan Dembowski: I’ve created a child theme. I’ve used Chrome’s “inspect element”. And I’m unable to figure out what to target, which is why I’m asking the question.
No assistance was provided in any of the other identical support threads I found (other than “use Firebug to figure it out”) which is why I thought I’d ask the user who started one of these threads directly – hoping for a concrete answer to what has got to be a very common issue.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
I can’t see a header image on the theme’s demo website, may you provide a link to yours?
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
In your Child Theme, you’d need to copy in header.php from the parent theme so you can modify it.
Then you’d need to move the image outside and above of the <div id="page"> element (in header.php) as demonstrated here [screenshot].
Once you’ve done that, your image is no longer constrained by a width. You can therefore give the image a width of 100% in CSS (of your Child Theme style.css file) [screenshot].
I probably wont be of any help but do you mean, you want the header to span across the whole page? like this
http://www.badapplecollective.com/
Thank you!
But wouldn’t doing it this way prevent the user from using WordPress’s “modify your site” options from the Dashboard, and possibly prevent the theme from resizing properly on (small screen) mobile devices?
@craignimbusits Yep, just like that.
That header was cropped down in the wordpress interface. I assume the only difference from yours is that the badapple one was over sized. I guess if you want to do it from the wordpress dashboard you need to upload the correct size image. Could you resize yours?
Looks like you’re using Twenty Eleven, which is pretty different from Twenty Twelve.
that maybe be but I believe the principle here is the same. I just tested it on another site and I switched over to twenty twelve and it worked fine. http://craigssite.hostoi.com/
if you want to do it via the wordpress dashboard then just use a bigger image. Try it and see.
out of interest, what is the benefit to you using twenty twelve? I’m new to this but when I started using child themes I just think of custom regardless of the parent.
I’m attempting to approach this by removing the overall padding from .site, and adding back to .wrapper (and other affected elements).
So far so good …
gfy
(@shawn-gnandt)
Thanks Andrew. Your way works!
![[screenshot]](http://snag.gy/7AP2I.jpg){kind=link}
![[screenshot]](http://snag.gy/BWTiF.jpg){kind=link}