Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

new header image not sized correctly

  1. sheilamckayphotography
    Member

    I am so frustrated. I spent countless hours trying to change my blog with colors, and making my header bigger than what was provided on the Blix theme.

    Just recently wanted to change the header a bit and inserted the code from Flickr (and tried photobucket, and WordPress gallery as well) - I get the new image but not in the size I want. And the only thing I am changing is the image itself. How can this be?

    I want my header to be 450 height and 1024 wide.

    Please help. thanks

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

  2. thesacredpath
    Member

    Once you start custom CSS, you can no longer use the custom header uploader because it will always insert the image in the original size. You have to put the URL into the header section of the CSS instead after you upload it to the media library.

  3. sheilamckayphotography
    Member

    I have done that with my blog - http://www.sheilamckayphotography.wordpress.com -

    this is the css I used

    body {
    color:#00000;
    background:#ffffff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:75%;
    line-height:1.6em;
    text-align:center;
    margin:0;
    padding:15px 0;
    }

    body#commentspopup {
    background:white;
    padding:0;
    }

    h1,h1 a,h2,h2 a,h3 a,h4 a {
    color:#CC0000;
    }

    h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover {
    color:#A2CD5A;
    }

    a {
    color:#00000;
    text-decoration:none;
    }

    a:hover {
    color:#A2CD5A;
    }

    a.commentlink {
    padding-left:16px;
    background:url('images/spring_flavour/comments.gif') center left no-repeat;
    }

    a.more {
    padding-right:10px;
    background:url('images/spring_flavour/more.gif') center right no-repeat;
    }

    pre,code {
    background-color:#A2CD5A;
    }

    kbr {
    color:#A2CD5A;
    }

    #container {
    border-top:0 solid white;
    background:url('images/spring_flavour/container_bg.gif') 500px 0 repeat-y;
    width:1024px;
    text-align:justify;
    margin:0 auto;
    padding:25px 30px 0;
    }

    #container.singlecol,#commentspopup #container {
    background-image:none;
    }

    #header {
    background-color:#ffffff;
    background-image:url('http://farm3.static.flickr.com/2736/4404463603_19e36d87c2_o.jpg');
    height:450px;
    padding:0;
    }

    The only thing I changed was the ('http://. . . . . . . . . . . jpg') to change the image but the header is very small although I did not change anything else.

    This was the new image I was trying to change:

    http://farm5.static.flickr.com/4106/4958544489_f0c98549f2.jpg

    Thanks so much for your help.

  4. sheilamckayphotography
    Member

    OK - I am stumped. I ONLY changed the "image" now the color when I hover over my navigation bar is now changed. I know I didn't change that. Rechecked my css that I printed on paper and everything is the same. Has this happened before?

  5. thesacredpath
    Member

    I have a wireless internet connection, and your site apparently is going to eat a ton of my limited bandwidth and take forever to load, so it will be possibly another 5 minutes before I can even take a look.

  6. thesacredpath
    Member

    OK, first off some suggestions.

    1. Your header image file size is 455k. It should NEVER be over 50k, 75k at the most, otherwise it takes too long to load and people on the internet have a very short attention span and will just click away instead of waiting. Also, for those of use on limited bandwidth and slower connections (and there are a lot of us out there), think of us when you size and optimize your images. I just downloaded your header image and did a "save for web and devices" in photoshop at medium jpg and reduced your head image from 455k to 70k with virtually no loss in quality.

    2. Images in your posts and pages... see #1 above. Way too big in file size.

    3. Since you are a photographer, and photos dominate your site, go to settings > reading and set the maximum number of posts to show on a page to 3 or 4 maximum. Again, always think of your visitors, especially those on slower internet connections.

    I'm assuming your header image is looking like what you want right now, correct?

    On the nav bar, I can't tell what is wrong. What color is the active tab supposed to be, and what color are the inactive supposed to be?

  7. sheilamckayphotography
    Member

    I want my navigation tab to be red (which it is) but when hovering it should be the green color that is the same as the comment bar color.

    Thanks so much

  8. sheilamckayphotography
    Member

    oh - the header image file is correct because it is my original. I was trying to replace it with some different images

    http://farm5.static.flickr.com/4106/4958544489_f0c98549f2.jpg

    but it will change the size to something too small. I uploaded it also to my media gallery but it does the same thing from there as well.

  9. sheilamckayphotography
    Member

    oh - the header image file is correct because it is my original. I was trying to replace it with some different images

    http://farm5.static.flickr.com/4106/4958544489_f0c98549f2.jpg

    but it will change the size to something too small. I uploaded it also to my media gallery but it does the same thing from there as well.

  10. thesacredpath
    Member

    OK, for the navigation, this is a long one.

    #navigationigation .selected, #navigation ul li a:hover, #navigation ul li:hover > a, #navigation ul li.current_page_item > a, #navigation ul li.current_page_parent > a, #navigation ul li.current_page_ancestor > a, #navigation ul li.current-cat > a, #navigation ul li.current-menu-ancestor > a, #navigation ul li.current-menu-item > a, #navigation ul li.current-menu-parent a {
background-color:#A2CD5A;
}

    On the header image, the one you referenced is smaller than the one you have up now. The one you have up now is 1024 x 450. The one you reference is 500 x 220. To use the image you reference, it will have to be the same size as the one you have up there now.

  11. sheilamckayphotography
    Member

    I really appreciate you trying to help me but I cannot for the life of me get this to work. The only change I need right now is the hovering color on the navigation bar.

    Navig bar should be red but when hovered should be the green color that is on the rest of the blog (comment bar, etc)

    I have rechecked the CSS code against my saved copy and everything looks identical.

    Can you please lead me in the right direction? The above that you sent for navigation looks nothing like what is on mine.

    This is mine:
    #navigation {
    background-color:#CC0000;
    height:2.7em;
    line-height:2.7em;
    }

    #navigation li {
    float:left;
    list-style-type:none;
    border-right:1px solid;
    white-space:nowrap;
    border-color:black;
    margin:0;
    padding:0;
    }

    #navigation a {
    color:black;
    }

    #navigation .selected,#navigation a:hover {
    background-color:#CC0000;
    }

    #navigation form {
    background:#CC0000 url('images/spring_flavour/corner_bottom_right.gif') bottom right no-repeat;
    float:right;
    height:100%;
    width:189px;
    border-left:1px solid;
    line-height:0;
    border-color:black;
    padding:0 15px;
    }

    #navigation #s {
    height:1.5em;
    width:140px;
    border:1px solid;
    font-size:.8em;
    vertical-align:middle;
    border-color:#CC0000;
    margin:0 5px 0 0;
    padding:0;
    }

    #navigation #searchbutton {
    color:black;
    background-color:#CC0000;
    height:2em;
    width:auto;
    border:1px solid;
    font-size:9px;
    letter-spacing:1px;
    text-align:center;
    vertical-align:middle;
    padding:0 1px;
    }

    .entry {
    margin:40px 0;
    }

    .entry .info {
    background-color:#FAFAFA;
    position:relative;
    margin-top:-3px;
    border-top:1px solid;
    border-bottom:1px solid;
    font-size:.9em;
    border-color:#F3F4F4;
    padding:3px;
    }

    .entry .info a {
    margin-right:6px;
    padding-right:9px;
    border-right:1px solid;
    border-color:#949494;
    }

    .entry a.more {
    padding-left:12px;
    background:url('images/spring_flavour/more.gif') center left no-repeat;
    }

    Thanks

  12. thesacredpath
    Member

    OK, before we go to far let me verify what it is you want.

    1. You want the active page tab to be red.

    2. You want the inactive page tabs (not hovered) to be red.

    3. You want the page tabs to go green when hovered.

  13. sheilamckayphotography
    Member

    Yes!

  14. thesacredpath
    Member

    This turns all the tabs which are "inactive" red. Add that background declaration to #navigation li .

    #navigation li {
background-color:#CC0000;
}

    If you don't have the below in your CSS, then add it.

    #navigation ul li a:hover {
background-color:#CC0000;
}

    Also, you might look at changing the text color to white since there really isn't enough contrast between the black and the red (in #navigation a ).

    Search button for the search box also (#navigation #searchbutton) .

  15. sheilamckayphotography
    Member

    ok - I am at my wits end. I made the changes as above - now I don't have a header at all. I am about to throw my hands up and use another blog. I purchased the upgrade 2 years and I have gone cross eyed trying to make simple changes.

    I tried a blogger blog which seems to be much easier to make changes but i would really like to keep my wordpress because I have invested the time and money already.

  16. sheilamckayphotography
    Member

    Now rechecked my blog for view and my header is back. What the heck is going on? All I want is the blue (hover over the tab ) to be red!

  17. thesacredpath
    Member

    I messed up on one of the colors. Let's do this another way. In your CSS, find

    #navigation li

    and add this to the definitions

    background-color:#CC0000;

    Find

    #navigation a

    and change the color definition to white

    Go to the very bottom of your CSS and add this

    #navigation ul li a:hover {
background-color:#A3C159;
}

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags