Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • June 10, 2020 at 6:58 pm #1221332
    fcp

    Hi,
    I modified Instagram icon color on hover adding this code:
    #top #wrap_all .av-social-link-instagram a:hover {background: linear-gradient(45deg,rgba(254,218,219),rgba(245,133,41),rgba(221,42,123),rgba(129,52,175))!important;}
    It works great but there still is a small issue: the original color (brown) is still visible when mouse approaches the icon and is not on the icon yet.
    To be clearer, I made a video of the issue in private content.
    Where does this issue come from and how could I fix it?
    If needed, you also can find a link and credentials to my website in private content.
    Thanks a lot!

    June 10, 2020 at 10:56 pm #1221442
    Nikko

    Hey fcp,

    Please try to replace your selector, from:

    #top #wrap_all .av-social-link-instagram a:hover

    to:

    #top #wrap_all .av-social-link-instagram:hover a

    Hope it helps.

    Best regards,
    Nikko

    June 12, 2020 at 4:18 pm #1222119
    fcp

    Hi Nikko,
    It helps a lot! Thank you! :-)
    Only one little thing more: on hover, the icon itself seems to become white in a fade (it’s like blue->grey->white).
    How could it become white directly?
    Thanks a lot!

    June 12, 2020 at 10:09 pm #1222195
    Nikko

    Hi,

    You’re welcome, just remove the transition and that should do it:

    #top #wrap_all .social_bookmarks a {
    transition: none !important;
}

    Hope this helps. :)

    Best regards,
    Nikko

    June 13, 2020 at 6:27 pm #1222387
    fcp

    Hi Nikko,
    It works perfectly!
    Do you think it’s possible to keep this fade transition on icons backgrounds and just remove it on icons?
    Thanks a lot!

    June 15, 2020 at 11:13 pm #1222849
    Nikko

    Hi fcp,

    You’re welcome :)
    Please try to replace this code I gave:

    #top #wrap_all .social_bookmarks a {
    transition: none !important;
}

    with:

    #top #wrap_all .social_bookmarks a {
    transition: background 0.3s ease-out;
}

    Best regards,
    Nikko

    June 17, 2020 at 11:17 pm #1223520
    fcp

    Hi Nikko,
    I’m sorry but I don’t know why it only works on facebook icon, but not on instagram icon…
    Any idea?
    Thanks a lot!

    June 18, 2020 at 12:56 am #1223548
    Jordan Shannon

    Hi,

    Did you clear the cache a few times over? The old style may still be cached.

    Best regards,
    Jordan Shannon

    June 18, 2020 at 1:24 am #1223551
    fcp

    Hi Jordan,
    I cleared the cache many times and I tried on different browsers, but nothing changed.

    June 19, 2020 at 12:08 am #1223911
    Nikko

    Hi fcp,

    Can you try to flush out Autoptimize and temporarily disable it.
    Then if you have a caching plugin please flush out as well.

    Best regards,
    Nikko

    June 19, 2020 at 12:59 am #1223922
    fcp

    Hi Nikko,
    I tried to clear cache again, to clear Autoptimize cache, to refresh, to disable Autoptimize, and so on… but nothing new.
    So as you could see on my page, I tried to add a Twitter icon and transition works perfectly on it! Si I think the issue comes from somewhere in my code, but I don’t know where.

    June 19, 2020 at 12:24 pm #1224035
    Yigit

    Hi,

    I think linear-gradient backgrounds do not support transition.
    You could try changing the code to following one and make it less noticeable 

    #top #wrap_all .social_bookmarks a {
    transition: all 1s ease-out !important;
}

    Regards,
    Yigit

    June 19, 2020 at 11:30 pm #1224184
    fcp

    Hi Yigit,
    I tried to deactivate linear-gradient background and I think you’re right.
    Your last solution is not the best for me :-(
    If you think about another solution, maybe targeting another div to avoid the linear-gradient problem, let me know.
    If not, I think I gonna disable all transitions.
    Thanks a lot! ;-)

    June 22, 2020 at 10:46 am #1224549
    Yigit

    Hi,

    I am afraid for linear-gradient backgrounds we do not have a solution. It could be possible with some tricks maybe with JS but unfortunately, I do not have any pointers.

    Best regards,
    Yigit

    June 22, 2020 at 10:52 pm #1224740
    fcp

    Okay!
    Thanks for all, Yigit! ;-)

    June 23, 2020 at 1:30 am #1224755
    Nikko

    Hi fcp,

    Thanks for understanding, let us know if you need further assistance or if we can close this thread.

    Best regards,
    Nikko

    June 23, 2020 at 1:35 am #1224756
    fcp

    Hi Nikko,
    You can close this now.
    Thank you too! ;-)

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • The topic ‘Modify social icons color’ is closed to new replies.