Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #312460

    Is it possible to substitute Icon Font in Icon List with Image?

    Or is it possible to change the background color for each icon in icon list individually?
    Thanks,
    CJ

    #312636

    Hey bemofunny!

    Thank you for using Enfold.

    You can change the background of the icon list icon invidividually with this on Quick CSS or custom.css:

    .main_color .avia-icon-list li:first-child .iconlist_icon {
    	background: red;
    }
    
    .main_color .avia-icon-list li:nth-child(2) .iconlist_icon {
    	background: blue;
    }
    
    .main_color .avia-icon-list li:nth-child(3) .iconlist_icon {
    	background: green;
    }
    

    Cheers!
    Ismael

    #312683

    wow, thank you so much for your quick response. This is awesome but I got one issue:

    What happen if I have 4 columns and each column I have one Accordion with 2 Items each. That is a total of 8 items but I want them to have different colors. I do what you suggested only work if there is one Accordion with 8 items. Could you help?

    BTW, I have to change .main_color to alternate_color to have the css you provided to work. What is the difference between the two?

    Thanks,
    – CJ

    #313719

    Hi CJ!

    You can enable this to set a class to the icon lists and apply different styles to each of them:

    .custom_list_1 li:nth-child(1) .iconlist_icon {
    	background: red;
    }
    
    .custom_list_2 li:nth-child(1) .iconlist_icon {
    	background: blue;
    }
    
    .custom_list_3 li:nth-child(1) .iconlist_icon {
    	background: green;
    }

    Cheers!
    Josue

    #313733

    Hi Josue,
    This is cool but I must have done something wrong. Because I put the following CSS into my Custom CSS and it’s not taking it.


    .custom_list_1 li:nth-child(1) .iconlist_icon {
    background-color: #be171e;
    }

    .custom_list_1 li:nth-child(2) .iconlist_icon {
    background-color: #de4c1a;
    }

    .custom_list_2 li:nth-child(1) .iconlist_icon {
    background-color: #dd9e25;
    }

    #313737

    Hi!

    Did you apply custom classes to each list?
    http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Regards,
    Josue

    #313746

    wow!! I didn’t know that. I followed the instruction and added the line into functions.php and the new Custom CSS show up in editor.

    However, I added the class custom_list_1 into that field but it’s not taking the style :-(.

    #313750

    It work now!! I add !important to the css.

    Thank you so much for a great trick. Now that I modified the functions.php. I am worry what will happen when I upgrade to the next wonder update of this great theme?

    Thank you!

    #313758

    Hey!

    You could use a child theme or this plugin to store custom functions like that.

    Regards,
    Josue

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.