wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

Question [Solved] Change icons

15 Posts
2 Users
5 Likes
696 Views
Posts: 21
Topic starter
(@fueradelinea)
Eminent Member
Joined: 10 months ago

Hello,

First of all thanks for your great work.

I am trying to change all the icons in the plugin to adapt the design to my brand but WpDiscuz does not offer any way to do it, only through code (this should be implemented as an essential option to adapt the plugin to any theme or branding in my opinion).

I tried the tip you shared in this post and it works half-heartedly, as it only adds a like icon, so the downvote button disappears.

Also, as I said before I would want to change all the icons to make a harmonious professional design: the reply button, the two like buttons, the user info and the settings wheel so that everything works in unison.

https://ibb.co/F80Swht

Is there any way to do this at the moment?

14 Replies
Asti
Posts: 5779
 Asti
Support
(@asti)
Illustrious Member
Joined: 5 years ago

Posted by: @fueradelinea

I tried the tip you shared in this post and it works half-heartedly, as it only adds a like icon, so the downvote button disappears.

If you want to change the dislike button you should add the second argument in the hook-code 

add_filter("wpdiscuz_comment_list_args", function ($args) {
    $args["voting_icons"] = ["<svg xmlns='     https://www.w3.org/2000/svg     ' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z'/></svg>", 

/* this is the second argument */

"<svg xmlns='     https://www.w3.org/2000/svg     ' width='24' height='24' viewBox='0 0 24 24'><path d='M12 4.435c-1.989-5.399-12-4.597-12 3.568 0 4.068 3.06 9.481 12 14.997 8.94-5.516 12-10.929 12-14.997 0-8.118-10-8.999-12-3.568z'/></svg>"];
    return $args;
});

Also, as I said before I would want to change all the icons to make a harmonious professional design: the reply button, the two like buttons, the user info and the settings wheel so that everything works in unison.

You should change the template files like it's described here: 

https://wpdiscuz.com/docs/wpdiscuz-7/customization/custom-template-and-style/

2 Replies
(@fueradelinea)
Joined: 10 months ago

Eminent Member
Posts: 21

@asti Hi Asti,

Thank you for your fast reply. 

1. Before writing the post I had been exploring the files and I found the html templates you are talking about, but when I open them only 3 lines of code appear. How should they be opened to be able to edit them?

2. In the case of having to change the icons manually, could you tell me what is the code to enter in functions.php to change the "reply message" icon/arrow?

3. WpDiscuz development is active? To make suggestions to further improve the plugin (in my opinion). 

Regards, 

Álex

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5779

@fueradelinea,

1. Before writing the post I had been exploring the files and I found the html templates you are talking about, but when I open them only 3 lines of code appear. How should they be opened to be able to edit them?

You should do it as you like. You can use for example the WPIDE plugin. 

2. In the case of having to change the icons manually, could you tell me what is the code to enter in functions.php to change the "reply message" icon/arrow?

Watch this small video instruction: https://www.screencast.com/t/wckQpEanq6

In the video there is shown how to change the code in the plugin core files, however, you should make the changes as it's described in the doc, I've provided in the previous post. 

3. WpDiscuz development is active? To make suggestions to further improve the plugin (in my opinion).

Sure. Please share your suggestions. 

Posts: 21
Topic starter
(@fueradelinea)
Eminent Member
Joined: 10 months ago

Finally I've been able to change all the icons with your indications. Thank you Asti. Thank you a lot for your active support, what definitely makes the difference. I'll share my suggestions to try to contribute my bit to WpDiscuz. Where should I do it?

 

🖐️ Now I'm trying to find out how to delete the parenthesis from the replies label. Should I open a new topic?

https://ibb.co/MRjV6nD

 

Thank you a lot,

Álex

Posts: 21
Topic starter
(@fueradelinea)
Eminent Member
Joined: 10 months ago

Sorry for the double post by I have detected that replacing the like button in the .html document makes that it doesn't appears in the replies. It only happens on PC devices.

https://ibb.co/YX1tLYk

https://ibb.co/M5hGNjy

8 Replies
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5779

@fueradelinea,

Could you please leave the URL where we can see the issue? 

(@fueradelinea)
Joined: 10 months ago

Eminent Member
Posts: 21
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5779

@fueradelinea,

Please watch this video: https://www.screencast.com/t/OjJNGTnkJI

Here we show the reason why the image doesn't show. The image width/height is bigger than the size of the div where those are located. 

#wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-up, #wpdcom .wpd-comment.wpd-reply .wpd-comment-footer .wpd-vote-down {
    width: 35px;
    height: 35px;
}

The CSS code above is just an example you can change it as you like. 

(@fueradelinea)
Joined: 10 months ago

Eminent Member
Posts: 21

@asti ¡You are truly a masterpiece!

Continuing with previous posts to avoid spamming the forum with new threads...:

  1. Where should I investigate to delete the parenthesis from the replies label?
    https://ibb.co/MRjV6nD
  2. What is the code/class to make voted comments keep marked? https://ibb.co/9VqNnWh
  3. Where should I update my possible suggestions for WpDiscuz? 🙂 

 

Regards,

Álex

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5779

@fueradelinea,

Where should I investigate to delete the parenthesis from the replies label?

I'll ask the developers and let you know soon. 

What is the code/class to make voted comments keep marked?

You should use the wpd-up class. Video: https://www.screencast.com/t/alDxoXWP

Where should I update my possible suggestions for WpDiscuz?

Just open a new support topic with the "Suggestion" prefix. 

 

 

(@fueradelinea)
Joined: 10 months ago

Eminent Member
Posts: 21

@asti I tried to make it with wpd-up class but didn't find the way because the icon has been included in the .html services that you told me before (vote.html) so it replaces automatically the two classes with the same icon 😶 

To fix this I tried to hide the visibility of ".wpd-vote-up.wpd-up.wpd_not_clicked" and showing a new filled icon with ::before but It didn't work. Nothing happens.

.wpd-vote-up.wpd-up.wpd_not_clicked::before {visibility: visible!important;display: block!important;url(/wp-content/uploads/2022/12/icono-ver-respuestas-mensajes-1.png)!important: ;width:16px;height:
16px;position: absolute;left: 16px;z-index: 209!important;top: 9px

; background-size:16px}

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5779

@fueradelinea,

Please note, that we don't provide support for style customization, we may help with 1-2 simple questions related to colours and background but not more. We can not help you customize components of website style, these are custom requirements and should be done by website owners. We only help with general questions and issues.

Thank you for your understanding.

(@fueradelinea)
Joined: 10 months ago

Eminent Member
Posts: 21

@asti Yes Asti I understand what you are explaining that's why I didn't ask you what is the js code to change the span on replies for example.

What I'm trying yo say is there's not much sense that when you use the only customization option to change the like images correctly that the plugin allows, it replaces them bad changing marked and unmarked icon at the same time while they are two different classes.

I'm trying to provide it as constructive criticism not destructive. But thank you anyway for all your help 🙂

Asti
Posts: 5779
 Asti
Support
(@asti)
Illustrious Member
Joined: 5 years ago

Posted by: @asti

Where should I investigate to delete the parenthesis from the replies label?

I'll ask the developers and let you know soon. 

You can change this using js code. 

 

Share: