Jump to content

Archived

This topic is now archived and is closed to further replies.

yogibear080

Change Individual Color On Ibox Icons

Recommended Posts

yogibear080    1
yogibear080

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 


_______________________________________________________________________________________________________________________Yogibear080. www.connaughtweb.com/home

West of Ireland

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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. 


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
yogibear080    1
yogibear080

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.


_______________________________________________________________________________________________________________________Yogibear080. www.connaughtweb.com/home

West of Ireland

Share this post


Link to post
Share on other sites
greenfly    230
greenfly

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


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
yogibear080    1
yogibear080

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


_______________________________________________________________________________________________________________________Yogibear080. www.connaughtweb.com/home

West of Ireland

Share this post


Link to post
Share on other sites
James B    436
James B

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

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
yogibear080    1
yogibear080

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


_______________________________________________________________________________________________________________________Yogibear080. www.connaughtweb.com/home

West of Ireland

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

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


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • JawDesigns
      By JawDesigns
      Hi everyone,
      Flywheel have reported errors on my clients site 'www.racewaredirect.co.uk' and it's not loading. Can someone please provide some information on how to fix this? The site has never experienced these issues before.
      Thanks,
      James Wilson
    • MissT
      By MissT+
      Hi there,
      I've got an issue with 3 websites built with DMS since I migrated them from http to https that I need help with please.
      When any changes are made - e.g. new posts added or existing posts amended - certain sections of the live site seem to break e.g. image headers hang and don't load (b/g on canvas section), sliders hang and don't load (Revslider), flipper section doesn't load.
      Logging in and then clicking 'Edit the site using DMS' seems to fix the problem. Often if I try to open up another browser window to edit the site / re publish I'm unable to as the page wont load / hangs while trying to load.
      Any ideas how to fix this? On a couple of the sites I've installed a caching plugin as I thought it might be a loading speed issue but it's still happening.
      Website URL's can be provided privately.
      Many thanks in advance.
    • jeomiland
      By jeomiland+
      Hi
      I found this topic
      which talks about a similar issue I am having, but a little different. Hope someone can help me out.
      Best way to see the problem is to view http://cassclayton.com/ on Safari (Mac) compared to Firefox or Chrome. You will see the banner just under the fixed menubar has a gap between the menubar and top of the banner. Looking at Inspector, I found:
      <div class="fixed-top-pusher" style="height: 62px;"></div>
      <script> jQuery('.fixed-top-pusher').height( jQuery('.pl-fixed-top').height() ) </script>
      and indeed it seems the jquery is not always working consistently. For instance, if you simply refresh the page in Safari, it will loose the gap and all looks fine, so is it a browser cache issue that is interacting with the jquery? I do have W3 Total Cache installed. There must be a way to tell the code to make sure jquery is up and running and available to do it's majic?
      And perhaps there is just a better way to do this banner? Originally I tried several DMS sections and used the banner image as background, etc... Kept running into problems with resizing and the left/right parts of the image were getting chopped off. It is important the whole image show, so currently I just use a NextBox section with this code:
      <img src="[pl_site_url]/wp-content/uploads/2015/12/CassClayton-blues-tribute-banner.jpg" width="100%" />
      and it looks the way it should. Is there a better way to place a banner graphic under a fixed navbar and make sure the whole banner graphic displays regardless of screensize?
       
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      every since Chrome introduce scroll anchoring (see chrome://flags) blog posts on my page start scroll automatically as soon as the user scrolls down a bit. It is super annoying and I don't know exactly what triggers the incompatibility with Chrome's latest feature that is supposed to improve usability.
      Since I don't know what causes it (Pagelines, or a Plugin), I would like to disable the feature using a CSS override that Google describes as follow:
      "Scroll anchoring aims to be the default mode of behavior when launched, so that users benefit from it even on legacy content. A CSS property overflow-anchor can disable scroll anchoring in part or all of a webpage (opt out), or exclude portions of the DOM from the anchor node selection algorithm. This property supports the following values when applied to an element E:
      overflow-anchor: auto (the default value) declares that the DOM subtree rooted at E is eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E. overflow-anchor: none declares that the DOM subtree rooted at E is not eligible to participate in the anchor node selection algorithm for any scrolling box created by E or an ancestor of E." Do you guys happen to know how to use that property with the ROOT element so it applies to the whole page?
      Thanks
      Michael 
    • oseehys
      By oseehys+
      Hello There,
      So i want to use platform 5 and DMS sections on a single page, i am using a child theme with pinspro as my main theme and i activated platform 5, the only problem am having so far is the fixed option, my navbars are not aligning to their default size, and it will be great if platform 5 header and footer section will function, has anyone used this option, how can i make the best use of platform 5 and DMS on a site
      Cheers
×