Sight theme: Adjust header image width

  • Author
    Posts
  • #1263938

    mensalcoweb
    Member

    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.

    #1264073

    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.

    #1264142

    mensalcoweb
    Member

    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!

    #1264146

    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.

    #1264157

    mensalcoweb
    Member

    ok, here it is:

    #1264164

    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%;
    }
    #1264169

    mensalcoweb
    Member

    Almost there! there’s a white area on the right side and the bottom.
    The image size that I uploaded is 975×164

    #1264185

    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;
    }
    #1264296

    mensalcoweb
    Member

    Yeah!!! that worked ;)

    Thank you so so so much!

    #1264297

    You are welcome.

    #1264298

    winbassett
    Member

    @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!

    #1264302

    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.

    #1264306

    winbassett
    Member

    Nothing seems to change.

    #1264308

    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.

    #1264309

    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?

The topic ‘Sight theme: Adjust header image width’ is closed to new replies.