Change header color and add picture

  • Author
    Posts
  • #1433543

    lisarhode
    Member

    Is it possible to change the background color of header and add a picture in wordpress Sight theme?

    thanks

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

    #1433632

    mrdirby
    Member

    In your dashboard, have you gone into Appearance > Header and uploaded a picture there?

    There might be a better way to do this but here is how you can add a color to your whole header.

    `.site-header {
    background-color: #ccccff;
    height: 200px;
    }`

    You can change the color to what you want, http://www.colorpicker.com/, and experiment with the right height.

    #1433711

    lisarhode
    Member

    Thanks,
    I did go there but I want to have the picture moved to the left and positioned relative to the title. Can I move the picture?

    #1433714

    lisarhode
    Member

    …the color worked, thanks!

    #1433766

    mrdirby
    Member

    You site is set to private so I can’t see your page. Is there a chance you could open it up so I can take a look?

    #1433788

    lisarhode
    Member

    sure, thanks for taking a look.

    #1433792

    mrdirby
    Member

    OK one more thing, could you add the image you want to use. I’m not sure how to adjust your header without seeing it.

    #1433793

    lisarhode
    Member

    Ok thanks, can you show the code so I can see how you did it?

    #1433796

    mrdirby
    Member

    I didn’t do anything to your site. That is how the graphic appears as part of the theme.

    #1433798

    lisarhode
    Member

    yes, I think that css could move it to the right and size the image down so that it fits under the tag line or further over to the left. Is this possible with the site theme?

    thanks

    #1433800

    timethief
    Member

    This is not a CSS solution. Note that many of those who use the Sight theme simply remove the optional tagline from here > Settings > General and include it on the header image.

    #1433801

    lisarhode
    Member

    OK sounds good. Is there a way to move the tagline text over to the right ?

    #1433803

    mrdirby
    Member

    Try this.

    .site-description {
    float: right;
    width: 33.283582%;
    }
    #1433804

    lisarhode
    Member

    It didn’t go.
    Is there a problem with the way it was encoded with the rest?

    .site-header {
    background-color: #DCE3E6;
    height: 420px;
    }
    .site-description {
    float: right;
    width: 33.283582%;
    }

    .page {
    background: #DCE3E6;
    }

    #1433805

    mrdirby
    Member

    Somehow the site-header width also is changed to 33.2..%.

    Can you check that the width is under .site description and not .site-header?

    #1433806

    lisarhode
    Member

    The CSS I added through the Sight theme via appearance > customize is
    height: 420px

    I don’t see .site-header anywhere else unless I look in my browser’s inspect element. Is the inspect element the place I should look for CSS .site-header?

    #1433807

    justpi
    Member

    Sight has a responsive layout, so you should probably forget all about this. Drag the browser window to make it narrower and see how things change.

The topic ‘Change header color and add picture’ is closed to new replies.