Hi,
We've added styles for text colour on gform_wrapper, and colour / text size adjustments on gfield_error, validation_error and validation_message to our theme's style.css file, but these are being overruled by the default error styling.
Even adding !important to each item hasn't helped. We don't want to edit the plugin's own CSS files as these will break with any update to the plugin. Any ideas?
Can you post a URL to your form? I'll be happy to take a look and make suggestions.
Unfortunately we can't - it's just a standard form though, no custom classes set, etc.
We added the aforementioned classes such as validation_error to the CSS file of the theme, but they're being overruled by the plugin's internal CSS files.
It would be great to see the ability when creating the form to control the classes used on the errors, or indeed to edit the CSS relevant to them directly in the plugin. In the meantime we've just turned off the CSS style output in the plugin settings.
I've removed some of the rules in the new v1.5 forms.css file to make it easier to style/override the validation styles.
You should be able to do this with better specificity even in the current version. Better specificity will override !important declarations.
body .gform_wrapper .gform_body ul.gform_fields li.gfield_error {
border:1px solid #f80
background-color:#f7941d!important
}
body .gform_wrapper .gform_body ul.gform_fields li.gfield_error label,
body .gform_wrapper .gform_body ul.gform_fields li.gfield_error div.validation_message {
color:#0076a3!important
}Is it possible to remove the error message and have the form input display a different colour at all ..?
You can change the validation error message using a filter but you can't remove it completely. You can use CSS to hide it if you prefer it not to be visible.
http://www.gravityhelp.com/documentation/page/Gform_validation_message
Assuming you're talking about changing the color for the validation error, yes you would simply target the input this way.
[css]
body .gform_wrapper .gfield_error input {
border: 1px solid #790000;
color: red;
font-size: 1.5em;
font-weight: bold;
}screenshot: http://grab.by/anpR
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Validation_Errors
Thank you for replying back to my query - I was able to hide the error message and also change the colour, however I was hoping to change the form colour itself.
Say for instance the form/input border is grey - When there is an error I would like to change the border colour to red.
This allows the user to see there is an error without having to display an error message ..?
Thanks again - J
You want to add a red border to the entire form if there is an error? Not just the required inputs..?
If so, you would do that like this. You would want to apply this to an individual form an not to all of them I'm sure. Just replace the XX in the example below with your actual form ID.
[css]
body #gform_wrapper_XX.gform_validation_error {
border: 2px solid red;
padding: 10px;
}screenshot: http://grab.by/anqG
Awesome, thank you - Easy when you know how :)