Changing the header background colour and gap between slider

Tagged: colour, css, header bar

This topic has 8 replies, 2 voices, and was last updated 9 years, 7 months ago by Wes.

Viewing 9 posts - 1 through 9 (of 9 total)

Author

Posts
October 18, 2013 at 12:42 pm #8263

crewem
Customer

Hi I’ve just started developing a site for a client and am trying our Ally for this site. I’ve previously done tinkering with the Magazine theme from Studiopress but the CSS for Ally is confusing me a bit! I can’t find the bit of code where to change the colour for the header background. It’s white but I need it to be grey! Also, as much as I fiddle with firebug, I still can’t find a way to cut the gap between the slider and the header bar?
The site is kindredexchange.info

Any help is much appreciated!

October 18, 2013 at 10:28 pm #8274

Wes
Moderator

If you want the entire header area to be gray, you can take a look around line 1508 in your css file for the .head-wrap and add in your background code there. The end result would look like this – http://i.imgur.com/RLQ5r8t.png

The gap you see is the bottom margin from – .site-header .wrap on line 1518 in your css. So just remove that margin if you want, and adjust the height of your title/header area.

October 19, 2013 at 7:10 pm #8309

crewem
Customer

Hi Wes

What code do I have to add in to make that background grey? I get that the site looks bizarre now but want all my pieces in place before I do any more tinkering to my uploads!

October 19, 2013 at 7:14 pm #8310

crewem
Customer

Also how do I go about making the change to my title/header area?

October 19, 2013 at 11:24 pm #8336
Wes
Moderator
I just added the gray background color to the .head-wrap as mentioned earlier….like this –
```
.head-wrap {
    background: #838383;
    color: #666;
    padding: 0 0 0px;
}
```
So just do that same thing in your css and adjust as needed.
October 21, 2013 at 9:06 am #8371

crewem
Customer

Wes thank you so much, you have been so helpful! I literally have one last question about that damn header. Now I did what you said about the margins but is there no way I can get the gap between the slider and the logo and menu bars closer together? It’s like 100px at the moment but would want the gap to be maybe 10? Like, not much of a gap at all! Again, thank you though!

October 22, 2013 at 2:24 pm #8387
Wes
Moderator
Most of that extra space is coming from the header widget area. Look around line 1604 in your css and lower the padding for the top and bottom –
```
.header-image .site-header .widget-area {
    padding: 40px 0;
    padding: 2.5rem 0;
}
```
October 25, 2013 at 7:32 am #8441

crewem
Customer

Hi Wes

Changing this has only moved the footer widget higher up the header bar. What i want to do is minimise the gap between the slider and the header image that says Kindred. The image I uploaded for Kindred is very tightly cropped so that’s not the issue?

October 25, 2013 at 10:27 am #8446
Wes
Moderator
This doesn’t affect the footer widget, this code is for the header right widget area…..is that what you meant?

The other part you’ll need to edit is the min-height for the title area. It has a minimum height of 164 (by default) so you can adjust this around line 1589 in your css –
```
.header-image .site-title a {
    float: left;
    min-height: 130px;
    width: 100%;
}
```
and that will bring the slider right up under the logo. You needed to remove the space from the header right widget area first and then the default height from the title area.

This is the end result – http://i.imgur.com/uCPllQq.jpg
Author

Posts

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.