Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #208727

    Is it possible to have a different image overlay text/icon font for different content.

    For example, I have products that I would like to have a specific icon, like a magnifying glass.
    But I also have pics that lead to a blog post that shouldn’t have the magnifying glass. I would rather have it be an arrow or something else.

    Is this possible?

    #208776

    Hey jtree5757!

    Please see Ismael’s post here https://kriesi.at/support/topic/rollover-disc-arrow-replacement-part-2/#post-121206

    Regards,
    Yigit

    #208780

    I’m still a little confused. Maybe you can clarify..

    	.image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
    	.image-overlay.overlay-type-extern .image-overlay-inside:before{content:"\E832";}
    	.image-overlay.overlay-type-video .image-overlay-inside:before{content:"\E897";}

    This is the only code that I found in the base.css that references font icons.

    Do you mind explaining the differences between the three for us please?

    Not sure how this will change the rollover icon for my products and regular images not related to my products. It seems like they are connected as they are classified as the same type in the above css. Sorry if I’m just misunderstanding.

    Thanks.

    #208811

    Hi!

    You can use the class of the surrounding div to change the content. I.e. if you want to use a different icon for product images use

    
    .single-product-main-image .image-overlay .image-overlay-inside:before{content:"\E869"; font-family: 'entypo-fontello'; font-size: 18px; font-weight: normal; }
    

    and this rule will overwrite the default icon.

    The difference between the three css code lines is just the icon. \E869 is the default icon, \E832 is the icon for external links and \E897 is the video icon.

    Regards,
    Peter

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

You must be logged in to reply to this topic.