How to customize th...
 
Share:
Notifications
Clear all

[Solved] How to customize the wpDiscuz WordPress plugin styles

1 Posts
1 Users
2 Likes
1,193 Views
Asti
 Asti
(@asti)
Illustrious Member Support
Joined: 6 years ago
Posts: 7056
Topic starter  

wpDiscuz comment system comes with three nice layouts. You can choose your proffered layout in Dashboard > wpDiscuz > Forms > Edit Comment Forms screen. More info here: https://wpdiscuz.com/docs/wpdiscuz-7/customization/comment-layouts/

wpDiscuz also allows you to customize all three layouts and three styles by customizing comment template files and the main style.css file. Here you can find more info: https://wpdiscuz.com/docs/wpdiscuz-7/customization/custom-template-and-style/

Additionally, you may need to apply small CSS codes and don't want to use the customization method mentioned above. Let's see how you can make small style changes. 

First of all, you should find classes by pressing F12 on the browser and opening Chrome or Firefox Console (it'll help you easily write CSS rules you need to customize).

CSS

Then, you'll need to apply the CSS rules. 

Let's discuss an example. If you want to change the color of the thread list title. The right class is: 

#wpdcom .wpd-thread-head .wpd-thread-info

The CSS rule is: 

{color: #303066;} 

The red-marked value is the color you want to use. 

Finally, the code looks:

#wpdcom .wpd-thread-head .wpd-thread-info{
     color: #303066;
}

This is a small video instruction: https://www.screencast.com/t/XPJPyqcqsH6

Put the code in the "Custom CSS code" textarea, located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page.

Don't forget to delete the caches once you make changes.

This website should help you to write CSS rules: https://www.w3schools.com/cssref/default.asp

In case you want to say thank you! 🙂
We'd really appreciate if you leave a good review on the plugin page.
This is the best way to say thank you to this project and the support team.


   
Jacob and Zackar reacted
Share: