wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

Make the floating comment bubble smaller & change its color/commenter name color using custom CSS?


agentrosehq
Posts: 8
Topic starter
(@agentrosehq)
Active Member
Joined: 1 year ago

Reference: agentrosehq.com/aib-chapter-2-1

Please let me know if this is more efficient with custom CSS or if I can make alterations to the Default:

1. I'd like to change the comment bubble color, size, & distance from the right so it aligns better with my spacing on the side

2. change the font color of commenter names, and

3. make the square icons circular like in the default if I use custom CSS + minimal option.

 

 

Also, is there documentation on the CSS to change elements in general? Thanks

Topic Tags
7 Replies
Asti
Posts: 3943
 Asti
Support
(@asti)
Support member
Joined: 4 years ago

Hi @agentrosehq,

1. I'd like to change the comment bubble color, size, & distance from the right so it aligns better with my spacing on the side

You can change the color on the Dashboard > wpDiscuz > Settings > Styles & Colors admin page, the option called "Comment Bubble Colors".

The position can be changed by using the following CSS code: 

@media only screen and (min-width: 1024px) {
   #wpd-bubble-wrapper {
     left: 75px !important;
   }
}

All CSS codes should be added in the "Custom CSS code" textarea, located on the same page.

2. change the font color of commenter names, 

Please read this doc: https://wpdiscuz.com/docs/wpdiscuz-7/plugin-settings/user-labels-and-badges/#comment-author-label-colors-by-user-role

Also, is there documentation on the CSS to change elements in general? Thanks

Here is a useful article:

https://kb.oboxthemes.com/articles/how-to-get-css-styles-for-elements/

Reply
agentrosehq
Posts: 8
Topic starter
(@agentrosehq)
Active Member
Joined: 1 year ago

Thank you, I have another issue - there's a large blank white section right above where the comments start, how do I get rid of that? reference the same page, it happens on all of them.

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

Support member
Posts: 3943

@agentrosehq,

there's a large blank white section right above where the comments start, how do I get rid of that?

Use this CSS code: 

.comments-area {
padding-top: 0 !important;
}
.separate-containers .inside-article {
padding-bottom: 0;
}

I also see the issue with wpDiscuz icons. Please navigate to Dashboard > wpDiscuz > Settings > Styles & Colors admin page  make sure the "Load Font Awesome CSS Lib" option is enabled. 

Reply
agentrosehq
(@agentrosehq)
Joined: 1 year ago

Active Member
Posts: 8

@asti

What icons in particular do you see this issue with (mind screenshotting)? I checked and I have that enabled already.

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

Support member
Posts: 3943

@agentrosehq,

I mean these icons:

icons

 

Reply
agentrosehq
(@agentrosehq)
Joined: 1 year ago

Active Member
Posts: 8

@asti Strange, what browser are you using/is it just a problem on your end?  I want to make sure this isn't happening for any users on my end because I do have that enabled. 

Also, how do you change the text highlight color when people want to comment inline? As well as how to change the font for the input prompt (AGENT, leave a comment as you read) to Playfair Display?

Another problem I have is that I just updated the widget and now there's no inline button to click when I'm editing my page - if you see this page: https://agentrosehq.com/testinline (password testInline)

The inline buttons don't show up. I inserted code before the update - the code I'm using for the first three inline paragraphs for the page is below for reference, please let me know how to make it show.

Thanks

--------

<span style="font-weight: 400"></span>

 

<span style="font-weight: 400"></span>

 

<span style="font-weight: 400"></span>

Reply
agentrosehq
Posts: 8
Topic starter
(@agentrosehq)
Active Member
Joined: 1 year ago

Also, how do you change the text highlight color when people want to comment inline? As well as how to change the font for the input prompt (AGENT, leave a comment as you read) to Playfair Display?

Reply
Share: