[Resolved] Shared Counts plugin new icons hover color css

[Philippe]

Hi,

I am desperately trying to add the proper css for Reddit and Whatsapp icon colors when hovering over them. The instructions I found on https://generatepress-guides.com/2020/12/16/how-to-add-reddit-to-shared-counts/ are way too vague and all the tweaking I have been doing is to no avail.

Can you tell me what the good css is?

Thank you,

Philippe

[David]

Hi there,

can you share a link to the site where you’re trying to make those changes ?

[Philippe]

Sure. onehomeplanet.com

I placed the Shared Counts plugin shortcode in a widget in the right hand column.

[David]

Try this CSS:

.shared-counts-wrap.style-icon .shared-counts-button:hover.reddit svg {
    fill: #FF5700;
}
.shared-counts-wrap.style-icon .shared-counts-button:hover.whatsapp svg {
    fill: #25D366;
}

[Philippe]

It works. How would I have ever known how to write this code?

[David]

Thats a trickier one, as i had to look for the SVG icon, to see it was using a Fill Color.
Then i had to look where the :hover event was most likely to take place. Which i assumed would be on the <a> link.

So by right click > inspecting the SVG icon, i could trace back to the link, apply a hover and then look around for the correct CSS. See here:

[Philippe]

Wow! That will be more than helpful. Thank you very much!

[David]

You’re very welcome 🙂

[Author]

Posts