I would like to customize the article rating div, instead of showing stars would like to show a custom image. I already have a similar ratings system for other parts of the website where we use a custom image, and would like it to look consistent in the article comments sections as well. Do I need to modify code to do this (and if so where), or could i do this in CSS somehow. I've been experimenting with CSS and it seems like it should probably be somewhere in code or using a custom hook. Thanks in advance for any help anyone can offer.
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.
can you contact me by email I am getting blocked by wordfence
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'