WordPress.org

Ready to get started?Download WordPress

Forums

Adding image to Almost Spring header (6 posts)

  1. jkent
    Member
    Posted 8 years ago #

    Hi there,

    I'm still finding my way with wordpress, and I'd love to be able to add this image (http://www.clearcommunication.ie/photos/cclogo_whitebg.jpg) to my Almost Spring themed blog (www.clearcommunication.ie)

    I've followed a number of different support threads, and have even gone through the page sources of a couple of blogs which have added images to the Almost Spring theme. However, since there's no image in the original Almost Spring theme, I still can't figure out where in header.php I need to add the .jpeg link

    I gather I'll have to alter the pixel dimensions of the logo too before adding it, and I've seen some posts mentioning the need to change style sheets, which all sounds very technical to me.

    Is there a simple line I can add to the header.php linking to the logo, or are there other steps I also need to do take?

    Any help very gratefully appreciated :)

  2. atelier455
    Member
    Posted 8 years ago #

    Hi - I'm also using Almost Spring and am struggling with the same question. I'm working through the information on http://codex.wordpress.org/Designing_Headers to try to resolve this. I'll let you know if I get it right!

  3. atelier455
    Member
    Posted 8 years ago #

    Hi again - I think I've finally found a way of doing this, based on the instructions on the WordPress page I linked to in previous post. Hope this works for you too!

    In style.css, I replaced the header section with:

    #header {
    width: 740px;
    height: 130px;
    background: url(LOCATION OF YOUR HEADER IMAGE) no-repeat;
    border-bottom: 7px solid #003300;
    }

    /* Header styles */
    #header h1 {display:none;
    margin: 0;
    padding: 35px 0 0 40px;
    font-size: 2em;
    line-height: 40px;
    }
    #header h1 a {
    text-decoration: none;
    }
    #header p {
    margin: 0;
    padding: 5px 0 0 40px;
    }

    You should check your existing border-bottom colour value as the one above is different to the default Almost Spring colour.

    The width and height values are the dimensions of your header image, so these should be the same as the jpeg pixel dimensions.

    The background:url is the location of your header image.

    The display:none instruction tells it not to display the text showing the title of your blog.

    I still need to play around with my header image jpeg to make it look good, but I'm pleased I've finally got this to work!

  4. ladydelaluna
    Member
    Posted 8 years ago #

    there's another way to do this, if you want the image to be a clickable link back to the homepage...

    change:

    <div id="header">whatever's in here</div>

    to:

    <div id="header" onclick="location.href='http://YOURDOMAIN.com/';" style="cursor: pointer;"><img src="path/to/your/image.jpg"></div>

    and go to the options page in your admin and delete the title and description lines.

  5. jkent
    Member
    Posted 8 years ago #

    Hi Ladies, thank you both so much for your help. I now have image on site as hoped.

    All I need to do now is figure out how to change text colour - onwards & upwards!

    Thanks again.

  6. kperfetto
    Member
    Posted 7 years ago #

    Thanks. I just switched from Typepad (the land of one-click header images). The only thing I did differently was change the border-bottom color to #ffffff so the (white) header blends seamlessly.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags