Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • May 28, 2014 at 5:58 pm #271305
    Valinsy

    Hi all,
    I’ve seen this query previously but I’m having issues customising it. I have 3 icon boxes on the same page and I want each icon to be a different colour.

    I found this code
    .avia-builder-el-5 .iconbox_icon { background-color: #4f0c56!important; }
    .avia-builder-el-7 .iconbox_icon { background-color: #273691!important; }
    .avia-builder-el-9 .iconbox_icon { background-color: #b4d334!important; }

    but it only makes all 3 icons green (#b4d334) See here

    How do I make each icon a different colour?

    Many Thanks
    Grace

    May 28, 2014 at 6:01 pm #271308
    Yigit

    Hey ElementArt!

    Please turn on custom CSS field for Avia Layout Builder elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/
    then add custom class to each iconbox element and use following code instead

    .custom-class-1 .iconbox_icon { background-color: orange !important; }
.custom-class-2 .iconbox_icon { background-color: red !important; }

    Best regards,
    Yigit

    May 28, 2014 at 6:39 pm #271332
    Valinsy

    Thanks Yigit,

    I’ve managed to add the option for the CSS field but I’m not sure how to add custom class to each box.
    I know it is a very stupid question but for the above code to work what to I put in the CSS field? This is what I used but it isn’t working as all the icons have reverted to red

    afi-iconbox-col-1 to the field and then

    .custom-class-afi-iconbox-col-1 .iconbox_icon { background-color: orange !important; } to the Quick CSS

    May 29, 2014 at 1:52 pm #271783
    Valinsy

    hi Yigit,

    I finally got it – I can’t believe I didn’t see it before… in my defence I’m not a programmer so it takes me a while to wrap my head around it :)

    Many Thanks for all your help
    Grace

    May 29, 2014 at 1:55 pm #271787
    Yigit

    Hi!

    You are welcome Grace, glad you figured it out! :)
    Let us know if you have any other questions or issues

    Cheers!
    Yigit

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Coloured IconBox Icons’ is closed to new replies.