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 styling

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Yael
    Member

    HI there,

    I did read through the documentation but I'm not getting how to edit the styles on the form.

    I did find the CSS Targeting Samples but still not understanding. I want to add some space between containers. IF you take a look at the form on this page, you will see that the Section breaks are too close to each other.

    http://womenshightech.info/scholarship-application/

    How would I add some space between Application Session and Contact Information and other section breaks on page?

    Thanks, Yael

    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  2. Kevin Flahaut
    Administrator

    The spacing problems are coming from your theme styles. If you look on line 925 of your style.css file, you'll see that it is setting the top and bottom margins to 0. If you disable that rule, you'll notice the form spacing in general is improved (not just the section breaks)

    screenshot: http://grab.by/9Ovi

    To target just an individual field, in this case the "contact information" section container, you would view your page source, find the ID on that field container and target it for manipulation. In your form, the list container id is "field_3_17".

    You would add this to the end of your theme stylesheet.

    [css]
body .gform_wrapper .gform_body .gform_fields #field_3_17.gsection {margin:30px 0;}
    Copy

    This was taken directly from the CSS targeting samples documentation you referenced.. look for "section break container".

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

    You can refer back to that for more examples of how to apply styles to specific fields or globally should you need.

    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  3. Yael
    Member

    Hi Kevin,

    Thank you so much for the quick reply. I really appreciate it.

    How would I disable that rule -- by commenting it out? I do see your point :) thanks for the screen shot!

    Yael

    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  4. Kevin Flahaut
    Administrator

    Yes, you could comment the margin portion out, but it may affect the list spacing in your other content.

    Try adding this to the end of your style.css file. It should override the margin settings it's inheriting and reset them to the default form styles.

    [css]
#content .post .gform_wrapper ul li,
#content .page .gform_wrapper ul li,
.catalyst-widget-area .gform_wrapper ul li  {
	margin: 0 0 14px 0
}
    Copy
    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  5. Yael
    Member

    HI Kevin,

    I commented out the rule located on line 925 

    [css]
/*#content .post ul li, #content .page ul li, #content .post ol li, #content .page ol li, .catalyst-widget-area ul li, .catalyst-widget-area ol li {
	margin: 0 0 0 20px;
	padding: 0;
}*/
    Copy

    and yet there is no change to form layout.

    What did I miss ?

    Yael

    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  6. Kevin Flahaut
    Administrator

    There is another similar rule in this stylesheet.. dynamik-min.css on line 2.

    Have you tried adding the last snippet I gave you to your stylesheet? I believe that should fix it for you.

    Posted 13 years ago on Tuesday April 5, 2011 | Permalink

  7. Yael
    Member

    Thanks, Kevin, adding the snippet to the style sheet did the trick.

    Posted 13 years ago on Wednesday April 6, 2011 | Permalink

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