WordPress.org

1. richard.miller
   Member
   Posted 3 months ago #
   

   [Unnecessary comments moderated]

   I would like the header graphic to extend to the width of the page (as opposed to the full width of the browser window).

   This width seems to be defined by padding in the .site element, and I can't figure out how or what to target to make the graphic either overlap the padding or override it. Or whatever.

   I'm not at all sure how to approach this problem, and hints (or a handy guide) would be appreciated.

2. Andrew Nevins
   Tea Drinker & Volunteer Moderator
   Posted 3 months ago #
   

   Do you have a section in the dashboard named, "Custom CSS", "Custom Styles", or "Jetpack"?

3. Jan Dembowski
   Volunteer Mod. & Brute Squad
   Posted 3 months ago #
   

   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

4. richard.miller
   Member
   Posted 3 months ago #
   

   @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.

5. Andrew Nevins
   Tea Drinker & Volunteer Moderator
   Posted 3 months ago #
   

   I can't see a header image on the theme's demo website, may you provide a link to yours?

6. richard.miller
   Member
   Posted 3 months ago #
   

   http://spitfiremoto.com/

7. Andrew Nevins
   Tea Drinker & Volunteer Moderator
   Posted 3 months ago #
   

   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].

8. craignimbusits
   Member
   Posted 3 months ago #
   

   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/

9. richard.miller
   Member
   Posted 3 months ago #
   

   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?

10. richard.miller
    Member
    Posted 3 months ago #
    

    @craignimbusits Yep, just like that.

11. craignimbusits
    Member
    Posted 3 months ago #
    

    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?

12. richard.miller
    Member
    Posted 3 months ago #
    

    Looks like you're using Twenty Eleven, which is pretty different from Twenty Twelve.

13. craignimbusits
    Member
    Posted 3 months ago #
    

    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.

14. craignimbusits
    Member
    Posted 3 months ago #
    

    forgive me, you're right

15. richard.miller
    Member
    Posted 3 months ago #
    

    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 ...

16. gfy
    Member
    Posted 1 month ago #
    

    Thanks Andrew. Your way works!

Reply

You must log in to post.