Can't override forms.css line 193 .gfield_error !important statements

Gravity Support Forums » Plugin Support » Gravity Forms

freelanceweb
Member
I'm trying to override the default .gfield_error styling using targeting such as:
```
[css]
.gform_wrapper li#field_3_3.gfield_error,
.gform_wrapper ul#gform_fields_3 .gfield_error,
body .gform_wrapper ul#gform_fields_3 li#field_3_3.gfield_error,
html body #header .gform_wrapper ul#gform_fields_3 li#field_3_3.gfield.gfield_error {
padding:0 !important;
margin-bottom:0 !important;
}
```
I've tried each separately, plus other permutations, and can't figure why the styling is not working.

Inspect Element shows the padding and margin-bottom declarations with a line through them and then scrolling down I see the overriding class is line 193 in the default forms.css targeting .gform_wrapper li.gfield.gfield_error and which includes:
margin-bottom: 6px!important;
padding: 6px 6px 4px 6px!important;

I've also tried wrapping a div with an id around the gform_wrapper and including that in the targeting with no luck.

Since I'm developing locally I can't provide a link a live site with the bug unfortunately.

I'm not sure why the default CSS would include any !important declarations.

Is there some other targeting or method I should be using?
Posted 12 years ago on Tuesday July 5, 2011 | Permalink
Kevin Flahaut
Administrator
I've usually found that matching the same pattern as the original rule, just with more specific inheritance works. Of course, not being able to see your form, I can't tell you for sure.
```
[css]
html body .gform_wrapper li.gfield.gfield_error {
	padding:0 !important;
	margin-bottom:0 !important;
}
```
The important declarations are a necessity in some instances to try to keep some type of standardized formatting in the forms. Gravity Forms gets installed on literally thousands of different themes, all with different markup and styles and we try to keep the look and feel nailed down as much as we can across all of those.

Of course, if you don't like the default CSS, there is an option in the form settings to disable the default CSS output, then you can roll your own CSS and format it any way that you'd like.
Posted 12 years ago on Tuesday July 5, 2011 | Permalink
freelanceweb
Member

Thanks for the reply!

I'm not sure how, but it's resolved itself.

I started styling other elements in the form, then noticed the margin and padding around gfield_error was appearing as I intended.

Trying to backtrack I can't figure out what I did either.

Posted 12 years ago on Wednesday July 6, 2011 | Permalink
Kevin Flahaut
Administrator

You did something magical. Glad it's working for you though. Thanks for the update

Posted 12 years ago on Wednesday July 6, 2011 | Permalink