Change size of header image and remove automatic text in Connections

  • Author
    Posts
  • #215617

    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.

    #215727

    deltafoxtrot
    Member

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

    #215728

    dianevacca
    Member
    #215729

    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.

    #215730

    deltafoxtrot
    Member

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

    #215732

    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.

    #215734

    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

    #215735

    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?

    #215739

    deltafoxtrot
    Member

    That’s only possible with CSS.

    #215743

    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.

    #215744

    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.

    #215747

    deltafoxtrot
    Member

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

    #215749

    deltafoxtrot
    Member

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

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

    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 https://s-ssl.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?

    #215751

    dianevacca
    Member

    Thank you so very, very much!

    Sleep well. Gute nacht.

The topic ‘Change size of header image and remove automatic text in Connections’ is closed to new replies.