Change background color on Icon box

[mognes]

Hi,

I want to change the background color on some of the icon boxes. I have created this code i custom CSS:

.iconbox_color_one .sf-icon-box[class*="sf-icon-box-boxed-"] .sf-icon-box-content-wrap {
    background: #f5f5f2 none repeat scroll 0% 0% padding-box !important;
}

When i use el_class=”iconbox_color_one” it wont work. The bacground color is still #fff. Also I want to add opacity: 0.6; but I have not tested to add this since the code above won’t work.

I will be most greatfull for any help 🙂

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Guess it will be easier using the extra class field of the icon box.
Can you provide me admin credentials to setup one for your?

-Rui

[mognes]

Thank you for answering. I have added the extra class to the icon box, ex:

[sf_iconbox image="ss-heart" character="" color="accent" type="boxed-two" title="Velkommen!" animation="none" animation_delay="200" link="" target="_self" el_class="iconbox_color_one"]
Text
[sf_button colour="accent" type="standard" size="large" link="http://www.strikkefruene.com/oppskrifter/" target="_self" icon="ss-heart" dropshadow="no" extraclass=""]Våre strikkeoppskrifter[/sf_button]
[/sf_iconbox]

I’m finding my credential, I have autologin to all logins, so don’t remember.

[mognes]

This reply has been marked as private.

[David Martin – Support]

Hi,

Assuming the extra class is in the right element, this will work:

.iconbox_color_one .sf-icon-box-content-wrap {
    background-color: rgba(245, 245, 242, 0.6) !important;
}

[mognes]

It still doesn’t work. The background is still white.

You can see on the homepage: http://www.strikkefruene.com Top row

Cusom CSS:

.iconbox_color_one .sf-icon-box-content-wrap {
    background-color: rgba(245, 245, 242, 0.6) !important;
}

Iconbox:

[sf_iconbox image="ss-heart" character="" color="accent" type="boxed-two" title="Velkommen!" animation="none" animation_delay="200" link="" target="_self" el_class="iconbox_color_one"]
Text
[sf_button colour="accent" type="standard" size="large" link="http://www.strikkefruene.com/oppskrifter/" target="_self" icon="ss-heart" dropshadow="no" extraclass=""]Våre strikkeoppskrifter[/sf_button]
[/sf_iconbox]

[David Martin – Support]

You are adding the class above the entire slider?

You have not got any classes output for the icon boxes themselves. You can see this in the source code.

Knowing this, the CSS provided will create this:

The reason the CSS is not working is because you have a huge CSS error, you must remove the HTML you pasted into your CSS option.

[mognes]

I see! Oh my, of course! Yes that was misplaced long ago, and I didn’t delete it since I didn’t remember my plan with it. I’m still a rookie 😉 Now it works, wohoo.

Thank you so much for you help, much appreciated!

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks David.

-Rui

[Rui Guerreiro – SUPPORT]

Glad it’s sorted. Thanks David.

-Rui