Resizing Custom Header Image?

• 

  hollywoodwonderland · Member · Jun 16, 2009 at 7:58 am

  • Copy link
  • Add topic to favorites

  I am using the Contempt theme and having issues trying to resize my custom header image larger than the standard 750 x 140. Any suggestions? Is this possible? I messed with the CSS but I’m not having any luck. :(

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

• 

  thesacredpath · Member · Jun 16, 2009 at 2:58 pm

  • Copy link

  Is this the blog you are talking about http://hollywoodwonderland.net/ ? Always include a link to the blog, or change the site linked to your username to your blog. Your myspace page does us no good.

  There are several things you will have to adjust:

  #page (width)
  #pagebar (width)
  #sidebar (right margin)
  #content (width)

  All the above will be adjusted by the same amount. In other words, if you want to increase the width by 200 px, add 200px to each of the existing declaration values identified above.

  Make your image to the exact height and width you want, upload the image to your media library, get the URL of that uploaded image and put it into the #headerimg section of the CSS. Once you get the CSS upgrade you can no longer use the custom header upload function under appearance.

• 

  thesacredpath · Member · Jun 16, 2009 at 3:01 pm

  • Copy link

  One other thing if you are using Firefox, get the Firebug add-on which will allow you to quickly identify where page elements are controlled in the CSS, and even test changes on the fly. Take a half-hour to get to know it and it will help considerably. It took me 2 minutes to identify and test width increases in the above.

• 

  hollywoodwonderland · Member · Jun 19, 2009 at 5:18 am

  • Copy link

  Thanks but I was wanting to change the height, not the width. That isn’t done the same way, is it?

• 

  thesacredpath · Member · Jun 19, 2009 at 5:41 am

  • Copy link

  You didn’t specify height or width.

  You will have to change the height in both #header and #headerimg and then put the URL of the header into the background-image declaration of #headerimg .

  Also remember that a good portion of people are still using 1024 x 768 monitor resolutions, and with the popularity of netbooks which have resolutions of 800 x 480 or 1024 x 600, a header height of 500 is going to mean nearly nothing else will be seen in the window.

  See this screen cap of the browser active area of a 1024 x 768 resolution monitor: http://opposablethumbz.wordpress.com/files/2009/06/window.png .