Icon box (boxed four) background color

[fmora617]

Hi there –

I am looking for assistance and information on how to change the color of the background of the icon box (boxed four) to another color. And also change the color of the text. See image here –> http://i.imgur.com/e8yQPcg.png

Thanks in advance!

Fabian

[Kyle – SUPPORT]

Hi

Add this to your custom css:

.sf-icon-box.sf-icon-box-boxed-four .sf-icon-box-content-wrap {
  background-color: #e5e5e5;
}
.sf-icon-box.sf-icon-box-boxed-four .sf-icon-box-content-wrap h3, .sf-icon-box.sf-icon-box-boxed-four .sf-icon-box-content-wrap p {
  color: #ffffff;
}

– Kyle

[fmora617]

Hi – this worked great so far.

However, how do I get the text to be white as well. See here –> http://i.imgur.com/yldpkLN.png

The text is black, I highlighted with the mouse so you can see it.

THANKS!!!!

[fmora617]

I’m all set!!! Was over thinking this!

Thanks!

[Kyle – SUPPORT]

Ok great, no problem

– Kyle

[stmarie]

Kyle, I’m trying this with an icon box 2, but I can’t seem to get the background to change. I added this to my child theme:

.sf-icon-box.sf-icon-box-boxed-two .sf-icon-box-content-wrap {
  background-color: #e4e4e4!important;
}
.sf-icon-box.sf-icon-box-boxed-two .sf-icon-box-content-wrap h3, .sf-icon-box.sf-icon-box-boxed-four .sf-icon-box-content-wrap p {
  color: #000000!important;
}

And in the customize window I’ve made sure “Boxed Content Coloured BG Color” is also set to #e4e4e4, but it’s still showing up as a white background for me.

You can preview it here: http://www.glutenfreegigi.com/test/

(disregard the image banner. since it’s not responsive, I’m trying to replace with this icon box)

Thanks,
Heather

[Mohammad – SUPPORT]

Hi,

@stmarie – Please attach marked screenshot image.
Thanks
Mohammad

[stmarie]

Mohammad, here’s a screenshot of a live page with the icon box. As you can see, there is no background color; it should be showing up with a background of #e4e4e4 instead.

Thanks,
Heather

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
Please use this custom css code:-

.sf-icon-box.sf-icon-box-boxed-two .sf-icon-box-content-wrap{
background:#eee !important;
}

Thanks
Mohammad

[stmarie]

Mohammad, I tried your code with no success. It’s still got a white background…

Thanks,
Heather

[Mohammad – SUPPORT]

Hi,
Where did you insert this code?
Thanks
Mohammad

[stmarie]

The code is in my child theme’s style.css file.

Thanks

[Mohammad – SUPPORT]

Hi,
Please insert all code at Admin -> Theme Options -> Custom CSS/JS.
Thanks
Mohammad

[stmarie]

That worked, Mohammad. I wonder why it won’t work in my child theme’s stylesheet, though?

Thanks again,
Heather

[Rui Guerreiro – SUPPORT]

Guess the css in the child theme is loaded after the parent theme css is loaded. The custom css is loaded first so it has different priority.

Glad it’s sorted.

Thanks Mohammad.

-Rui