Tagged: , , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • November 18, 2016 at 6:18 pm #714133
    Jambo

    Hi guys,

    I’m trying to change the colour of the sonar blip that happens on mouse over. Currently it’s white and i’d like to be able to plug in #5c5c5c instead.

    I found the code below from Ismael in a thread some time ago but it changes the colour of my font, buttons and other elements that don’t need altering.

    /* Sonar icon hover effect
    ———————————*/
    @-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;

    Thanks for the help,

    Jambo

    November 21, 2016 at 7:43 pm #714947
    Yigit

    Hey Jambo,

    Please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and then edit your icon element and give it a custom CSS class (“custom-icons” in example below) and then add following code to Quick CSS in Enfold theme options under General Styling tab

    .custom-icons a.av-icon-char:hover:after {
-webkit-animation: sonarEffectNew 1s ease-out !important;
-moz-animation: sonarEffectNew 1s ease-out !important;
animation: sonarEffectNew 1s ease-out !important;
}
@-webkit-keyframes sonarEffectNew {
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 sonarEffectNew {
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 sonarEffectNew {
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;}
}

    Best regards,
    Yigit

    November 21, 2016 at 8:02 pm #714957
    Jambo

    Hey Yigit,

    Thanks for the help, the site colours don’t spoof up anymore.

    I’m was just trying to change the colour of the sonar by replacing the rgba 87,81,73 with 145,201,195 but no luck. I’m not touching the decimal at the end which i presume is opacity. I’ve tried fiddling around with the hex code as well but still no change there.

    Thanks!

    Jambo

    November 21, 2016 at 8:04 pm #714959
    Yigit

    Hi,

    Please post us your login credentials (in the “private data” field), so we can take a look at your backend.

    Login credentials include:

    • The URL to the login screen.
    • A valid username (with full administration capabilities).
    • As well as a password for that username.
    • permission to deactivate plugins if necessary.

    Also, please point out the page and icon you would like to customize

    Best regards,
    Yigit

    November 21, 2016 at 8:10 pm #714962
    Jambo

    Thanks bud,

    Credentials below.

    James

    November 21, 2016 at 9:29 pm #714996
    Yigit

    Hi!

    I created a testing page and it does work for fine. Please review the page and make sure that you are linking your icons.

    Regards,
    Yigit

    November 21, 2016 at 10:50 pm #715036
    Jambo

    Cheers Yigit,

    It was just a typo. Thanks so much for the effort you went to despite my incompetence! You can close the topic now, thanks!

    Jambo

    November 21, 2016 at 11:01 pm #715040
    Yigit

    Hey!

    You are welcome!

    For your information, you can take a look at Enfold documentation here – http://kriesi.at/documentation/enfold/
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here – https://kriesi.at/support/enfold-feature-requests/
    For any other questions or issues, feel free to post them here on the forum and we will gladly try to help you :)

    Regards,
    Yigit

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Linked icon sonar colour’ is closed to new replies.