WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Changing Header Image (17 posts)

  1. johnhds
    Member
    Posted 7 years ago #

    I am using the Connections blog and want to change the "traffic image" to one that I designed, but don't know where to make the change. I have read the template changes but am not sure where to insert the url. I have the url of my image.

    http://www.homedesignsense.com/blog

  2. Nicki Faulk
    Member
    Posted 7 years ago #

    Hi :)

    The path I see to the header image is /blog/wp-content/themes/connections/img/top.jpg

    So you can either:

    a.) Name your new image and replace the top.jpg file in that directory.

    Or:

    b.) Change the path in your style.css file in the /blog/wp-content/themes/connections/ directory.

    (Hint: look for "top.jpg" in the file and replace it there)

  3. johnhds
    Member
    Posted 7 years ago #

    Well, I got it part correct. The top.jpg image is gone but mine didn't appear. What did I do wrong? My image is:

    http//www.homedesignsense.com/blog/personalheader.jpg

  4. moshu
    Member
    Posted 7 years ago #

    Just try to type your own domain without TYPO in your stylesheet :)

  5. Nicki Faulk
    Member
    Posted 7 years ago #

    D'oh! Tacky fingers strikes again! :)

  6. johnhds
    Member
    Posted 7 years ago #

    OK did that, but the image is hardly showing. Where is the rest of it?

  7. vkaryl
    Member
    Posted 7 years ago #

    Is your image the same size as the original? If not, you'll have to edit the css to give it new height/width dimensions.

  8. johnhds
    Member
    Posted 7 years ago #

    Where do I find the orginal's size?

  9. Doodlebee
    Member
    Posted 7 years ago #

    In your stylesheet, you have the image set, but you have the position set as only "bottom". If you set one part of the position, you *have* to set the other. Change "no-repeat bottom" to "no-repeat left bottom"

    Of course, when you do that, the bottom of th eimage shows up. If you want the top, it should be "no repeat left top". (It'd probably do you well to change the size of your image, as only part of it is showing up.)

  10. johnhds
    Member
    Posted 7 years ago #

    Where do I find the size of the original image, so I can make mine the same height and width?

  11. vkaryl
    Member
    Posted 7 years ago #

    In the images folder, right click on the image and select properties. Sometimes just hovering over the image will show the right info, depending on browser.

  12. johnhds
    Member
    Posted 7 years ago #

    OK. I'll do a new size an let you know. The size of the original is w=787px x h=185px in case you wanted to know :)

  13. vkaryl
    Member
    Posted 7 years ago #

    Yep, that's the easiest way to ease into your own header graphic; other solutions can whack the whole layout.

  14. johnhds
    Member
    Posted 7 years ago #

    OK. I got it to work. It's not exactly centered, but close. Can it be better centered?

    http://www.homedesignsense.com/blog

  15. yosemite
    Member
    Posted 7 years ago #

    You should check out connections reloaded at http://ajaydsouza.com/wordpress/wpthemes/connections-reloaded/

    If nothing else, he posted a seperate header image that can be manipulated (without losing shadings/border like yours).

  16. Doodlebee
    Member
    Posted 7 years ago #

    CHange this in your stylesheet:

    #header {
    background:#fff url(http://www.homedesignsense.com/blog/bloghead.jpg) no-repeat left bottom;

    to this:

    #header {
    background:#fff url(http://www.homedesignsense.com/blog/bloghead.jpg) no-repeat 6px 10px;

  17. johnhds
    Member
    Posted 7 years ago #

    Excellent. thanks all!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.