How Do I Change The Header Height?

[Dan Nickerson]

To change the header height you have to change four settings.

Let's say we want to change the height from 150 to 175px

3 in Style.css
1 in Header.php

In header.php

Change

#header {width:940px; height:150px; overflow:hidden; padding:5px 10px 0px; background:url(<?php echo $header['headerUrl']; ?>) no-repeat;}

to

#header {width:940px; height:175px; overflow:hidden; padding:5px 10px 0px; background:url(<?php echo $header['headerUrl']; ?>) no-repeat;}

In style.css

Change

.im-header { position:relative; min-height:150px; padding:5px 0px; left:10px; width:960px; margin:-43px 0px 0px; z-index:3 }
#im-searchForm { position:absolute; top:145px; left:748px; width:223px; z-index:5; text-align:right}
#header {width:940px; height:150px; overflow:hidden; padding:5px 10px 0px; background:url(header-images/abstract/JigsawPuzzles.jpg) no-repeat;}

to:

.im-header { position:relative; min-height:175px; padding:5px 0px; left:10px; width:960px; margin:-43px 0px 0px; z-index:3 }
#im-searchForm { position:absolute; top:165px; left:748px; width:223px; z-index:5; text-align:right}
#header {width:940px; height:175px; overflow:hidden; padding:5px 10px 0px; background:url(header-images/abstract/JigsawPuzzles.jpg) no-repeat;}

[007xxx]

If I perform the opposite of above and I reduce the Header height then how do you shift the rest of the page up to reduce the gap?

(I did try reducing the header.php and the 3 alterations in the style.css but the gap then between the header and text is to great)

Cheers

[Dan Nickerson]

Can you share a link to problem?

[007xxx]

I have sent you a link to the site through private message.

Thank you

[ricochet]

Hi guys,
I have the same problem of customizing my header size. I see you answered the question prior to this post but it makes no sense to me, soorryyy, newbie.. lol
ok, so I know I cant change the size in HTML as theres nowhere to load the HTML in header.
So I assume I need to save image to computer and change pixels from there somehow, before uploading?
I even tried gimp, managed to resize it and save as jpg file but it doesn't upload.
I'm sure im looking into it too much and there must be an easy way.
Any help appreciated.. TY

[Dan Nickerson]

If you resize an image offline to 960x150 and save it.. make sure you have no spaces, numbers or punctuation in image name.

Just a basic

header.jpg

Is a good way to start.

If that doesn't upload, check your permissions on header-images/uploads and make sure the uploads folder is 777.

[ricochet]

TY, I used a website to resize image eventually, no troubles uploading then, new header looks good
Another lesson learnt, hehehehe
tnx guys

[jencyn]

Hello,

I know I'm not supposed to post in the FAQ, but the question to how to make the header shorter successfully wasn't answered in this FAQ but rather offline for the individual who wanted to make use an image that was shorter. Can you post how to reduce the gap?

Thanks!

[Dan Nickerson]

We encourage replies, just not new posts.

To make shorter it's the same principle. You just subtract the values instead of add them.

So starting with a base of 150px.. if you want to change to 125px, you'd just change the heights to 125, and the search top value to 120px.

[ricochet]

Hi Jencyn,
If your struggling with the "techy" stuff, as I did, here's an easy way to get your images resized.
http://www.resize2mail.com/
That link will take you to an online image resizer. Just upload the image you wish to resize via the "browse" button, then select the "on your own" tab. From there you can manually specify the pixels height and the pixels width you wish to resize to.
Once you you done that, just hit ok. The image will be resized and you can save it to your computer
Hope that helps..
Thats the method I still use