Hi there, I want to restyle the icon boxes when an icon is on the side so they use the theme colour. The best way to describe what I’m trying to achieve is with a link to a mock up I’ve produced. Are you able to help as I’ve tried adding custom CSS but nothing is working.
Thanks
Hey Rustybucket!
Please add following code to Quick CSS
span.iconlist-char {
color: white;
background-color: #a30134;
padding: 10px;
}
Cheers!
Yigit
Humm, I added this but it made no difference, the icon still appears at the top of the icon box with a round background and the grey background with the border. Did you see what I was trying to achieve with the drop box link?
Cheers
EDIT – Actually I can see this as changed the icon list but it was the icon box I was trying to change :)
Your solution works well thank you so we can close this down, thanks again.
EDIT – One final thing, can I remove the dashed line that joins the icons as they animate & is there a way of controlling the iconlist icons on the home page so they are a different colour?
Cheers
Hi!
Yes, use this css code to remove the dashed line:
.avia_transform .avia-icon-list .avia_start_animation .iconlist-timeline{ display: none !important; }
If you want to change the color of the icons on a certain page use this code:
.page-id-812 .main_color .avia-icon-list .iconlist_icon {
background-color: #d0d0d0;
}
.page-id-812 .avia-icon-list .iconlist_icon {
color: #ffffff;
}
and replace 812 with the page id of you page and the color values with your custom color values.
Regards,
Peter