Widget Background Colour (Outreach Pro)

[Jack]

Hi,

We are using the Outreach Pro child theme and have placed the slider in the home-top like in the demo. but instead of the site inner being the grey we changed it to white but this also made the background for the home-top widget white. as it didn't have a background. How do we give the home-top widget area a background colour.

Any help is greatly Appreciated,

Kind Regards,

Pete.

[Pixel Frau]

You can do this by adding a short line of code to stylesheet.css. If you provide a link to the site, I can tell you what to add.

[Jack]

Hi

Thanks for your response the address is:
http://injuryactive.com/

[Pixel Frau]

The home-top widget area doesn't extend to either side of the slider, which is why the home-top background color you've added isn't showing. The slider is essentially covering up that background color.

Since you only want this to be changed on the homepage, you could add this to your CSS. Replace "hexcode" with the actual hex code for the color you want to use.

.home .site-inner {
background-color: #hexcode;
}

[Jack]

Thanks for your help it worked out great, one more question do you know how we would go about doing this at the bottom of the page with the new_home_widget area. we tried putting a background on just the widget but it didn't include the margin area.

Many Thanks,

Pete.

[Pixel Frau]

The best thing to do would be to add a wrap within the widget area. If you look at the source code for the other home widget areas, you'll see they all have a wrap.

Then you can add the background color to the widget area.

[Jack]

Is this what you meant, sorry new to css. we also tried including the margin css into it and it didn't change anything either. any tips?

.new_home_widget .wrap {
	background color: #353535;
}

[Jack]

This is the current code for the widget area

.new_home_widget {
	margin: 30px 10% 0 10%;
}

[Pixel Frau]

You added the new_home_widget widget area to the theme, right? It looks like you didn't add a wrap when adding that widget area. Adding the wrap will solve the problem.

Or change the margin to padding in your exisiting CSS, then add the background color.

[Author]

Posts