Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Twenty Eleven Theme: Change custom header with CSS

  1. erichagarty
    Member

    Hi,

    I used the following to change the height of my custom header image in the Twenty Eleven theme (found in a helpful reply by thesacredpath here).

    #branding img {<br /> height:149;<br /> width:100%;<br /> margin-bottom: -7px;<br /> }

    I know that the custom header upload wizard forces you to crop anything that isn't 1000x288, so I understand I need to insert my preferred header image with CSS into the #branding img section. However, I can't figure out how to do that. I've tried inserting

    background-image:url('http://richfitzgerald.files.wordpress.com/2011/11/transition-team-header12.png');

    but that doesn't seem to work. Here's the link to my site: http://richfitzgerald.wordpress.com

    I appreciate any help.

    Thanks,
    Eric

    The blog I need help with is richfitzgerald.wordpress.com.

  2. thesacredpath
    Member

    There are a number of ways to do this, but give this a try.

    #branding {
background: url("http://richfitzgerald.files.wordpress.com/2011/11/transition-team-header12.png") no-repeat scroll 0 0 transparent;
height: 149px;
}

#branding img {
display: none;

#access {
margin-top: 149px;
}

  3. erichagarty
    Member

    That worked perfectly. Thank you so much for the help!

  4. thesacredpath
    Member

    You are welcome.

  5. alwayswellwithin
    Member

    Hi,

    This code didn't work for me, but I suspect - after looking at this blog - that I am trying to do something a little different. Which is just to add a custom header that is 1000 x 240 px Here's the url for the file.

    http://alwayswell.files.wordpress.com/2011/12/header-twenty-eleven-sky-clouds.jpg

    Can you tell me how to do this? Thanks for your help! Sandra

  6. erichagarty
    Member

    Hi Sandra,

    Try adding this into your custom CSS:

    #branding {height:240;}

    Hopefully that works... if not let me know.

    -Eric

  7. alwayswellwithin
    Member

    That didn't work for me, so I'm confused! Any additional ideas would be appreciated. I'm just trying to load a custom header that's 240 px, not trying to remove the the site title. Thanks loads!

  8. thesacredpath
    Member

    Sandra, give this a try. It works in Firebug. Due to the white area at the top, and the fact your image is a different height, the height of #branding and the top margin for #access have to be adjusted differently. If you want a 1px white reveal at the bottom of your image, set #access top margin to 241px. I think it looks better with that 1px of white there.

    #branding {
background: url("http://alwayswell.files.wordpress.com/2011/12/header-twenty-eleven-sky-clouds.jpg") no-repeat scroll center bottom transparent;
height: 400px;
}

#branding img {
display: none;
}

#access {
margin-top: 240px;
}

  9. alwayswellwithin
    Member

    Thanks! I will try that. In the meantime, I've been messing around trying different approaches. I would like to remove the extra background space at the top, so I'll ask that in a different threat.

  10. alwayswellwithin
    Member

    Thanks, that worked out perfectly, Sacred Path.

  11. thesacredpath
    Member

    You are welcome and that reminds me I owe you an email. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags