https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form Gravity Support Forums Topic: [resolved] Custom CSS Styling on Gravity Form en-US Sun, 19 Apr 2026 23:30:01 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6913 Thu, 01 Jul 2010 20:01:32 +0000 David 6913@https://legacy.forums.gravityhelp.com/ <p>Beautiful.<br /> Thanks again. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6897 Thu, 01 Jul 2010 09:07:36 +0000 Kevin Flahaut 6897@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p><a href="http://www.gravityhelp.com/documentation/visual-css-guide/" rel="nofollow">http://www.gravityhelp.com/documentation/visual-css-guide/</a></p> <p>Hope that helps. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6892 Thu, 01 Jul 2010 04:37:15 +0000 David 6892@https://legacy.forums.gravityhelp.com/ <p>Is there a gravity doc somewhere that describes the css that controls:<br /> 1) the spacing between Fields<br /> 2) the spacing between a Form Title and the Field label<br /> 3) Form label height<br /> etc</p> <p>I want to adjust the height of a form / the spacing of elements in a form. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6891 Thu, 01 Jul 2010 02:48:47 +0000 David 6891@https://legacy.forums.gravityhelp.com/ <p>Ok. Gravity just went from great, to unbelievably killer.<br /> That is the complete bizness! Incredible support.<br /> Thankyou. I'm spreading the word. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6885 Wed, 30 Jun 2010 23:48:04 +0000 Kevin Flahaut 6885@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p><a href="http://grab.by/grabs/d90db0486bf0df3fb67326324e563a4f.png" rel="nofollow">Form Screenshot</a></p> <p>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.</p> <p>You can grab the CSS here. Just copy it and append it to the end of your theme style sheet or custom.css file.</p> <p><a href="http://pastie.org/1026129" rel="nofollow">http://pastie.org/1026129</a></p> <p>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.</p> <p><a href="http://www.displayme.net/wp-admin/images/button-grad.png" rel="nofollow">http://www.displayme.net/wp-admin/images/button-grad.png</a></p> <p>Hope that helps you out. Good luck with it. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6882 Wed, 30 Jun 2010 23:03:53 +0000 David 6882@https://legacy.forums.gravityhelp.com/ <p>Wow. Faaaaaaaast response! I'm really impressed. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6880 Wed, 30 Jun 2010 22:23:33 +0000 Kevin Flahaut 6880@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-styling-on-gravity-form#post-6879 Wed, 30 Jun 2010 22:11:09 +0000 David 6879@https://legacy.forums.gravityhelp.com/ <p>HI,<br /> 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?</p> <p>My Form<br /> <a href="http://www.displayme.net/test-form-styling" rel="nofollow">http://www.displayme.net/test-form-styling</a></p> <p>WP Login Form<br /> <a href="http://www.displayme.net/wp-login.php?" rel="nofollow">http://www.displayme.net/wp-login.php?</a></p> <p>Things I want to achieve:<br /> Change font to match WP Login Form (font, font size, font colour).<br /> Make form shape to match (rounded rectangle, shadowed).<br /> Make submit button to match (blue login button)<br /> Make field style to match (1px outline, not 3D outline )</p> <p>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.</p> <p>Thankyou </p>