WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
[resolved] Make header image width of page (16 posts)

  1. richard.miller
    Member
    Posted 1 year 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
    Forum Moderator
    Posted 1 year ago #

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

  3. 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 1 year 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
    Forum Moderator
    Posted 1 year 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 1 year ago #

  7. Andrew
    Forum Moderator
    Posted 1 year 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 1 year 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 1 year 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 1 year ago #

    @craignimbusits Yep, just like that.

  11. craignimbusits
    Member
    Posted 1 year 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 1 year ago #

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

  13. craignimbusits
    Member
    Posted 1 year 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 1 year ago #

    forgive me, you're right

  15. richard.miller
    Member
    Posted 1 year 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 year ago #

    Thanks Andrew. Your way works!

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic