Twenty Eleven Theme: Change custom header with CSS

• 

  erichagarty · Member · Nov 24, 2011 at 11:47 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  thesacredpath · Member · Nov 25, 2011 at 2:54 am

  • Copy link

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

• 

  erichagarty · Member · Nov 25, 2011 at 3:30 am

  • Copy link

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

• 

  thesacredpath · Member · Nov 25, 2011 at 3:44 am

  • Copy link

  You are welcome.

• 

  alwayswellwithin · Member · Dec 15, 2011 at 5:47 am

  • Copy link

  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.

  

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

• 

  erichagarty · Member · Dec 15, 2011 at 5:57 am

  • Copy link

  Hi Sandra,

  Try adding this into your custom CSS:

  #branding {height:240;}

  Hopefully that works… if not let me know.

  -Eric

• 

  alwayswellwithin · Member · Dec 15, 2011 at 6:22 pm

  • Copy link

  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!

• 

  thesacredpath · Member · Dec 15, 2011 at 7:09 pm

  • Copy link

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

• 

  alwayswellwithin · Member · Dec 24, 2011 at 3:31 am

  • Copy link

  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.

• 

  alwayswellwithin · Member · Jan 8, 2012 at 8:30 pm

  • Copy link

  Thanks, that worked out perfectly, Sacred Path.

• 

  thesacredpath · Member · Jan 8, 2012 at 8:33 pm

  • Copy link

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