Twent Fourteen Header Width

  • Resolved mhk1058

    (@mhk1058)


    12 years, 3 months ago

    Hi,

    I’ve just set up Twenty Fourteen on my site and am having a bit of trouble setting the header image.

    I’ve set the site overall width a bit wider at 1340, so created an image for the header at this width and the recommended height of 240. When I upload it the crop tool is set short at what I assume is the default width of 1260. I drag the box out to the full width of my image and click OK. However, the image is still short with white background showing, I assume anything beyond 1260?

    Is there a way to address this?

    It would be good if the main colour extended into the header so that you could use a transparent .gif for the header. This would overcome this issue and produce a seamless colour transition – very difficult with a block coloured image.

    site is http://www.markkneen.com, I’ll leave the test header image in place.

Viewing 7 replies - 1 through 7 (of 7 total)
  • 9ete

    (@hawkeye126)

    12 years, 3 months ago

    After making a child theme (Or using Jetpack or Simple Custom CSS), add this to your CSS:

    #site-header img {
    width: 1340px;
    }

    esmi

    (@esmi)

    12 years, 3 months ago

    Do not edit the Twenty Fourteen theme. It is the current default WordPress theme and having access to an original, unedited, copy of the theme is vital in many situations. First create a child theme for your changes. Or install a custom CSS plugin.

    Thread Starter mhk1058

    (@mhk1058)

    12 years, 3 months ago

    Thanks for the replies. I should have said that I’m using Twenty Fourteen extended plug-in to alter the width of the site, and CSS plug-in for minor CSS tweaks.

    Unfortunately, that header width setting didn’t do the trick. The image doesn’t need to stretch the full width if I could just find a way to alter the header space background colour.

    9ete

    (@hawkeye126)

    12 years, 3 months ago

    Try this

    #site-header {
    background: #232323;
    }

    Thread Starter mhk1058

    (@mhk1058)

    12 years, 3 months ago

    It appears that whatever width you set the site to, this doesn’t bypass the crop function in the header customiser, which will always crop the image to the default max width of 1260.

    The only way round this is to alter to the max width values in custom-header.php.

    I’d still be interested to know how to set the background colour for the masthead space, that way you could use a transparent GIF and not have to worry about width settings.

    batharoy

    (@batharoy)

    12 years, 3 months ago

    I’d still be interested to know how to set the background colour 

    #site-header {
    background: red;
}
    Thread Starter mhk1058

    (@mhk1058)

    12 years, 3 months ago

    Thanks but that just does the small menu bar below the header.

    I think because it is an optional custom header template it must be somewhere in there.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Twent Fourteen Header Width’ is closed to new replies.