Icon grid remove animation & HTML code

Hey DimitriMTM,
Thank you for the login and test page, I cloned your element and removed the HTML from the title fields. I also added a custom ID to the element test_icon_grid
To add a background color to the titles, as your inline HTML would have created:

#test_icon_grid .av_icongrid_title {
	background-color: #ffc000;
	color: #ffff03;
}

To remove the animation and just display the txt:

#test_icon_grid li .avia-icongrid-flipback,#test_icon_grid li .avia-icongrid-front {
	transition: none !important;
}

I added this to your test page via a code block element, please clear your browser cache and check.

Best regards,
Mike

Hi,
Thanks for your feedback, the core issue here is that the “title” fields do not allow HTML entities, as you can see from the warning in the element:

If you follow the link in the warning it leads to this documentation that explains a plugin the dev team developed to address this.
I installed the plugin for you and adjusted the title code to add a span class to the words you want to highlight, like this:
from

Have A <span class=red>Shared Business Language For My Data Assets<span> And Maintain It.

to

Have A ###lt###span class=red###gt###Shared Business Language For My Data Assets###lt###span###gt### And Maintain It.

I recommend using a span class instead of inline css, so instead of:

<span style="background-color: #ffc000" "color: #FFFF03">

use:

<span class="red">

and then use this css:

#test_icon_grid h4.icongrid_title span.red {
	background-color: #ffc000 !important;
	color: #ffff03 !important; 
}
#test_icon_grid h4.icongrid_title span {
	background-color: #fff !important;
	color: #000 !important; 
}

and the rough result is:

I applied this to the bottom test element on your test page, the css is in the code block element on the same page for you to review.
Please clear your browser cache and check the test page.

Best regards,
Mike