Need help? Check out our Support site, then


WordPress.com Forums » Support

Change size of header image and remove automatic text in Connections

  1. dianevacca
    Member

    The header image in Connections is 741 x 142. I would like to make it 741 x 220. I would like it to cover what's left of the original header: a green band with links to "Home" and "About." At a minimum, I'd like to change the color of that green band.

    I have the blog name in the image. When WordPress superimposed the blog name automatically on the image, the placement was awkward. In addition, WordPress adds the text "another WordPress.com weblog," which I definitely want to remove.

    I chose Connections because of the layout and because it has page navigation. (I assume that means I can add pages to the blog.) The theme, however, is green, and I'd like to make the headings blue to harmonize with my picture.

    I haven't purchased the CSS upgrade yet. I changed the image dimensions in the code, but that didn't make any difference.

    Any and all help most welcome.

  2. deltafoxtrot
    Member

    Without your blog-address I fear I can only make educated guesses. :)

  3. dianevacca
    Member

    The blog is at http://dianevacca.wordpress.com/

  4. deltafoxtrot
    Member

    I can hide the Blog title and description on my testblog with connections, no problem.

    You'll be bound by the size limits unless you purchase CSS upgrade which is useless unless you know how to achieve what you want with it.

  5. deltafoxtrot
    Member

    It's actually best if you hide the blog title and prepare a custom image.

  6. dianevacca
    Member

    Yes, but how do you hide the blog title and description? I have the custom image; I'd like to make the dimensions of the original image (space) larger. I thought you could see the results on Preview, but when I change the dimensions in the code, there's no change in the Preview.

    What is the text in the code that inserts the blog title and description?

    I know some html, but haven't done any CSS.

  7. deltafoxtrot
    Member

    The system cuts your Header Image always to 142px height (the CSS-solution to fit your desired height is a bit tricky).

    You can disable the blog title with the button on the far left (just ignore that it's German).

    http://deltafoxtrot.files.wordpress.com/2008/04/bild-5.png

  8. dianevacca
    Member

    Thank you! I'm embarrassed. That was so easy.

    Now, if you don't mind, what about changing the color of the green bar across the top?

  9. deltafoxtrot
    Member

    That's only possible with CSS.

  10. dianevacca
    Member

    Ok. I've changed the color of the green bar across the top in the code:

    a {
    color:#54659b;
    text-decoration:none;
    }

    BUT: when I try to Preview, the image disappears and the entire header is the original green.

  11. dianevacca
    Member

    I've tried again. So far, I've changed the top of the style sheet:

    body {
    font-family:'Trebuchet MS',Georgia, Times, Times New Roman, sans-serif;
    font-size:0.9em;
    text-align:center;
    color:#29303B;
    line-height:1.3em;
    background:#F3F6ED;
    margin:0;
    padding:0;
    }

    p img {
    margin:0 5px;
    }

    .wp-smiley {
    width:15px;
    height:15px;
    }

    a {
    color:#54659b;
    text-decoration:none;
    }

    a:visited {
    color:#8a3207;
    }

    a:hover {
    text-decoration:underline;
    }

    input,textarea {
    background:#9eafc3;
    border:#E1D6C6 1px solid;
    }

    #rap {
    background:#fff url('img/rap.jpg') center repeat-y;
    width:760px;
    text-align:left;
    font-family:Trebuchet MS,Georgia, Arial, serif;
    font-size:0.9em;
    margin:0 auto;
    padding:0 8px;
    }

    #header {
    background:#fff url('img/better-header.gif') no-repeat bottom;
    height:262px;
    width:760px;
    border:#fc9 0 solid;
    margin:0 auto;
    padding:0;
    }

    #heading {
    background:#54659B url('img/laundry-txt.jpg') center repeat-y;
    height:220px;
    width:741px;
    margin:2px 0 0 10px;

    Now the green is gone, but my color isn't there. The bar is white.

  12. deltafoxtrot
    Member

    The background is done with an image. Edit this file, upload it and post a link to it, please: http://s.wordpress.com/wp-content/themes/pub/connections/img/better-header.gif

  13. deltafoxtrot
    Member

    The URI goes into this code snippet. I'm off to bed now.

    #header {
background: url('HERE');
}

  14. dianevacca
    Member

    Ok, I'll try to do that. I saw the .gif image and didn't know what it was. Once I change it, how do I upload it to http://s.wordpress.com/wp-content/themes/pub/connections/img/ ? And if I upload a file with the same name, won't it change for everyone else who uses Connections?

  15. dianevacca
    Member

    Thank you so very, very much!

    Sleep well. Gute nacht.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags