wpDiscuz - WordPress Comment Plugin
Share:
Notifications
Clear all

[Solved] Help with CSS

26 Posts
2 Users
1 Likes
797 Views
shira1
Posts: 31
Topic starter
(@shira1)
Eminent Member
Joined: 12 months ago

Hello, I have 2 questions:

1. How do I change the font of the response text and the font of the button using css?

2. While clicking on the fields, the boxes getting black stroke, how do you change the the color using css?

I really need your help because I don't understand coding 😥

Thank you very much

25 Replies
Asti
Posts: 5068
 Asti
Support
(@asti)
Illustrious Member
Joined: 5 years ago

Hi,

Please leave an example URL and show on some screenshots what you need to change. 

24 Replies
shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti This is the url: https://wlmdiy.ussl.co.il/%d7%a7%d7%a2%d7%a8%d7%aa-%d7%a9%d7%99%d7%91%d7%95%d7%9c%d7%aa-%d7%a9%d7%95%d7%a2%d7%9c-%d7%9e%d7%95%d7%a9%d7%9c%d7%9e%d7%aa-%d7%9c%d7%97%d7%95%d7%a8%d7%a3/  

I'm sending you the screenshots: 

1. In the image with the title "Font issue" you can see that the font in the field of writing the response and the font of the button is not Assistant font (however, in the name and email fields there is Font Assistant).

2. In the image with the caption "Black stroke" you can see the black stroke after clicking on the name field (the black stroke is also appearing after clicking the email field). I want to change the stroke color to gray.

3. In the image titled "Uppercase issue in the Email field" you can see that there are uppercase letters when writing an email, even though I am not pressing caps lock. I want that the whole email will be written at lowercase letters.

Uppercase issue in the Email field
black stroke
Font issue

 Thank you!!

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

The CSS code below should solve the issues: 

#wpdcom .wpd-form-row .wpdiscuz-item input[type="text"], #wpdcom .wpd-form-row .wpdiscuz-item input[type="email"]{
   font-family: "Assistant", Sans-serif;
   outline:none !important;
   text-transform: none;
} 

You'll just need to change the red marked value. 

Put the code in the Top Admin Bar > Customize > Additional CSS > "Additional CSS" textarea, save it, delete all caches and check again.

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti What do you mean by "You'll just need to change the red marked value"?

If I understood you correctly, you meant that I should add the css through the "Customize" editorial panel in WordPress.

I did that and also cleaned the cache. The font has not changed to Assistant, the coment area looks the same as before I added the code.

I'm sending you the screenshot:

image
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Please leave a screenshot of the section where you've added the code.  

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti Here is the screenshot:

image
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

wpDiscuz also has a built-in caches system Please delete this cache as well. It's located in the Dashboard > wpDiscuz > Settings > General Settings tab. 

image

Please make sure other caches (CDN, website, browser) are also deleted. 

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti Ok, I will do that.

Can you explain me how to clean CDN cache? I searched in google and I didn't find answers

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti Can you please tell me how to clean CDN cache? I searched in google and I didn't find answers ? I really need your help 😥 😥 😥

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Please contact your hosting support with this question. They'll better point you how to do it. 

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti My hosting support cleaned my CDN and I also cleaned the cache on the website, browser, wpdiscuz like you said. But it still not working 😭 What to do??

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Please show on the screenshot where you've added the CSS codes.

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti

image

Here is the screenshot:

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

 Please see the screenshot: 

image

 

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti I did that.

image

  But it still didn't change the button's font and the comment's font. You can see in the screenshot. I cleaned cache.

image
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Put this code as well:

#wpdcom .ql-editor > * { font-family: "Assistant", Sans-serif !important;}
shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti The comment's font has changed!!! But the button's font did not, how to change the button's font to Assistant? I also want that the comment's content will be black (#2B2B2B)

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

You should write the CSS code like this:

#wpdcom .wpd-second-button, #wpdcom .wpd-prim-button {
   font-family: "Assistant", Sans-serif !important;
}

I also want that the comment's content will be black (#2B2B2B)

Change the value of the "Comment Text". It's located in the Dashboard > wpDiscuz > Settings > Styles & Colors admin page

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti it worked!!

I have two more questions:

1. How can I place the button below the field of the email?

2. How can I increase the font size? (I want it to grow in all the plugin's text (in the comment text, the button,the written comments ...)

Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

1. How can I place the button below the field of the email?

Navigate to Dashboard > wpDiscuz > Forms admin page, edit the default form, find the "COMMENT TEXT FIELD" section, drag and drop the fields as you like. 

2. How can I increase the font size? (I want it to grow in all the plugin's text (in the comment text, the button,the written comments ...)

Please note, that we don't provide support for style customization, we may help in 1-2 simple questions related to colours and background but not more. We can not help you customize all components of website style, these are custom requirements and should be done by website owners. 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, it'll help you easily write CSS rules you need to customize. 

CSS

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

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti I'm sorry. I will not ask you anymore. 

I draged and droped the fields and now the button is in the left side, how can I straighten it to the right?

image
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Just move all fields to the right.  

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti All of them are on the right side:

image
Asti
 Asti
Support
(@asti)
Joined: 5 years ago

Illustrious Member
Posts: 5068

@shira1,

Then, move them to left.  

shira1
(@shira1)
Joined: 12 months ago

Eminent Member
Posts: 31

@asti Now all the fields are on the left side. Never mind, I will leave it like the it was before

Share: