Close

Account

Documentation

Forum

Menu

How to change color of each individual 'service icon item' icon?

  • Post count: 57
    Gator Cycle
    March 17, 2016 at 11:30 am #19120

    Trying to change the color of each individual ‘service icon item’ icon to a different color. I can change them all at once using the css suggested in other threads, but I’d like each one a different color. Here’s a screenshot of the page in question and the css code I’m trying to manipulate:

    service icon item wrapper screenshot

    Which has the affect of changing all of the icons, which I do not want:

    changed icon color

    And the page in question:

    http://www.gatorcycle.com/test-page/

    Each ‘service icon item’ has been given an extra class name.

    I assumed I would use something like the following but it does not work and I can’t find a variation of code that has the affect I’m looking for:

    To summarize, I’d like to make one icon blue, another red, another green, and so on. Any help would be appreciated.

    • This topic was modified 1 year, 9 months ago by  Gator Cycle. Reason: wrong forum
    Post count: 6693
    Adek
    March 18, 2016 at 6:15 am #19141

    Hi Gator Cycle,

    I’ve try to visit the url that you provide on above, but it goes to 404 page. Can you help me to provide the page url that you want to make this kind of change, i will check it further.

    Thank you

    Post count: 57
    Gator Cycle
    March 18, 2016 at 10:09 am #19148

    My apologies. It was published as a private page. Please try the link again:

    http://www.gatorcycle.com/test-page/

    Post count: 57
    Gator Cycle
    March 18, 2016 at 11:13 am #19149

    A quick update: It would seem the ‘service icon items’ are not passing on the ‘extra class name’ added to each element. As such, I cannot single out individual elements to manipulate. Any idea why this would not be happening?

    Post count: 6693
    Adek
    March 22, 2016 at 1:49 am #19186

    Hi Gator Cycle,

    If you want to change the color on each icon you can use this code below and put them on the Additional Style :

    Let us know if you need something in there.

    Thank you

You must be logged in to reply to this topic.