Font color

Site Reviews inherits the text colour of your theme.

If you are using Divi or Elementor you can change the text colour using the builder options. If not, you can use some CSS like this:

.glsr { color: red; }

Or if you only want to target a specific shortcode, add a class to it first and then target that class in your CSS like this:

[site_reviews class="custom-color"]

.custom-color { color: red; }

Adding this to the CSS changes the color of everything on the page except the new review input widget. It was the only part of the page that didn’t turn red when I used the CSS code above. I had to make the background of just that widget black so the white text would show. You can see it here https://staging2.gotosnowshoe.com/reviews/.

No matter what I do this portion of the page is unaffected by any changes to text color. None of the Elementor builder options affect it either.

Ah, I see you meant the colour of the placeholder text in the form fields.

You can fix it like this:

1. Since you are using the Elementor widget, first add a class to the form (this is so that you can target that specific form instead of all the review forms on your website (in case some of them are not used on a dark background)):

2. Add the following custom CSS to your website:

form.dark-form ::placeholder {
    color: rgba(0,0,0,.8);
}

Alternatively, you could also do this instead:

.glsr form.dark-form {
  color: #fff;
}
.glsr form.dark-form ::placeholder {
  color: rgba(255,255,255,0.9);
}
.glsr form.dark-form input.glsr-input,
.glsr form.dark-form textarea.glsr-textarea {
  background-color: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.2);
}
.glsr form.dark-form input.glsr-input:focus,
.glsr form.dark-form textarea.glsr-textarea:focus {
  background-color: rgba(255,255,255,0.2);
  border-color: #39c1bd;
  box-shadow: 0 0 0 1px #39c1bd;
}
.glsr form.dark-form input.glsr-input.glsr-is-invalid:focus,
.glsr form.dark-form textarea.glsr-textarea.glsr-is-invalid:focus {
  border-color: #e02424;
  box-shadow: 0 0 0 1px #e02424;
}

I do not mean the placeholder text. I mean the text in white where it says “title of your review” and “your review”. That text is only showing in white on my site. I want it black like the rest of the site. I had to put it in a black background which I don’t want to do in order to show the white text and make it visible. I put in both those codes and it hasn’t changed because I think you are giving me instructions how to modify where it says “tell people your review”, but that is not what I want. Thank you for helping and the specific instructions. Let me know how I can adjust it. Thanks.

I do not mean the placeholder text. I mean the text in white where it says “title of your review” and “your review”. That text is only showing in white on my site. I want it black like the rest of the site. I had to put it in a black background which I don’t want to do in order to show the white text and make it visible.

The CSS snippet I provided was to make the form look good on a black background. Since you said that you only added the black background because the text colour was white, then to fix this you need to edit or remove the custom CSS that you previously added to your Ocean WP theme to make label tags white.

Specifically:

In other words, this is not being caused by Site Reviews, but by the custom CSS that you added to your Ocean WP theme settings.