[Solved] How to customize article comment stars with custom SVG or PNG

Hi,

Please follow the steps below: 

add_filter('wpdiscuz_full_star_svg', function () {
    return '<img class="wpd-star" alt="" src="' . get_template_directory_uri() . '/img/1.png" style="width:50px">';
});
add_filter('wpdiscuz_half_star_svg', function () {
    return '<img alt="" src="' . get_template_directory_uri() . '/img/2.png" style="width:50px">';
});

img.wpd-star:not(.wpd-active){filter:grayscale(90%)}

Thanks Asti! This is working pretty well except it won't let me click on it to actually do the rating. I did add one line of css: 

img.wpd-star:hover {filter:none !important;}

Now... previous ratings show correctly... and articles that aren't rated allow me to mouse over and it changes the icon. But when I click on it - nothing - the rating will not occur.

@legendsof 

Could you please provide us with the example URL? 

can you contact me by email I am getting blocked by wordfence

@legendsof 

Feel free to send me a private message.

@asti I cannot send a message to you, it says: 

You are not allowed to write a message yet.

You should have at least 5 approved posts in forum.

I can try again to get by wordfence, by adding some spelling mistakes in the message. Here goes: 

The Iaeh-jax on c l ick even(t) is atta.ched to the svg ob-jec.t and not an image ob-j-ect in the scr-ipt. So - th-at-is why the click will not5 w8rk an6more. 

More broken english:

I have tried to update the j&v& scr-ipt file but the ed;its do not seem to take effect, even after clear(ing ca.che and or disablin9 and re-ena-bling the plug.in. Ideas?

there is no event for an img object, just an svg object. See in the wpdiscuz script file: 

$('body').on('click', '#wpd-post-rating.wpd-not-rated .wpd-rate-starts svg'

At this point I'm using custom svg instead of img. Swapping out SVG works, and now the clicking works, but the hovering doesn't work correctly and once it's rated, the rating value is always 5.