Need help? Check out our Support site, then

Change header color and add picture

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


    The blog I need help with is

  2. 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,, and experiment with the right height.

  3. 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?

  4. ...the color worked, thanks!

  5. 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?

  6. sure, thanks for taking a look.

  7. 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.

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

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

  10. 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?


  11. 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.

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

  13. Try this.

    .site-description {
    float: right;
    width: 33.283582%;
  14. 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;

  15. 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?

  16. 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?

  17. 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.

Topic Closed

This topic has been closed to new replies.

About this Topic