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.

Theme Style is Conflicting with Gravity Form CSS

  1. I'm having the same issue many others have had. My theme's CSS is overriding the CSS for Gravity Forms. I copied and pasted the forms.css contents into my theme css, turned off CSS output in the Gravity Forms Plugin settings. Still no luck.

    http://www.elkorah.org/clubs/

    Honestly, the style of the form preview will work fine for this particular page. Any help is greatly appreciated.
    Thank you

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  2. What do you want to happen specifically?

    I would revert to letting Gravity Forms output its own CSS, remove what you pasted into your stylesheet, and let us know what you would like to override specifically. We can help you with the actual CSS to override your theme.

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  3. I suggest you (and everyone else with CSS issues) to intall the Firebug addon for the browser you're using. With that addon you can check what styling is being applied to particular elements.

    In this case I can see you have input[type='text'] styling in your style.css (which is also applied to the single-line fields of your Gravity Forms fields) and there's also a line of CSS in the source (iow not in a separate stylesheet) that makes the border-bottom !important.
    And I'm sure there's a lot more styling like that (that's overwriting the default GF CSS).

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  4. I reverted back to letting Gravity output CSS and removed what I pasted in.
    What I want to have happen is for the form to use the same styling it uses for the preview page. I don't want the form to use the style from my theme's css. That make sense?

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  5. It does make sense, although the preview styles will not be present on the front end: that is a limited admin preview only. So, we will have to override or remove the styles coming from your theme. The problem is, your theme has some overly broad default styles which apply to all the form elements you see.

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  6. So how should we proceed?

    Posted 7 years ago on Thursday December 13, 2012 | Permalink
  7. It looks like quite a bit of work to add styles to override all the default styles which your theme provides. One way to begin would be to install the Firebug extension or use the Google Chrome developer tools to see what default style from your theme is affecting the display of the form. Then, one by one, write more specific rules to allow the Gravity Forms styles to override the default. It did not look like a quick or simple task, based on how many generic default styles are being included by your theme.

    Posted 7 years ago on Thursday December 13, 2012 | Permalink