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.

Force Theme to use standard GF style.css

Gravity Support Forums » Plugin Support » Gravity Forms

  1. deukdesign
    Member

    My GF forms look good in the preview, but after publish on the front end they get all mixed up. I guess it is inheriting a whole bunch of stuff from my theme.

    Can I force my theme to always use the standard GF style as seen in preview, it would be great if I could just add a line to my style.css that directly

    My style.css has almost nothing in it except some @import, which gave me the idea maybe I could add an @import for GF as well, so it would override all other? I dont know if this is possible and smart, but would be much easier if thi could work, instead of figuring out which style is inherting what, especially for a newbe like me ;-)

    below a part of my style.css to illustrate my thinking
    /* CSS RESET */
    @import url('layout/css/core/reset.css');

    /* CORE CSS */
    @import url('layout/css/core/core.css');

    /* NAVIGATION CSS */
    @import url('layout/css/core/nav.css');

    /* WIDGETS */
    @import url('layout/css/core/widgets.css');

    /* SHORTCODES */
    @import url('layout/css/core/shortcodes.css');

    /* TYPOGRAPHY & CLASSES */
    @import url('layout/css/core/typography.css');

    Posted 13 years ago on Wednesday March 30, 2011 | Permalink

  2. Carl Hancock
    Administrator

    Due to how CSS inheritance works, depending on how your theme defines it's styles there is nothing we can do to prevent other CSS from interfering.

    If you provide a link to a page containing a form so we can see the issue happening we could provide some pointers for CSS you would need to add to your theme to correct the issue.

    Posted 13 years ago on Wednesday March 30, 2011 | Permalink

  3. Kevin Flahaut
    Administrator

    The default Gravity Forms CSS is intended to work in conjunction with your theme styles rather than supersede them. Things like typography, colors, etc. purposely aren't defined for most elements.

    As Carl mentioned, it's difficult to prevent inheritance from your theme styles. What ends up rendering also depends on how your CSS is loaded. If your wp_head() function is placed after your stylesheet references in your header file, then the Gravity Forms CSS will be loaded afterwards and some of the form styling should override your theme CSS anyhow since they're the last rules being declared.

    In some instances, you need to use more specific CSS inheritance to override theme styles. You can refer to this guide for some samples.

    http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

    Your best bet is to use the guide, create new rules to override the theme styles and place those at the end of your theme stylesheet.

    Posted 13 years ago on Wednesday March 30, 2011 | Permalink