Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 2, 2014 at 6:31 pm #312460
    bemofunny

    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

    September 3, 2014 at 6:05 am #312636
    Ismael

    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

    September 3, 2014 at 7:44 am #312683
    bemofunny

    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

    September 5, 2014 at 2:20 am #313719
    Josue

    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

    September 5, 2014 at 3:07 am #313733
    bemofunny

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

    September 5, 2014 at 3:12 am #313737
    Josue

    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

    September 5, 2014 at 3:33 am #313746
    bemofunny

    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 :-(.

    September 5, 2014 at 3:38 am #313750
    bemofunny

    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!

    September 5, 2014 at 3:49 am #313758
    Josue

    Hey!

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

    Regards,
    Josue

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