wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

My custom colours not working


korzychxp
Posts: 31
Topic starter
(@korzychxp)
Eminent Member
Joined: 1 year ago

Hi. Your team helped me to build my own stylish comments section.

Code for this was:

#wpcomm p code {
background-color: #500000;
}
#wpcomm .wpdiscuz-spoiler-wrap .wpdiscuz-spoiler {
background-color: #500000;
}
#wpcomm blockquote {
color: #fff;
background-color: #500000;
}
#wpcomm .wc-comment-text p a {
color: #2D8898 !important;
}
#wpcomm .wc-comment-right .wc-comment-text{
color: #fff !important;
}
textarea.wc_edit_comment{
border: 1px solid #fff;
color: #fff;
}
#wpcomm .wc_comm_form.wc-secondary-form-wrapper .wc-field-textarea textarea {
color: #fff;
}
#wpcomm .wc-field-textarea textarea {
color: #fff !important;
}
#wpcomm .wpd-form-row .wpd-field {
color: #6495ED !important;
}
#wpcomm .wc-reply p {
font-size: 14px !important;
}
/*to change the comment box header text color */
h3#wc-comment-header {
color: #fff !important;
}
/*to change the color of the nickname*/
#wpcomm .wc-blog-post_author > .wc-comment-right .wc-comment-author, #wpcomm .wc-blog-post_author > .wc-comment-right .wc-comment-author a {
color: #ac1e00;
}
#wpcomm .wc-reply .wc-comment-right .wc-comment-text, #wpcomm .wc-reply .wc-comment-right .wc-comment-text * {
clear: none;
}

 

At now this is not working. Please help or give us options to change these colours instead of creating css codes.

13 Replies
2 Replies
Tom
 Tom
Support
(@tomson)
Joined: 6 years ago

Support Team
Posts: 444
Posted by: @korzychxp

Hi. Your team helped me to build my own stylish comments section.

Code for this was:

At now this is not working. Please help or give us options to change these colours instead of creating css codes.

Hi @korzychxp,

Why you don't use the built-in Dark Style, it'll fix all your problem?

Please navigate to Dashboard > wpDiscuz > Settings > Styles & Colors Tab and switch to the Dark Style. Then delete all caches, go to the website fronted and press Ctrl+F5 to reset browser cache.

wpDiscuz Dark Style

 

Reply
korzychxp
(@korzychxp)
Joined: 1 year ago

Eminent Member
Posts: 31

@tomson

I'm using dark. Other styles are looking worse on my site.

But quotion or block quoting colours are not good (they blends with other blocks and colours) and that's why i wanted other colours (red background and white text, borders and blue or green urls etc).

Blocks of quotes/codes/block quotes and comments are too close together too and have no borders. We can't see difference what is what.


 

And if we click on "Code Block" we see this:

Can we implement my old styling?

Reply
ZedUser
Posts: 6
(@zeduser)
Active Member
Joined: 1 year ago

I have a similar problem. I now have gray font on a gray background, which is terrible. I tried to change it per instructions, but it does not work.

Reply
2 Replies
Tom
 Tom
Support
(@tomson)
Joined: 6 years ago

Support Team
Posts: 444

@zeduser,

Please open a separate topic and provide a direct link to your page.

BTW, if your theme is a Dark theme you should also use the Dark Style of wpDiscuz.

Reply
ZedUser
(@zeduser)
Joined: 1 year ago

Active Member
Posts: 6

I used this code to solve the issue:

 

#wpdcom .ql-editor:before {
color: #17202A;
}
#wpdcom .wpd-comment-text {
color: #17202A;
}

The result was black text on the light gray box, which is plenty of contrast. 

Reply
korzychxp
Posts: 31
Topic starter
(@korzychxp)
Eminent Member
Joined: 1 year ago

Any help?

Reply
4 Replies
Alina
Moderator
(@alina)
Joined: 2 years ago

Member
Posts: 73

@korzychxp,

Please leave the example URL.

Reply
korzychxp
(@korzychxp)
Joined: 1 year ago

Eminent Member
Posts: 31
Alina
Moderator
(@alina)
Joined: 2 years ago

Member
Posts: 73

@korzychxp,

Sorry for the late response.
We see you disable the rich editor.
However to change the background color and the text color of the "code block", use the following CSS code:

#wpdcom .ql-editor pre {
background-color: #272A29;
color: #606060;
}

Try the following code to change the background text color and the blockquote border color.

#wpdcom .wpd-comment-text blockquote{
color: #606060;
border-left: 2px solid #28AB80;
}

Please note the red marked value can be changed.

All CSS codes should be added in the Dashboard > Comments > wpDiscuz  > Styles and Colors admin page, "Cutom CSS Code" textarea.

 

Reply
korzychxp
(@korzychxp)
Joined: 1 year ago

Eminent Member
Posts: 31

@alina

Check my URLhow it looks.

This is my actual code

#wpdcom .ql-editor pre {
background-color: #500000;
color: #500000;
}
#wpdcom .wpd-comment-text blockquote{
color: #500000;
border-left: 2px solid #500000;
}

Please let's start again with all codes beause my old style had other changes.

Reply
korzychxp
Posts: 31
Topic starter
(@korzychxp)
Eminent Member
Joined: 1 year ago

I've updated my screenshot with form for not registred users

Reply
korzychxp
Posts: 31
Topic starter
(@korzychxp)
Eminent Member
Joined: 1 year ago

UP.

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

Support member
Posts: 3567

@korzychxp,

The option that allows you to disable the comments highlighting feature is located in the n Dashboard > wpDiscuz > Settings > Comment Thread Displaying admin page.  More info here: https://wpdiscuz.com/docs/wpdiscuz-7/plugin-settings/comment-thread-displaying/#highlight-unread-comments

The placeholder color can be changed by using the CSS code below:

#wpdcom .ql-editor::before {
color: #381616;
}

We don't see any problem with avatars. See screenshot below:

avatar

To change the text color and background color of the code section use this code:

#wpdcom .ql-editor pre {
color: #fff !important;
background-color: #524a4a;
}

For the blockquoteuse this code:

blockquote {
background-color: #5a4e4e;
color: #fff !important;
}

Please note, that we don't provide support for style customization, we may help in 1-2 simple questions related to colors and background but not more. We only help with general questions and issues.

Thank you for your understanding.

You can find all classes by pressing F12 on the browser and opening Chrome or Firefox Console.

Reply
Share: