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.

Beginner Question on Formatting

  1. I would like to add spaces to a tightly cramped form, change headline font colors and some other basics. The only option I can see for formatting is under the "Advanced" tab under "Edit Field" (or Section Break" etc.), where there is a field for "CSS Class Name." The "Ready Class Names" don't have options for formatting color, line spacing, etc. I know a little html but have no idea where to go to make any changes. If you can help, please be very specific in your response.
    Thank you!

    Posted 12 years ago on Wednesday March 7, 2012 | Permalink
  2. Could you provide a link to your form by chance? I can provide you with some selectors to use to get what you are looking to do.

    Posted 12 years ago on Wednesday March 7, 2012 | Permalink
  3. Wonderful! The form is located at http://www.tradelinksystems.com/quote-request/ (it's the "Request Quote" link in the main navigation).

    Posted 12 years ago on Thursday March 8, 2012 | Permalink
  4. You will want to add these styles to your theme's stylesheet. Also you can use this guide as a reference, and/or chrome dev tools or firebug for firefox.

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

    You can use this to change the label styles:

    [css]
    .gform_wrapper .gfield_label {
    color: blue;
    }

    The section break headlines are h2 elements. Currently you have a declaration in your theme's stylesheet for h2 styling, which the form is inheriting (as it should):

    [css]
    #content h2 {
    font-size: 20px;
    padding: 0 0 5px 0;
    border-bottom: 1px dotted #BBB;
    }

    If you want to target only the headlines on the form you could use:

    [css]
    .gform_wrapper h2.gsection_title {
    color: blue !important;
    }

    The !important here is used to override the color styling of this:

    [css]
    #content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
    color: #444;
    font-family: Arial, Tahoma, Verdana;
    font-weight: bold;
    text-decoration: none;
    margin: 0 0 5px 0;
    }

    It looks like you have some break tags coming in on some of your fields too:

    http://grab.by/cgVk

    You could do this to try to add spacing between the fields:

    [css]
    .gform_wrapper li, .gform_wrapper form li {
    margin: 10px 0 0 20px !important;
    }

    Let me know how this goes for you.

    Posted 12 years ago on Thursday March 8, 2012 | Permalink

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