Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • November 23, 2014 at 3:33 am #356078
    Sladestyle

    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

    November 23, 2014 at 2:23 pm #356215
    Ismael

    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

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