Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

header size

  1. alisonstuart
    Member

    I would like to increase the height of my header. I am using the 'fresh news' theme and have tried the various suggestions listed here and can't seem to make them work at all (when I preview there is no change to my website). My page is: http://projectkenyasisterschools.com. I am trying to put the following image as the header: http://projectkenyasisterschools.files.wordpress.com/2011/11/dsc_0048-version-2.jpg. Any advice would be greatly appreciated.

    The blog I need help with is alisonstuart.wordpress.com.

  2. airodyssey
    Member

    Hi. It looks like you are using a Premium Theme. Support for Premium Themes is provided in a special forum by the designers themselves. Please follow the link below to access that forum:
    http://en.forums.wordpress.com/forum/premium-themes

  3. thesacredpath
    Member

    I could probably help out, but I have absolutely no idea were the header in this theme even goes. We volunteers do not have access to the premium themes.

    One thing though: a 500px tall header image is not a good thing because by the time you take into account the top area of a browser window and the bottom status bar, you only have about 650px clear in height. That means that anyone coming to your site on a lower resolution monitor such as 1024 x 768 (and there are a lot out there still on that resolution) all they will see is the image and virtually nothing else.

  4. alisonstuart
    Member

    I would appreciate any help you could give. I would like a header that is about 300px tall. I have seen this size header in a number of other themes and I think it looks really nice. There is a place to insert a custom header under Appearance (it would go where the brown color currently is behind Project Kenya Sister Schools), but it is only about 100px so no picture looks really normal there.

  5. thesacredpath
    Member

    What you want to do then is create a header image that is 300px tall, upload that to the media library, get the URL of that image (appears in a grey field at the bottom of the upload window after uploading), put the code below into your CSS edit window, and then put that URL into the background declaration where it says "URL OF IMAGE between the double quote marks. I've set a background color (#736521) that should blend in reasonably well at the edges of the image if someone has a very wide monitor and has their browser window set very wide.

    #header {
background: url("URL OF IMAGE") no-repeat scroll center top #736251;
height: 300px;
}

  6. alisonstuart
    Member

    I have done all that you said and I made the image 300px in height in wordpress by scaling it down. I have added the code and clicked on 'preview'. Now the height of the header is 300px, but the image does not appear. I feel like it is getting close!! I also tried scaling the picture to be 960 wide (the width of the header) and then the pic is 960 x 234, so I changed the 300 in your coding to be 234. Still no picture. I have copied from the grey field at the bottom of the image, but it just seems like it is not linking to the picture correctly.

    Thanks so much for all your time with this!!

  7. thesacredpath
    Member

    I'm not seeing any custom CSS on your site at all, so I can't determine what the issue is. Could you do a "save stylesheet" and then let me know so I can take a look?

  8. alisonstuart
    Member

    Sorry about that! I have saved the stylesheet now.

  9. thesacredpath
    Member

    Ah, the brown color scheme was overriding your custom CSS. Change out what I had given you for this (note the " !important " attribute I added to make the browser pay attention to your CSS).

    #header {
background: url("http://projectkenyasisterschools.files.wordpress.com/2011/11/dsc_0048-version-2.jpg") no-repeat scroll center top #736251 !important;
height: 234px;
}

  10. alisonstuart
    Member

    Thank you, Thank you, Thank you!!!!

  11. thesacredpath
    Member

    You are welcome.

  12. thesacredpath
    Member

    Just something to remember, the brown color scheme CSS loads last after the original and after your custom CSS, which means that other changes you make going forward might require the !important attribute as well.

  13. alisonstuart
    Member

    Thanks,
    I was thinking that too. If it is required to change the header, it would likely need to be changed for everything. This will make it so much less frustrating for me moving forward. I appreciate you giving up part of your Sunday to help out.

  14. thesacredpath
    Member

    Not a problem and you are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags