Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #356078

    Hi, I noticed on a recent update to enfold the Icons have a halo type of hover effect. My background is too light to see it very well. I can’t seem to be able to target it using firebug. How do I either change the color and/or opacity so it shows up on lighter backgrounds?

    Thanks!
    Slade

    #356215

    Hey Slade!

    Thank you for using Enfold.

    Can you please give us a link to the actual page with the icon effect? If you’re referring to the sonar effect, try this on Quick CSS:

    @-webkit-keyframes sonarEffect {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);-webkit-transform: scale(1.5);opacity: 0;}
    }
    @-moz-keyframes sonarEffect {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);-moz-transform: scale(1.5);opacity: 0;}
    }
    @keyframes sonarEffect {
    	0% {opacity: 0.3;}
    	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);}
    	100% {box-shadow: 0 0 0 2px rgba(87,81,73,0.1), 0 0 10px 10px #575149, 0 0 0 10px rgba(87,81,73,0.5);transform: scale(1.5);opacity: 0;}
    }
    
    .av_font_icon.av-icon-style-border .av-icon-char:after {
    	box-shadow: 0 0 0 2px rgba(87,81,73,0.1) !important;
    }

    You have to change the box shadow color.

    Regards,
    Ismael

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.