Styling the input fields

Resolved klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

Hello everyone,

I need help designing the input fields of ‘site_review_form’. I know a little about CSS. But I can’t find out the correct classes (selectors) of the fields. I didn’t find anything in the forum. Can someone give me examples?

I’m using the Divi Theme and in Site Review’s settings I’ve set the value of the ‘Plugin Style’ field to ‘Divi (v4).

Thank you, Klaus.

The page I need help with: [log in to see the link]

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author Gemini Labs
(@geminilabs)

3 years, 1 month ago

In this example I am using Firefox, but you can do the same with any browser.

Right-click the field and click Inspect. This will open the browser’s Web Inspector.

In the Inspector you can see which CSS classes are being used for the element you inspected.

The Web Inspector also has a button in the toolbar that you can use to hover over and click anything on the page which will highlight it in the Inspector. From there, you can see the CSS classes that are being used.

Once you know the CSS classes, you can use them in your own CSS to modify the way the form looks.

Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

Thank you for this detailed answer !!! This way I know that I was on the right track in my past attempts.

I have entered the following examples into the style.css of my divi-child theme:

.glsr input {
background: green;
}

site-reviews-title-glsr_abd209fe {
background: green;
}

Unfortunately, the background color of the input fields/the input field does not change. Is the problem 50 cm in front of my computer? … do I have to go to the optician ?

Plugin Author Gemini Labs
(@geminilabs)

3 years, 1 month ago

You are probably having issues due to CSS specificity. What is the URL?

Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

https://www.tagespflege-rasselbande.de/home/

At the bottom of the page. Page looks bit confused because it’s in progress.

Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

Of course I meant with #:

#site-reviews-title-glsr_abd209fe {

background: green;

}
Plugin Author Gemini Labs
(@geminilabs)

3 years, 1 month ago
Try this:
```
.glsr-form .glsr-input,
.glsr-form .glsr-textarea{
    background-color: #B2D4CC;
    border-radius: 10px;
}
```
Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

I put in your code into style.css of Divi Child Theme:

.glsr-form .glsr-input,
.glsr-form .glsr-textarea{
border-radius: 10px;
background-color: #B2D4CC;
}

I cleared Cache of Divi (Theme Options > Builder > Advanced > Static CSS File Generation > ‘CLEAR’ … and saved it)
I cleared the Browser Cache of Microsoft Edge
I loaded the page ‘http://www.tagespflege-rasselbande.de/home/’ with Edge –> Radius and backround didn’t change 🙁

I installed Firefox and loaded the page ‘http://www.tagespflege-rasselbande.de/home/’ in Firefox –> Radius and backround didn’t change 🙁

Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

Did you try to create your own example? … embed the shortcode in a divi text module and tried to make adjustments ?
Plugin Author Gemini Labs
(@geminilabs)

3 years, 1 month ago
```
.glsr-divi .glsr-input,
.glsr-divi .glsr-textarea {
    background-color: #B2D4CC;
    border-radius: 10px;
}
```
Thread Starter klauswildenburg
(@klauswildenburg)

3 years, 1 month ago

Thank you so much, that works fine.

Your support is really great. So my £30 donation a few days ago was a good investment !