Jump to content


Photo
- - - - -

Change Individual Color On Ibox Icons

ibox css colors coding design dms wordpress

  • Please log in to reply
9 replies to this topic

#1 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 10 January 2014 - 08:16 PM

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 



#2 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 January 2014 - 08:58 PM

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



#3 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 10 January 2014 - 09:12 PM

Sure thing, sorry I forgot to include it. http://www.connaughtweb.com/home/

 

It's still being built so don't judge it :-)



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 January 2014 - 09:32 PM

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. 



#5 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 10 January 2014 - 09:58 PM

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.



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 10 January 2014 - 10:10 PM

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



#7 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 10 January 2014 - 10:18 PM

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



#8 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 11 January 2014 - 12:45 AM

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;
}


#9 yogibear080

yogibear080

    Newbie

  • Members

  • 6 posts
  • LocationIreland
  • Country: Country Flag

Posted 11 January 2014 - 03:35 PM

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



#10 Danny

Danny

    Is Awesome!

  • Moderators
  • 15755 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 12 January 2014 - 11:51 AM

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







Also tagged with one or more of these keywords: ibox, css, colors, coding, design, dms, wordpress