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.

Overriding stock forms.css

  1. 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 10 years ago on Thursday November 5, 2009 | Permalink
  2. 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 10 years ago on Thursday November 5, 2009 | Permalink
  3. Thanks Kevin.

    Posted 10 years ago on Friday November 6, 2009 | Permalink
  4. 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 10 years ago on Tuesday November 17, 2009 | Permalink
  5. 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 10 years ago on Tuesday November 17, 2009 | Permalink