Can i change the color for the images for hover, active, etc. via CSS?

The color of icons changes to differentiate the active icon (the one you voted) from others; you may choose your favorite effect choosing between Blur, Transparency and Grayscale, those effects are all done via CSS, if you want to apply your own css effects you may disable the built-in fade method and add some CSS to your theme.

Here is a sample CSS you may add to your theme css to change colors of reaction icons:

div.da-reactions-container div.reaction:hover img {
    /* hover on a buttons group you never voted -> sepia colors */
    filter: sepia(100%);
}
div.da-reactions-container.has_current div.reaction.active img {
    /* the reaction you voted -> default colors */
    filter: none;
}
div.da-reactions-container.has_current div.reaction img {
    /* other reactions on a group that contains your vote -> grayscale */
    filter: grayscale(100%);
}
div.da-reactions-container.has_current div.reaction:hover img {
    /* hover effect on reactions on a group that already contains your vote -> negative colors */
    filter: invert(100%);
}

Leave a Reply

Your email address will not be published. Required fields are marked *