Change header color and add picture

lisarhode · Member · Sep 11, 2013 at 7:54 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
mrdirby · Member · Sep 11, 2013 at 8:01 pm
Copy link
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.
lisarhode · Member · Sep 11, 2013 at 9:08 pm
Copy link
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?
lisarhode · Member · Sep 11, 2013 at 9:14 pm
Copy link
…the color worked, thanks!
mrdirby · Member · Sep 12, 2013 at 4:30 pm
Copy link
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?
lisarhode · Member · Sep 12, 2013 at 9:29 pm
Copy link
sure, thanks for taking a look.
mrdirby · Member · Sep 12, 2013 at 10:17 pm
Copy link
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.
lisarhode · Member · Sep 12, 2013 at 11:17 pm
Copy link
Ok thanks, can you show the code so I can see how you did it?
mrdirby · Member · Sep 13, 2013 at 3:41 pm
Copy link
I didn’t do anything to your site. That is how the graphic appears as part of the theme.
lisarhode · Member · Sep 13, 2013 at 4:14 pm
Copy link
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
timethief · Member · Sep 13, 2013 at 5:07 pm
Copy link
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.
lisarhode · Member · Sep 13, 2013 at 5:37 pm
Copy link
OK sounds good. Is there a way to move the tagline text over to the right ?
mrdirby · Member · Sep 13, 2013 at 6:20 pm
Copy link
Try this.
```
.site-description {
float: right;
width: 33.283582%;
}
```
lisarhode · Member · Sep 13, 2013 at 6:48 pm
Copy link
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;
}
mrdirby · Member · Sep 13, 2013 at 6:55 pm
Copy link
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?
lisarhode · Member · Sep 13, 2013 at 8:41 pm
Copy link
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?
justpi · Member · Sep 13, 2013 at 8:56 pm
Copy link
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.

No items found.