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.

creating space between fields

  1. I want to change the default form look to this
    http://leaseoptiondango.com/tmp/gravity-form-inspect.png
    with the lighter font and more space between fields just
    like in the image.
    Since I don't know much about CSS but was playing
    with the Inspect element in Chrome and tweeked
    a few numbers to get it to look the way I wanted.

    Now for the change to be permanent I have
    to change the forms.css file line 268 just as
    I have it, but I notice at the top of the file this:

    NOTE: DO NOT EDIT THIS FILE! MAKE ANY MODIFICATIONS IN YOUR
    THEME STYLESHEET. THIS FILE IS REPLACED DURING AUTO-UPDATES
    AND ANY CHANGES MADE HERE WILL BE OVERWRITTEN.

    If you need to make extensive customizations,
    copy the contents of this file to your theme
    style sheet for editing. Then, go to the form
    settings page & set the 'output CSS' option
    to no.
    Could you elaborate on the last paragraph above?
    Do I copy the whole forms.css and append it
    to style.css? Perhaps I'm over my head in
    playing with the code?

    Posted 9 years ago on Thursday August 30, 2012 | Permalink
  2. No, you don't have to copy all of the forms.css into your theme. All you need to do is place the CSS you want into your theme's stylesheet. I can help you out here. Do you have a link to your form?

    Posted 9 years ago on Thursday August 30, 2012 | Permalink
  3. Hi Rob,
    Will your change modify just that particular GF form or all GF forms? I'd like
    to modify just that particular one. Here is my link http://www.leaseoptiondango.com/available-properties/
    If you can tell me what you did, I can hopefully learn a thing or two. :)

    Tx.

    Posted 9 years ago on Thursday August 30, 2012 | Permalink
  4. This CSS snippet will only affect the form in question:

    [css]
    #content .page #gform_wrapper_3 ul li {
    margin-bottom: 10px;
    }
    #gform_wrapper_3 .gfield_label {
    font-weight: normal;
    }

    Just place it into your theme's stylesheet. Feel free to adjust the px value.

    Posted 9 years ago on Thursday August 30, 2012 | Permalink
  5. Thanks Rob that was easy to do!

    Posted 9 years ago on Thursday August 30, 2012 | Permalink
  6. RIght on, glad to help!

    Posted 9 years ago on Thursday August 30, 2012 | Permalink

This topic has been resolved and has been closed to new replies.