I have a simple question, how do I change the color of the floating comment icon? Why isn't this setting in the general color settings?
Limited Support
Our support team is currently on holiday from December 25, 2025 to January 7, 2026, and replies may be delayed during this period.
We appreciate your patience and understanding while our team is away. Thank you for being part of the wpDiscuz community!
Merry Christmas and Happy Holidays! 🎄
Jan 18, 2021 6:24 am
15 Replies
Jan 18, 2021 6:31 am
And .. it would be nice if we could change the size of this icon as we need it !! - Add to your development ..
Thank you.
I have a simple question, how do I change the color of the floating comment icon?
The option is located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page. It's called "Comment Bubble Colors".
it would be nice if we could change the size of this icon as we need it !!
You can use the CSS code below:
#wpd-bubble-wrapper > div {
width: 50px;
height: 50px;
}
The red marked values 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.
Please don't forget to press Ctrl+F5 (twice) on the frontend before checking.
Jan 18, 2021 7:20 pm
I have a simple question, how do I change the color of the floating comment icon?
The option is located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page. It's called "Comment Bubble Colors".
Well, I don't see this button ... Can you show me which row ???
And in general, it feels like other colors do not change, how many did not change, everything remains in place. The cache was cleared. These are all the colors that are there..
Jan 19, 2021 1:03 pm
Please watch the video below.
It should help you to understand where you can find the setting.
Jan 20, 2021 3:42 pm
Well, as you can see on the screenshot, I have a red button. And on the site - Green!
Now I changed it to white, but it remained green!
Clearing the cache doesn't help!
Could you please send the admin login details to info[at]gvectors.com email address? I'll ask the developers to check the issue for you.
Jan 21, 2021 12:05 pm
You've set «Off» option for Comment Form and Comment List Style option. This stops loading wpDiscuz core CSS. In this case, only basic CSS code will be loaded allowing you add your custom style easier.
You should either choose Default or Dark styles or change the colour using some CSS code:
#wpd-bubble-wrapper > div, #wpd-bubble-wrapper > #wpd-bubble #wpd-bubble-add-message {
background-color: #abab6b;
}
#wpd-bubble-wrapper #wpd-bubble-all-comments-count {
color: #abab6b ;
}
#wpd-bubble-wrapper > #wpd-bubble #wpd-bubble-add-message::before {
border-left-color: #abab6b;
border-right-color: #abab6b;
}
This option allows the users to turn off the wpDiscuz styles (colors, width, height, etc) and create there own styles based on the wpDiscuz functionality.
For the users who are not familiar with the CSS, we may suggest you the following two options:
- Default
- Dark
Jan 22, 2021 2:53 pm
Happened. You should immediately turn the button on - "by default" for everyone. And it says about - "Style of the list and form of comments", not about "color", and it's a little incomprehensible. Too many settings. You see, I'm lost, I hope you will make everything more convenient.
The problem has been resolved. Good luck.
Jan 25, 2021 5:04 pm
Hello.
Then when you click on the icon - an invitation to comment on the article, for some reason the extra letter "x" is displayed. Together with the Russian letters "по", it forms an abusive word, and is generally not needed there. How do I remove it?
I deliberately removed the letter "по" in one of the variants so that you can better see the extra letter "x".
Try to reduce the font size of the message:
#wpd-bubble-wrapper > #wpd-bubble #wpd-bubble-add-message {
font-size: 13px;
font-weight: 100;
}
Change the red marked value before using the code.
Jan 26, 2021 3:26 pm
Already better, but still it is not clear why this "x" is there. Looks superfluous, and there are no functions for it .. Can't you delete it at all?
Thank you.
The CSS code is provided below:
#wpd-bubble-wrapper #wpd-bubble-add-message-close {
display: none !important;
}
