Icon Box

[dhikr2]

Hi Guys
I got help from Shakeel the last time around.
I would like the icon boxes to be of different color.4
Could you help me out with this?
This is what I got the last time.

li.job .job-text {
display: none;
}

.carousel-item figure.animated-overlay figcaption {
display: none;
}

/*changes for the important form fields
==================================================*/
.wpcf7-form-control{
background-color: #96a2e2 !important;
color: #FFFFFF !important;
}
/*sf-button*/
a.sf-button {
margin: 0;
}
/* Front icon colour */
.icon-box-colour-one .sf-icon {
color: #004681!important;
}
/* Front text colour */
.icon-box-colour-one .sf-icon-box-animated .front h3 {
color: #004681!important;
}
/* Flipside background colour */
.icon-box-colour-one .sf-icon-box-animated .back {
background: #004681!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #000!important;
}
.jobs .vcard {
display: none;
}

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

/* Front icon colour */
.icon-box-colour-three .sf-icon {
color: #e39c1f!important;
}
/* Front text colour */
.icon-box-colour-three .sf-icon-box-animated .front h3 {
color: #e39c1f!important;
}
/* Flipside background colour */
.icon-box-colour-three .sf-icon-box-animated .back {
background: #e39c1f!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #000!important;
}
/* Front icon colour */
.icon-box-colour-four .sf-icon {
color: #91aa34!important;
}
/* Front text colour */
.icon-box-colour-four .sf-icon-box-animated .front h3 {
color: #91aa34!important;
}
/* Flipside background colour */
.icon-box-colour-four .sf-icon-box-animated .back {
background: #91aa34!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #000!important;
}
/* Front icon colour */
.icon-box-colour-five .sf-icon {
color: #6a135c!important;
}
/* Front text colour */
.icon-box-colour-five .sf-icon-box-animated .front h3 {
color: #6a135c!important;
}
/* Flipside background colour */
.icon-box-colour-five .sf-icon-box-animated .back {
background: #6a135c!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #000!important;
}
/*sf-iconbox*/
div.sf-icon-box-content-wrap h3{font-size:16px;}
/* Front icon colour */
.icon-box-colour-six .sf-icon {
color: #a6ce39!important;
}
/* Front text colour */
.icon-box-colour-six .sf-icon-box-animated .front h3 {
color: #a6ce39!important;
}
/* Flipside background colour */
.icon-box-colour-six .sf-icon-box-animated .back {
background: #a6ce39!important;
}
/* Flipside text colour */
.sf-icon-box-animated .back, .sf-icon-box-animated .back h3 {
color: #000!important;
}
li.job .job-text {
display: none;
}
/*customised*/
#fscf_field1_3:focus{
border-color:#2E3192!important;
outline: none!important;
}
/* Mohammed SHAKEEL CODE */
.tp-bullets.simplebullets.round .bullet{width:16px}
/* Mohammed SHAKEEL CODE */
article.type-post .profile-image-wrap{width:20%}
.pricing-table-details p {
text-align: center!important;
}
.pricing-table-wrap.bordered .pricing-table-package {
text-align: center;
}

REPLY

[Kyle – SUPPORT]

Hi

You would need to set up extra classes to change the icon colors, then add the extra class the the icon box asset

– Kyle

[dhikr2]

Could you help me out with that?

[Kyle – SUPPORT]

Did Mohammad’s code not work or something?

– Kyle

[dhikr2]

This reply has been marked as private.

[Kyle – SUPPORT]

Your icon boxes don’t seem to have the extra classes anymore. You need to click the edit icon and add

icon-box-colour-one
icon-box-colour-two
icon-box-colour-three 

etc.

– Kyle

[dhikr2]

This reply has been marked as private.

[Kyle – SUPPORT]

Add mbo to your icon box and mt0 to your button

– Kyle

[dhikr2]

This reply has been marked as private.

[Kyle – SUPPORT]

In the extra class field. For the icon boxes have you used shortcode or page builder?

– Kyle

[dhikr2]

I have used the page builder.
and can u tell what to use in the icon box and the button again?

[Kyle – SUPPORT]

Click the pin icon, at the bottom of the options it says ‘extra class’ here you need to add mt0 and mb0

– Kyle

[dhikr2]

This reply has been marked as private.

[Swift Ideas – Ed]

In the button shortcode, add extraclass=”” as a parameter, you can then add your custom classes there.

– Ed

[dhikr2]

This reply has been marked as private.