The effects of alcohol on sustanon 250 leucine for – real weight loss & bodybuilding benefits?
How to customize ar...
 
Share:
Notifications
Clear all

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

11 Posts
2 Users
0 Reactions
464 Views
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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.

10 Replies
Asti
Posts: 7661
 Asti
Support
(@asti)
Illustrious Member
Joined: 7 years ago

Hi,

Please follow the steps below: 

1. Insert the following code into the active theme's functions.php file:
 
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">';
});
 
2. Insert the CSS code below into 'Top Admin Bar' > 'Customize' > 'Additional CSS' > 'Additional CSS' textarea:
 
img.wpd-star:not(.wpd-active){filter:grayscale(90%)}
 
3. Create a new 'img' folder in your theme directory and upload two images (for example 1.png, 2.png) there. Alternatively, you can upload the images to your media library. If you choose the latter, make sure to adjust the image path in the code provided in Step 1 accordingly.
Reply
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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.

Reply
1 Reply
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7661

@legendsof 

Could you please provide us with the example URL? 

Reply
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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

Reply
2 Replies
Asti
 Asti
Support
(@asti)
Joined: 7 years ago

Illustrious Member
Posts: 7661

@legendsof 

Feel free to send me a private message.

Reply
(@legendsof)
Joined: 3 months ago

Eminent Member
Posts: 17

@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.

Reply
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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. 

Reply
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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?

Reply
Posts: 17
Topic starter
(@legendsof)
Eminent Member
Joined: 3 months ago

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'
Reply
Page 1 / 2
Share: