Log in to support

How to set a different colour for each animated icon box

How to set a different colour for each animated icon box
January 8, 2014 Swift Ideas - Ed

If you wanted a different colour for each animated icon box, you would need to add a wrap around each icon box, like so:

<div class="icon-box-colour-one">
icon box image

"Quick

Getting started is easy. Install our demo content and you'll be on your way in no time at all.

</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 🙂

Comments (0)

Leave a reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.