Overriding stock forms.css « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Chris Hajer
Key Master

I commented out one line in forms.css since I didn't like the styling that was being applied.

.gform_wrapper #gform_heading{ width:98%; padding-bottom:12px; margin-bottom:18px; border-bottom:1px dotted #ccc}

But changing files that come with the plugin makes upgrading more of a hassle. How would I override that line in my own style.css? If I do something like this:

.gform_wrapper #gform_heading{ padding-bottom:0; margin-bottom:0; border-bottom:none}

won't that remove the browser default padding and margin as well as overriding this from forms.css?

Thanks

Posted 14 years ago on Thursday November 5, 2009 | Permalink
Kevin Flahaut
Administrator

The best way to make CSS changes is to go the the Gravity Forms settings page, turn off the "Output CSS" option and then copy all of the styles from the form.css file in the Gravity Forms folder to your theme style sheet. That way, you can customize the form all you want and when you upgrade the plugin, none of your styles get overwritten.

screenshot

The second snippet you posted shouldn't remove any default page margins/padding since you're declaring those for only the container with #gform_heading id that's a child of an element with the .gform_wrapper class.

Posted 14 years ago on Thursday November 5, 2009 | Permalink
Chris Hajer
Key Master

Thanks Kevin.

Posted 14 years ago on Friday November 6, 2009 | Permalink
Chris Hajer
Key Master

With the release of 1.3, this issue has come up again. If I copied all the CSS from forms.css to my theme stylesheet (which I did), how do I keep up with the additional CSS you've included in the new release? Do I need to copy all the new lines from the 1.3 forms.css to my stylesheet? It's starting to become hard to manage, especially on multiple sites.

Any other best practices? How about just overriding the lines I don't like, in my own style.css, then after updating Gravity Forms, check for new styling and override those as necessary?

Posted 14 years ago on Tuesday November 17, 2009 | Permalink
Kevin Flahaut
Administrator

There were a few minor changes to the forms.css style sheet for this release, mostly due to some minor markup changes for validation purposes. You can compare the versions and copy the changes to your document if you want.

Yes, you can probably just override the specific styles you want on your theme style sheet if that's easier to keep up with. If you're doing extensive modifications, that may not be practical.

Yo do bring up a really good point. Moving forward, I'll work on documenting the changes to the CSS somewhere to help make it a little easier.

Posted 14 years ago on Tuesday November 17, 2009 | Permalink