Hi, I am trying to figure out where to change the color within a comment from the standard light grey to black. We have a color blind person that cannot see the following underlined areas on the attached image. Thanks.
How-to and Troubleshooting
11
Posts
2
Users
5
Reactions
1,525
Views
Sep 20, 2021 12:31 am
10 Replies
Sep 20, 2021 5:21 am
You should use CSS codes for this purpose. E.g.
For changing the color of the date/time use this CSS code:
#wpdcom .wpd-comment-date {color: #4a2525;}
For changing the color of the "reply to" section use CSS code:
#wpdcom .wpd-comment .wpd-reply-to{color: #4a2525; }
The red marked value can be changed as you like.
Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.
You can find all 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.
This website should help you to write CSS rules: https://www.w3schools.com/cssref/default.asp
Sep 20, 2021 6:17 pm
@asti Thanks. We are limited in our expertise when it comes to CSS etc. Per my attached screenshot, we have been able to change a couple fields, but no luck with your code for the Reply to field, or User nicename, or the Upvote thumb and counter. Can you help with these please?
I am also attaching what we have right now in the additional css area. Thank you for your assistance.
The CSS code is provided below:
#wpdcom .wpd-comment-footer .wpd-reply-button, #wpdcom .wpd-comment-footer .wpd-reply-button svg {
color: #000;
fill: #000;
}
#comments #wpdcom .wpd-comment .wpd-comment-wrap .wpd-comment-author span.wpducm-user-nicename{
color: #000;
}
#wpdcom .wpd-comment-footer .wpd-vote-up svg {
fill: #000;
}
Sep 21, 2021 1:20 pm
Thank you Asti! Just one more request, the "Reply to" field is still the light grey as per the attached screenshot. Really appreciate the help, and so does our color blind community member!
Sep 22, 2021 2:12 pm
Thank you Asti, we have found 3 more areas that our color blind member cannot see, I have attached a screenshot. I would appreciate the code for those as well. Thanks.
Please use this code:
#wpdcom .wpd-comment-right .wpd-comment-last-edited, #wpdcom .wpd-comment-footer .wpd-tools i, .wpd-comment-link.wpd-hidden span, #wpdcom .wpd-comment-footer .wpd-toggle i {
color: #000;
}
Sep 22, 2021 2:29 pm
Thanks!! You are the best! But I did find one more area that could use the black color. I have attached a screenshot. Thanks!
This changes the color:
#wpdcom .wpd-tools-actions > * {
color: #000;
}
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.
Sep 22, 2021 6:27 pm
Thank you sir! I think we are done now, appreciate all your help! 🙂
