Change height of header in Autofocus theme

• 

  nomadwithcookies · Member · Dec 30, 2011 at 6:41 pm

  • Copy link
  • Add topic to favorites

  My header image is 800×380. The Autofocus theme only allows for a header of 800×216. I’d like to alter the head size to accommodate my header image. Is this possible, and if so, how can I do this? I am have very limited experience with HTML and CSS. Any help would be appreciated!

  I believe this is the code for the header image. I see where the width is defined but not the height.

  #header-wrapper,
  #header,
  #access,
  div.menu,
  #content,
  #sidebar,
  #comments,
  #footer {
  display: inline;
  float: left;
  position: relative;
  }
  #header-wrapper {
  width: 800px;
  }
  #header {
  padding: 24px 0 48px;
  width: 595px;

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

• 

  thesacredpath · Member · Dec 30, 2011 at 6:56 pm

  • Copy link

  This is quite easy with Autofocus since it puts the custom header into the CSS rather than into the HTML. Upload the image to your media library, get the URL of that image, add the following to your CSS and then replace IMAGE URL between the double quote marks with the full URL of your image. I would add this to the very bottom of any CSS you have already used.

  #header-image {
  background: url("IMAGE URL") no-repeat scroll 0 0 transparent !important;
  height: 380px !important;
  }

• 

  nomadwithcookies · Member · Dec 30, 2011 at 7:57 pm

  • Copy link

  Thank so much! Worked like a charm. :)

• 

  thesacredpath · Member · Dec 30, 2011 at 8:27 pm

  • Copy link

  You are welcome.