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.

Help with CSS

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Matt
    Member

    I want to tell gravity forms to ignore it's button properties and to use the properties from my current theme.

    Posted 14 years ago on Sunday September 5, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    The easiest thing to do here is to copy the entire contents of the forms.css file in the gravityforms folder then paste that at the end of your theme's stylesheet. Once you've done that, go to the forms settings page and set the "output css" option to "no"

    Then, you can modify all of the form css directly without having to override anything. Also, by copying the content to your theme stylesheet, you don't have to worry about any changes being overwritten when you update the plugin.

    Posted 14 years ago on Sunday September 5, 2010 | Permalink

  3. sandalwoods
    Member

    I *love* Gravity Forms!

    I find myself needing some help.
    1. I succeeded changing the heading at: http://alnavas.com/executive/?page_id=397 by using the background setting:

    .gform_wrapper h1, .gform_wrapper h2, .gform_wrapper h3 {font-weight:normal; border:none; outline:none; background:#EBEBEB}

    I did by copying the entire content of forms.css to the style sheet, and making the change in style.css for the theme (Executive, from StudioPress).

    2. Now my client has asked me to change the background to the entire form in the same shading. BUT I am unable to locate *where* I should make the change(s).

    Please let me know where I change the styling. Many thanks!

    Al

    Posted 13 years ago on Thursday January 13, 2011 | Permalink

  4. David Smith
    Member

    Hi Sandalwood,

    This should do the trick:

    #gform_wrapper_2 { background-color: #ebebeb; padding: 10px; }

    Note: I also added 10px of padding so the form is butting up against the edge created by the background color. If you don't like, just remove it. :)

    Posted 13 years ago on Thursday January 13, 2011 | Permalink

  5. sandalwoods
    Member

    Thanks, David - that did the trick!

    Posted 13 years ago on Thursday January 13, 2011 | Permalink

  6. sandalwoods
    Member

    I took it a bit further, borrowing some formatting from the Breadcrumb, to give the form a more unified look with the rest of the Theme - rounded corners, etc.: http://alnavas.com/executive/?page_id=397

    Thanks a bunch one more time!

    Al

    Posted 13 years ago on Thursday January 13, 2011 | Permalink

  7. David Smith
    Member

    Looks great! Thanks for sharing. :)

    Posted 13 years ago on Friday January 14, 2011 | Permalink