Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #271305

    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

    #271308

    Hey ElementArt!

    Please turn on custom CSS field for Avia Layout Builder elements – http://kriesi.at/documentation/enfold/ (Purchase code hidden if logged out) -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

    #271332

    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

    . (Purchase code hidden if logged out) -1 .iconbox_icon { background-color: orange !important; } to the Quick CSS

    #271783

    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

    #271787

    Hi!

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

    Cheers!
    Yigit

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Coloured IconBox Icons’ is closed to new replies.