PDA

View Full Version : How Do I Change The Header Height?



Dan Nickerson
08-03-2010, 10:44 PM
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
02-01-2011, 10:21 AM
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
02-02-2011, 04:11 PM
Can you share a link to problem?

007xxx
02-03-2011, 01:48 AM
I have sent you a link to the site through private message.

Thank you

ricochet
04-18-2011, 11:28 AM
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
04-18-2011, 12:13 PM
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
04-18-2011, 01:02 PM
TY, I used a website to resize image eventually, no troubles uploading then, new header looks good :)
Another lesson learnt, hehehehe
tnx guys

jencyn
06-15-2011, 06:04 PM
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
06-15-2011, 09:03 PM
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
06-16-2011, 03:34 AM
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 :)

jencyn
06-16-2011, 05:51 AM
Hello, I did resize the image. That's why there's a gap below it. I believe I followed all instructions and that there was a gap below the image. But I suppose I can try making all the changes again and see if it works.

I can't really leave our page like that. We have visitors. I can send you a screen shot, but what it looks like is simply that the header didn't change in height.

But I did leave the style in the style box so you could see what it does to our page.

jencyn
08-03-2011, 01:17 PM
Hello Dan, The last message I got from you was this:


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.

I'd tried to reduce the height strictly following the instructions given for making the header taller, but in reverse, but it didn't work. I had to take it down and give up because we couldn't run with it live looking bad.

So other than the suggested changes in the css and header.php is there any other change I would need to make? We want the new header to be 50 px. high ... only high enough for text. And we want to exclude header image.

Dan Nickerson
08-03-2011, 03:36 PM
Try this..

In Socrates > Styling Custom Box..

Add:



#header {padding: 0px 5px 20px 10px;}
.im-header {
min-height: 50px;
}
.titleText h1 {
padding: 0px 0 5px 0;
}

In Socrates > Header

Remove your image and set your title text.

jencyn
08-03-2011, 04:01 PM
Header still not reduced. Or was I supposed to make those other changes as well?

http://www.traditional-anniversary-gifts-by-year.com/


I can't really leave our page like that, so I reinserted our header (to delete the header, I had selected the color radio button; hope that was the correct way to do it). We have visitors. I can send you a screen shot, but what it looks like is simply that the header didn't change in height.

But I did leave the style in the style box so you could see what it does to our page.

Dan Nickerson
08-03-2011, 05:05 PM
I'm sorry... I forgot I had edited another section when testing...

Use this..

#header {
height:50px;
padding: 0px 5px 20px 10px;
}
.im-header {
min-height: 50px;
}
.titleText h1 {
padding: 0px 0 5px 0;
}
#im-searchForm {
top: 58px;
}

twoappies
10-07-2011, 06:16 AM
Hi, I like the header that I picked out and would like to know if it possible to use it as a logo in a word doc or pdf ebook? Thank you!


Richard

Dan Nickerson
10-07-2011, 09:53 AM
I'm sorry but our headers are for use in Socrates themes only. Some headers have different rights than others so we have to be careful about their use.