Twenty Eleven Theme: Change custom header with CSS

  • Author
    Posts
  • #760807

    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 {
    height:149;
    width:100%;
    margin-bottom: -7px;
    }

    I know that the custom header upload wizard forces you to crop anything that isn’t 1000×288, 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.

    #760963

    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;
    }
    #760975

    erichagarty
    Member

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

    #760978

    You are welcome.

    #761249

    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

    #761250

    erichagarty
    Member

    Hi Sandra,

    Try adding this into your custom CSS:

    #branding {height:240;}

    Hopefully that works… if not let me know.

    -Eric

    #761251

    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!

    #761252

    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;
    }
    #761253

    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.

    #761276

    Thanks, that worked out perfectly, Sacred Path.

    #761277

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

The topic ‘Twenty Eleven Theme: Change custom header with CSS’ is closed to new replies.