How do I change it? It's currently a dark red colour (default, but it doesn't show up to well on my webpage......
How do I change it? It's currently a dark red colour (default, but it doesn't show up to well on my webpage......
You need to add CSS to your theme stylesheet to override the Gravity Forms styles. You can inspect the HTML and see what HTML element wraps the required field asterisk, it's a span with a class applied to it. That class is gfield_required and that is what you need to target with CSS in order to change the color.
Add this to your theme stylesheet, and change the XXXXXXX to the hex value of the color you want to use:
.gfield_required {color: #XXXXXX!important;}
Keep the !important in the value as it will override the Gravity Forms built in style that is set to red.
A-ha!
I did that before, but left the !important bit out...... I didn't realise that. :D thanks for the quick response!
Thank you - I was wondering the same thing! Also - how to change the "error/problem" message font color when a required field isn't filled out. Could you please point me toward the right place/code to change it?
Thanks much!
You style the validation error message by targeting the gfield_error class and using inheritance to change the elements that appear within a field with this class.
For instance to change the background color that is used when a validation error occurs you would do:
.gfield_error {background-color: #YOURCOLOR!important;}
To change the field label color when an error is present you would use:
.gfield_error .gfield_label {color: #YOURCOLOR!important;}
So you would target the elements you want to change via the .gfield_error class.
Swap out the YOURCOLOR with the hexcode for the color you want to use and be sure to leave the !important in place so it overrides default styles.
You would place this custom CSS in your themes stylesheet.
You can also refer to this guide for samples on targeting specific form elements with CSS.
http://www.gravityhelp.com/documentation/css-targeting-samples
There is also a section dedicated to validation styles.
http://www.gravityhelp.com/documentation/css-targeting-samples/#validation
Thanks, guys! This is most helpful. Referring to the CSS Guide link you provided...
I've tried using the Confirmation code line provided in the guide to change the colors of the text & box background confirming a successful form was sent, but no success. Suggestions?
Yep. That's totally my fault. I specified a class name and not an ID in my sample. Sorry about that. This is the correct version.
body #gforms_confirmation_message {border:1px solid red}
I'll update the sample page too. Thanks for catching that.
Hello, Kevin. Thanks in advance for your help. I have a site with a black background and the error message on the form is coming up in a maroon that can't be read:
http://www.beaconscreativecommunityspace.com/engage-our-space/reserve-beacons-for-your-event
I put this in my Stylesheet -- first the way you say above:
.gfield_error .gfield_label {
color: #0E8F8A!important;
}
then to match the other entries:
.textwidget .gfield_error .gfield_label {
color: #0E8F8A!important;
}
But it's still maroon. Can you tell me what I need to do to make it change? Thanks.
Val Moses
I can't access the site, it prompts me for a login. Can you make the page publicly accessible?
So sorry -- yes, now it's accessible.
http://www.beaconscreativecommunityspace.com/engage-our-space/reserve-beacons-for-your-event
To change the color of the main validation error message that appears at the top of your form you would target it like this:
.validation_error {color: #ffffff!important;}
To change the color of the field label when that field has a validation error you would use:
.gfield_error .gfield_label {color: #0E8F8A!important;}
I just tested it on your site and it worked fine.
The CSS you currently has won't work because it includes .textwidget in front of the CSS declaration, and that element isn't contained within .textwidget so that won't work.
Miracle, man! Working like a charm. Thanks a bunch.
Quick question: How can you test something like that on my site, without having back-end access?
Using Firebug which is a plugin for FireFox that lets you inspect HTML/CSS/Javascript on a site and make minor changes to it. It doesn't change the code on the server, just in your browser.
There are other tools like it for Chrome as well, developer tools that let you inspect and debug code.
Thanks. I have to say I'm impressed with your customer service -- prompt, helpful. I'm happy I bought Gravity Forms.
Take care.
Thanks Val!