Icon Box Colour

[russcurtis]

Hi There.

I have 8 animated icon boxes on my front page (see attached), displaying the different types of services that I am offering.

What I really need help with is to make each icon in each icon box a different colour. Also, when the box rotates 180 degrees, I want the backside of the box to be the same colour as it’s icon on the front side.

Please help urgently :/

Thank you!!

[Swift Ideas – Ed]

Hi there,

You would need to add a wrap around each icon box, like so:

<div class="icon-box-colour-one">
[sf_iconbox image="ss-stopwatch" character="" type="animated" title="Quick & Easy" animation="none" animation_delay="200"]Getting started is easy. Install our demo content and you'll be on your way in no time at all.
[/sf_iconbox]
</div>

Then you can add custom css to the box within theme options:

/* Front icon colour */
.icon-box-colour-one .sf-icon {
color: #222!important;
}
/* Front text colour */
.icon-box-colour-one .sf-icon-box-animated .front h3 {
color: #fff!important;
}
/* Flipside background colour */
.icon-box-colour-one .sf-icon-box-animated .back {
background: #222!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #fff!important;
}

Repeat for each one 🙂

Hope that helps!

– Ed

[russdante]

Hi Ed,

Really appreciate your support on this!! You’re the man!! However, I’m a little unclear what does “add a wrap” mean?

Thank buddy,
Russ

[russdante]

After adding the custom CSS, I tried copying and pasting the suggested code above directly into a text box but doesnt work. See attached outcome.

<div class=”icon-box-colour-one”>
[sf_iconbox image=”ss-stopwatch” character=”” type=”animated” title=”Quick & Easy” animation=”none” animation_delay=”200″]Getting started is easy. Install our demo content and you’ll be on your way in no time at all.
[/sf_iconbox]
</div>

[Tahir – SUPPORT]

Hi,
Did you copy paste the css in the custom css box in theme options ?.

Thanks
Tahir