Twenty Ten: Adjust Header Image Area Size

  • Unknown's avatar
    pepperpedals · Member ·

    Hi. I’m using the Twenty Ten Theme with a stock header size of 940 × 198 pixels. This is a rather large space for what I need. I’d like it to be 940 x 100pixels. I found a code that works, but it also distorts my header image. Is there a way to make the header space smaller without adjusting the header image? Please help!

    This is the code I found in the forums:

    #branding img {
    height: 100px;
    margin-bottom: -7px;
    width: 100%;
    }

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thesacredpath · Member ·

    The theme files control the size of the header, so the header image will always end up getting cropped at 940 x 198, however, we can insert the image through the CSS instead and then we can make the image any size you wish.

    First, go back to Appearance > Customize > Site Title and click to show the title text and save. We will hide that with the CSS, but we need it there in order to make your header image clickable as a return to your site main page.

    Next, upload your 940px x 100px header image to your media library, get the URL of that uploaded image and replace URL_OF_IMAGE between the quote marks in the background declaration below, pasting in all the CSS below.

    #branding {
    background: url("URL_OF_IMAGE") no-repeat scroll 0 0 transparent;
    height: 100px;
}
#branding img {
    display: none;
}
#site-title a {
    height: 100px;
    width: 940px;
    display: block;
    color: rgba(0, 0, 0, 0);
}
#site-description {
    display: none;
}

    Let us know how things go.

  • Unknown's avatar
    pepperpedals · Member ·

    I just tried this, and now there’s a 940 x 100px red space but no image.

  • Unknown's avatar
    pepperpedals · Member ·

    Solved. I changed “background: red;” to “background: transparent;” and it’s not visible. Thank you so much for your help!

  • Unknown's avatar
    pepperpedals · Member ·

    edit: it’s NOW visible. Thanks you.

  • Unknown's avatar
    thesacredpath · Member ·

    Whoops, sorry about that. I forgot to remove my red background I used for sizing the site link stuff so it would overlay the entire image.

    You are welcome.

  • The topic ‘Twenty Ten: Adjust Header Image Area Size’ is closed to new replies.