Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 5, 2016 at 10:33 pm #608545
    jomtones

    Hi! Tried to follow the advice here – https://kriesi.at/support/topic/using-png-icons-in-enfold/

    I’ve got this working, but there’s only one ‘custom css’ field per iconlist – how can I add custom css per list item?

    Thanks!

    April 6, 2016 at 1:30 am #608590
    Josue

    Hi!

    There’s no easy way to set a custom class to sub elements but one thing you can do is target them numerically with CSS nth-child:

    .avia-icon-list > li:nth-child(1) {}
.avia-icon-list > li:nth-child(2) {}
.avia-icon-list > li:nth-child(3) {}

    Cheers!
    Josue

    April 6, 2016 at 10:59 am #608810
    jomtones

    Great, thanks for letting me know Josue – I’ll give this a go.

    April 6, 2016 at 11:12 am #608820
    Yigit

    Hi!

    Please do so and let us know so we can mark the thread as resolved or assist you further

    Best regards,
    Yigit

    April 9, 2016 at 8:02 pm #610656
    jomtones

    Thanks to both. I could do with some assistance with this if you can. It seems to target the overall area but I don’t know how to add images into the icon circles!

    April 10, 2016 at 12:30 am #610698
    Josue

    Here you go:

    #top .avia-icon-list > li .iconlist-char:before {
    content: "";
    height: 60px;
    width: 60px;
    background-size: contain;
    display: block;
}

#top .avia-icon-list > li:nth-child(1) .iconlist-char:before{
    background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) no-repeat top center;    
}
#top .avia-icon-list > li:nth-child(2) .iconlist-char:before{
   background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) no-repeat top center;    
}
#top .avia-icon-list > li:nth-child(3) .iconlist-char:before {
   background: url(https://kriesi.at/wp-content/themes/kriesi/images/logo.png) no-repeat top center;    
}
    April 10, 2016 at 9:51 pm #610850
    jomtones

    Thanks so much for this Josue, I’ll give it a go!

    April 10, 2016 at 11:15 pm #610867
    jomtones

    Works perfectly! You’re a star!

    Now is there anyway I can change the H class of the iconlist headers? Like make them H5 instead of H3 ;)

    April 11, 2016 at 7:12 am #611025
    Josue

    Hey!

    You’d need to edit that directly in /enfold/config-templatebuilder/avia-shortcodes/iconlist.php, line 434.

    $title_el = "h4";

    Regards,
    Josue

    April 13, 2016 at 1:27 pm #612706
    jomtones

    Many thanks. I may just edit my H sizes, might be easier!

    For future reference, can I do this with a Child theme and keep the main one intact?

    April 13, 2016 at 1:29 pm #612712
    Yigit

    Hey!

    Yes, please see – http://kriesi.at/documentation/enfold/add-new-or-replace-advanced-layout-builder-elements-from-child-theme/

    Regards,
    Yigit

    April 13, 2016 at 1:33 pm #612715
    jomtones

    Brilliant, thanks

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘PNG's in iconlist’ is closed to new replies.