Need help? Check out our Support site, then


Sight theme: Adjust header image width

  1. Hi there, I need some help to adjust the image size of the header.
    Any suggestions?
    Thanks!!

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

  2. Sight supports the flexible header image. Upload the image at appearance > header in the side you want and then click the "use as is" button to insert the header without cropping or resizing.

  3. Thanks for your reply, but unfortunately is the heigh that is flexible, but not the width, so I thought there could be a css to allow me change it.

    Is there another way?
    Thanks!

  4. We can do that. Have you prepared the image and uploaded it to your media library? If so, get the URL of that image by going to media > library, click on "edit" and then in the save module at upper right, copy the URL and paste it here.

  5. Give this a try.

    .site-header hgroup {
    background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll left top transparent;
    width: 100%;
    }
  6. Almost there! there's a white area on the right side and the bottom.
    The image size that I uploaded is 975x164

  7. Sorry, I see that now. It didn't show originally with Firebug in Firefox. Delete what I gave you and add the following.

    .site-header hgroup {
    background: url("http://mensalco.files.wordpress.com/2013/05/header05.jpg") no-repeat scroll right top transparent;
    width: 975px;
    }
    
    .main-navigation {
    margin-top: 0;
    }
  8. Yeah!!! that worked ;)

    Thank you so so so much!

  9. You are welcome.

  10. @thesacredpath

    I'm trying to add an image (logo) to the right of my site title in "Sight." Can you help with the CSS (just using URL for image path for now).

    Thanks!

  11. The code would look something like this although adjustments would likely be necessary depending on logo size.

    #header {
    background: url("URL OF IMAGE") no-repeat scroll left top transparent;
    text-indent: -9999px;
    }
    
    #header a {
    display: block;
    }
    
    #header a:hover {
    background-color: transparent;
    }

    If you upload the image to your media library and then post the URL of that image here, we can get closer than the above.

  12. Do you want a full-width header, or do you want to put a logo to the right of the existing header? In another thread you started you stated you wanted a full width header image.

  13. If you want a full-width header image, can you respond in the other thread you started on that so we can keep from confusing things with me answering in two different places?

Topic Closed

This topic has been closed to new replies.

About this Topic