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.

[resolved] Custom CSS Styling on Gravity Form

Gravity Support Forums » Plugin Support » Gravity Forms

  1. David
    Member

    HI,
    I'm a CSS novice. Can someone help me understand how to customise the CSS styling for a gravity form? For example, how do I change the look and feel of my form to match the look and feel of the WP login screen?

    My Form
    http://www.displayme.net/test-form-styling

    WP Login Form
    http://www.displayme.net/wp-login.php?

    Things I want to achieve:
    Change font to match WP Login Form (font, font size, font colour).
    Make form shape to match (rounded rectangle, shadowed).
    Make submit button to match (blue login button)
    Make field style to match (1px outline, not 3D outline )

    Ideally, it would be great to end up with a chunk of CSS that I can add to custom.css and it applies this styling to every gravity form on my site.

    Thankyou

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  2. Kevin Flahaut
    Administrator

    Hey David. Carl told me you were having some issues with the CSS stuff, so I'll be happy to take a look at it. Give me a little bit and I'll get back to you on it.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  3. David
    Member

    Wow. Faaaaaaaast response! I'm really impressed.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  4. Kevin Flahaut
    Administrator

    David, I grabbed a bunch of the styles directly from the WordPress login form, tweaked them a bit and applied them to a test form. This is the result.

    Form Screenshot

    It's pretty close.. there are some other content styles that you don't see in the original form, so I just ran with something that followed the overall look and feel. I tried to keep things as generic as possible, but can't guarantee that you won't have to tweak this a little on a per-form basis or that there might not be some unforeseen conflicts coming from your theme css. It should get you really close though.

    You can grab the CSS here. Just copy it and append it to the end of your theme style sheet or custom.css file.

    http://pastie.org/1026129

    Also, you'll want to download this button background image and put it in your theme folder, then adjust the path accordingly in the CSS.

    http://www.displayme.net/wp-admin/images/button-grad.png

    Hope that helps you out. Good luck with it.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  5. David
    Member

    Ok. Gravity just went from great, to unbelievably killer.
    That is the complete bizness! Incredible support.
    Thankyou. I'm spreading the word.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  6. David
    Member

    Is there a gravity doc somewhere that describes the css that controls:
    1) the spacing between Fields
    2) the spacing between a Form Title and the Field label
    3) Form label height
    etc

    I want to adjust the height of a form / the spacing of elements in a form.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  7. Kevin Flahaut
    Administrator

    Hey David, I'm pleased to hear that you're happy with the changes. Here's a visual CSS guide I put together a while back that should help get you familiar with the general form layout, classes, etc.

    http://www.gravityhelp.com/documentation/visual-css-guide/

    Hope that helps.

    Posted 14 years ago on Thursday July 1, 2010 | Permalink

  8. David
    Member

    Beautiful.
    Thanks again.

    Posted 14 years ago on Friday July 2, 2010 | Permalink

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