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.

Can't figure out how to use my themes style?

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Chrjy
    Member

    I've downloaded Gravity Forms but can't seem to figure out how to make my form consistent with the contact page. The contact page form was already there and part of the theme, it can be seen at:
    http://dev.velvetrockapps.com/velvetrockapps/contact/

    All I want is the same spacing between the form fields, the same font and to remove the black bullet points to the left of the form fields on the support page which can be seen at:
    http://dev.velvetrockapps.com/velvetrockapps/support/

    Thanks for any help with this.

    Posted 12 years ago on Saturday December 10, 2011 | Permalink

  2. Rob Harrell
    Member

    I'm not seeing the Gravity Forms CSS in your page. Do you have the option checked in your settings to output the CSS? That will be the first place to start then we can look at how the styles show afterwards.

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

    You'll also find a lot of direction to what you are looking to do here:

    http://www.gravityhelp.com/frequently-asked-questions/faq-styling-formatting/

    Posted 12 years ago on Saturday December 10, 2011 | Permalink

  3. Chrjy
    Member

    Thanks Rob. I turned it off to try and override the gravity forms CSS and use the themes CSS. Basically that made the form fields consistent with the contact page but of course the spacing is all incorrect. I've now turned it back on but it just uses the gravity form styling.

    Posted 12 years ago on Saturday December 10, 2011 | Permalink

  4. Rob Harrell
    Member

    To add spacing between each field (li) you can place this in your theme's style sheet:

    [css]
.gform_wrapper ul li.gfield {
margin-bottom: 10px;
}

    To add the font-family you are using you could also add:

    [css]
.gform_wrapper .top_label .gfield_label {
font-family: "Helvetica Neue", Arial, sans-serif;
}

    Then if you want to add some padding on the inputs you could do:

    [css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=number],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield select {
	padding:5px;
}
    Posted 12 years ago on Saturday December 10, 2011 | Permalink

  5. Chrjy
    Member

    Thanks Rob, looks just as I expected.

    Posted 12 years ago on Saturday December 10, 2011 | Permalink

  6. Rob Harrell
    Member

    Awesome, glad to help out!

    Posted 12 years ago on Saturday December 10, 2011 | Permalink

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