PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Required Field Asterisk Colour......

  1. How do I change it? It's currently a dark red colour (default, but it doesn't show up to well on my webpage......

    http://photographicman.com/contact/

    Posted 14 years ago on Tuesday August 31, 2010 | Permalink
  2. 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.

    Posted 14 years ago on Tuesday August 31, 2010 | Permalink
  3. A-ha!

    I did that before, but left the !important bit out...... I didn't realise that. :D thanks for the quick response!

    Posted 14 years ago on Tuesday August 31, 2010 | Permalink
  4. WHIMPEYD
    Member

    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!

    http://www.CARAsKARMA.com/fan-club

    Posted 13 years ago on Thursday December 30, 2010 | Permalink
  5. 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.

    Posted 13 years ago on Thursday December 30, 2010 | Permalink
  6. 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

    Posted 13 years ago on Thursday December 30, 2010 | Permalink
  7. WHIMPEYD
    Member

    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?

    Posted 13 years ago on Friday December 31, 2010 | Permalink
  8. 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.

    Posted 13 years ago on Friday December 31, 2010 | Permalink
  9. Val Moses
    Member

    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

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  10. I can't access the site, it prompts me for a login. Can you make the page publicly accessible?

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  11. Val Moses
    Member

    So sorry -- yes, now it's accessible.

    http://www.beaconscreativecommunityspace.com/engage-our-space/reserve-beacons-for-your-event

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  12. 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.

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  13. Val Moses
    Member

    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?

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  14. 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.

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  15. Val Moses
    Member

    Thanks. I have to say I'm impressed with your customer service -- prompt, helpful. I'm happy I bought Gravity Forms.

    Take care.

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  16. Thanks Val!

    Posted 13 years ago on Thursday February 24, 2011 | Permalink

This topic has been resolved and has been closed to new replies.