Please Read First
Troubleshooting Tips
Frequently Asked Questions
Before Posting Please Disable Wp Super Cache Plugin
When Posting Please Include Your URL.
Search Forum Using Google Search Box Above
Forum Video

Page 1 of 2 12 LastLast
Results 1 to 10 of 17
  1. #1
    Join Date
    Jun 2010
    Location
    Maine
    Posts
    7,452
    Rep Power
    12

    Default How Do I Change The Header Height?

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

  2. #2
    Join Date
    Feb 2011
    Posts
    13
    Rep Power
    0

    Default

    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

  3. #3
    Join Date
    Jun 2010
    Location
    Maine
    Posts
    7,452
    Rep Power
    12

    Default

    Can you share a link to problem?

  4. #4
    Join Date
    Feb 2011
    Posts
    13
    Rep Power
    0

    Default

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

    Thank you

  5. #5
    Join Date
    Apr 2011
    Posts
    3
    Rep Power
    0

    Default

    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

  6. #6
    Join Date
    Jun 2010
    Location
    Maine
    Posts
    7,452
    Rep Power
    12

    Default

    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.

  7. #7
    Join Date
    Apr 2011
    Posts
    3
    Rep Power
    0

    Default

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

  8. #8
    Join Date
    May 2011
    Posts
    22
    Rep Power
    0

    Default Making Header Smaller

    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!

  9. #9
    Join Date
    Jun 2010
    Location
    Maine
    Posts
    7,452
    Rep Power
    12

    Default

    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.

  10. #10
    Join Date
    Apr 2011
    Posts
    3
    Rep Power
    0

    Default

    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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •