• 0

Change Individual Color On Ibox Icons


Question

Posted · Report post

Hi,

 

I hope I am posting in the correct section here and I apologize in advance if not. I am wondering if someone could help me here. I am looking to change individual colors on the ibox icons. I have managed to change them all to one color using my basic css skills but I am struggling here a bit with making them all different colors, ie. Facebook icon blue and another one red etc. I look forward to any reply as I'm seriously close to banging my head off the wall :-( Cheers in advance.

 

Yogibear080 

Share this post


Link to post
Share on other sites

9 answers to this question

  • 0

Posted · Report post

Could we have a link to your site please and any examples of code you have tried? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

When you set up iboxes you have the option to add a class to each individual ibox. Add a custom class to each individual i box and then you can add some custom CSS for each class.

 

\For this example imagine i add the custom class bx1

 

The Custom code to change each box color is

 

.bx1 .pl-contrast {
  background-color:#333333;
  background-position:initial initial;
  background-repeat:initial initial;

}

 

Change #333333 for your desired color. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sorry it doesn't seem to make any difference. I put the code into the section in the ibox setup section and I also tried it without the current code on my page and still nothing happened. I inspected the element on my browser and seen the code there but no changes took effect.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

did you add the custom code to the custom code tab in the visual editor and the class to the settings in the ibox local settings? http://d.pr/i/Fw4V

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I did yes and nothing is happening. I have done it through the Wordpress Editor too and nothing is changing.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

To change the color on a box icon you'll need to use the following css

 

.section-ibox .media-type-icon {
    background: none repeat scroll 0 0 #FFFF00;
    box-shadow: 0 0 5px #EAEAEA;
    color: #FFFFFF;
}
 
To change it on a per box basis, you'll need to use the box class you've set as a prefix. Something like
 
.bx1 .media-type-icon {
    background: none repeat scroll 0 0 #FFFF00;
    box-shadow: 0 0 5px #EAEAEA;
    color: #FFFFFF;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Cheers. I'll give this a go later thanks for the quick replies they are much appreciated.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Each iBox you create has an option to add a unique class to that specific iBox. So if you create some custom CSS like so:

 

.blue-text { color: #428BCA; }
.green-text { color: #5CB85C; }
.red-text { color: #D2322D; }

 

Then add one of the class names to your iBox like so - http://d.pr/i/gZH4

 

Then repeat the same process for each iBox giving it a classname from your custom CSS or use the code above, then you will end up with something like this:

 

http://d.pr/i/xPhR

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now