Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #1269748


    I have an Icon Grid and would like to:

    1. Use some HTML code in the Grid Item Title to specify the background txt color. The HTML syntax however is displayed.
    2. Would like to remove the animation and just display the txt when you hover over the icon. Tried adding the following code to the QuickCSS setting but that doesn’t change anything.

    #top .avia-icongrid-tooltip li .avia-icongrid-front {
    bottom: 50% !important;
    -webkit-transform: translateY(50%) !important;
    -ms-transform: translateY(50%) !important;
    transform: translateY(50%) !important;

    Any advice on how I can get this working?

    Thank you,


    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,



    Thanks for your reply and update. What I would like to do however is highlight only a couple of words and not the complete title.
    See my homepage to illustrate what I am talking about.

    Your test code does work but the background of the complete title is changed.

    On my homepage I am using a Grid Row and in a number of cells I also included a Special Heading element.
    In the heading txt of these Special Headings, I specify HTML code to define the background col of a nr of words… This works fine.
    For example:
    Have A <span style=”background-color: #ffc000″ “color: #FFFF03”>Shared Business Language For My Data Assets</span> And Maintain It.

    When I specify this HTML code in the title of the Icon Grid, it displays HTML code and not the expected background col. How get the Icon Grid to display a title text with different background cols?

    Thank you


    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:

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


    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">


    <span class="red">

    and then use this css:

    #test_icon_grid h4.icongrid_title {
    	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,


    Perfect Mike. That’s indeed what was I looking for.

    Thank you for your swift and professional support.




    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 6 posts - 1 through 6 (of 6 total)

The topic ‘Icon grid remove animation & HTML code’ is closed to new replies.