Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • February 2, 2019 at 11:29 pm #1062085
    KarenBH

    Hello –
    There is a halo burst around linked icons. I would like to control this –
    1) Can it be turned off?
    2) Can I adjust the color? The burst is white, so doesn’t show on my white background.
    3) Can I make further adjustments to size, duration, etc.
    Thanks,
    Karen

    February 5, 2019 at 1:54 pm #1063176
    Basilis

    Hey KarenBH,

    Can you please explain us even with a screeshot, what is exactly ” Halo Burst “?

    Best regards,
    Basilis

    February 5, 2019 at 8:08 pm #1063286
    KarenBH

    HI Basilis,

    See link below for a gif. You can also see it live in the footer of my site, link below.
    Karen

    • This reply was modified 5 years, 9 months ago by KarenBH.
    February 8, 2019 at 5:19 am #1064402
    Mike

    Hi,
    Sorry for the late reply, to disable the sonar animation, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    .av_font_icon.av-icon-style-border .av-icon-char:after {
    display: none !important; 
}

    To change the color, please adjust this css:

    @-webkit-keyframes sonarEffect {
	0% {opacity: 0.3;}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,255,255,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(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,255,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,255,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(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,255,0.5);}
	100% {box-shadow: 0 0 0 2px rgba(255,0,255,0.1), 0 0 10px 10px #ff0000, 0 0 0 10px rgba(255,0,255,0.5);transform: scale(1.5);opacity: 0;}
}

    There are 3 sets of the same code to target the 3 types of browsers.

    Best regards,
    Mike

    February 8, 2019 at 6:20 am #1064426
    KarenBH

    Mike,
    Once again, you rock! I knew you would come through for me. Thank you so much and you may mark this ticket closed.
    Karen

    February 8, 2019 at 6:18 pm #1064712
    Nikko

    Hi Karen,

    Glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Halo burst around linked icons’ is closed to new replies.