Changing Text Colours

Completely forgot the URL: https://guitarswindon.com/reviews/

Add this to your style.css file – this will change the colour of the text in forms text area to be black on the white text area background.

.wpcr3_respond_2 textarea
{
color:#000;
}

And add this to the same style.css file to make the review text white

div.wpcr3_review blockquote.wpcr3_content p
{
color:#FFF;
}

Hope that helps!

N

• This reply was modified 7 years, 9 months ago by hazardous_waster.

Thanks! It’s half worked. My reviews are showing in white, which is great. Still having the issue when typing in the text boxes. That text isn’t appearing black as its typed. I am having the same issue with my contact form, that will be the next stop on my trouble shooting list!

It will be good for you to understand why this isn’t working so you can figure things out and fix them yourself – let me help you and explain what is going and set you on your way

Take this code

.wpcr3_respond_2 textarea

The first part .wpcr3_respond_2 is the HTML containing element … if you view the page in your browser, right click to view source and then search for .wpcr3_respond_2 you will see the HTML for your form in all its various elements.

A great tool to use to help you along is ‘Developer tools’, if you’re using Chrome you can simply right click on an element and pick ‘inspect element’ to open up the developer tool panel … here you can quickly find out all sorts of information on your code and play with the CSS live in your browser.

So the next part of the code ‘textarea’ is focusing on a specific HTML elements inside of .wpcr3_respond_2 … and if you look at the ‘textarea’ in your form (that’s the Review area) you can see the text is now black where before it was white.

So what you’re missing now is the styling for the Name and Email elements … I’ll give you a clue, these elements are ‘input’ elements – see if you can create some CSS that will style these HTML elements.

If you can’t figure it out reply to this message and I’ll let you know how to do it ??

N

Hey, that was a hug help! I’ve used:

.wpcr3_respond_2 textarea {
font-color: #000;
}

and that has changed the review text ares, which is great. So, name and email to go… I’ve looked through the code for each and I cant work out, the name field:

<input maxlength=”150″ class=”text-input wpcr3_required” type=”text” id=”wpcr3_fname” name=”wpcr3_fname” value=”” autocomplete=”off”>

It looks like respond_2 covers the whole area, so why didn’t that affect all fields?

You’re absolutely right that .wpcr3_respond_2 covers the whole area but this CSS is just for the element ‘textarea’ – the Name and Email fields are ‘input’ elements so you need to write a piece of CSS for that too, here’s the whole thing;

.wpcr3_respond_2 textarea {
    color: #000;
}
.wpcr3_respond_2 input {
    color: #000;
}

What you can also do in CSS if you have several elements you want to style in the same way is to apply the same styling to lots of different elements like this;

.wpcr3_respond_2 input, .wpcr3_respond_2 textarea {
    color: #000;
}

And if you now want to get really efficient you can apply this styling across the whole site but be careful and test your site – there may be input elements that get changed that you didn’t mean to

input, textarea {
    color: #000;
}

This has been a great help, I have gone back through the code and I can see class=”text-input”

I have another issue that have had a go at solving with CSS, I have removed the average rating and I am now left with 2 dotted lines. I want to remove these. Looking at the CSS, I have come up with the below, but its not working.

.wpcr3_dotline {
colour: #000;
}

Where am I going wrong?

try color instead of colour. If you really want to hide it, use “display:none;” instead. Know that completely removing elements (in templates, not with CSS) cause the review format to become invalid, so it could cause them to not show up in Google search results.

Neither of those are working for me and that dotted line is still there. is .wpcr_dotline correct?