https://legacy.forums.gravityhelp.com/topic/css-styling-documentation Gravity Support Forums Topic: CSS Styling Documentation en-US Mon, 20 Apr 2026 06:04:48 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2909 Sun, 24 Jan 2010 21:55:05 +0000 Kevin Flahaut 2909@https://legacy.forums.gravityhelp.com/ <p>Thanks for your patience. We were traveling so it was difficult to get back to this earlier.</p> <p>I did a quick test and styled a simple confirmation block loosely based on your design. My CSS is below. It should get you started in the right direction.</p> <pre><code>div.headerright #gforms_confirmation_message { color:#fff; border:1px solid #5E554C; padding:20px; margin-right:20px; background-color:#3b3026; }</code></pre> <p>view the <a href="http://grab.by/1WQu" rel="nofollow">screenshot</a> </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2895 Sat, 23 Jan 2010 09:11:48 +0000 Kevin Flahaut 2895@https://legacy.forums.gravityhelp.com/ <p>Glad that helped. Honestly, I didn't consider the confirmation text in my original test so I'll tinker with it a little more and post something here a little later. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2894 Fri, 22 Jan 2010 22:22:16 +0000 wpuser 2894@https://legacy.forums.gravityhelp.com/ <p>Kevin...this is great! Thanks so much for the help! I will use this as a guide moving forward so I don't have to harass you guys anymore. :-)</p> <p>One last question...any tips for the confirmation message? </p> <p>Looks like div is <code>gforms_confirmation_message</code> but how do I make it specific to that form? gforms_4?</p> <p>Thanks! </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2882 Fri, 22 Jan 2010 04:52:24 +0000 Kevin Flahaut 2882@https://legacy.forums.gravityhelp.com/ <p>I did a quick test and here's a screenshot of the result.</p> <p><a href="http://grab.by/1TJs" rel="nofollow">screenshot</a></p> <p>You just need to specify the styles, based on inheritance from the specific form id or using the specific field id's.</p> <p>This should get you started. Just append this to the end of your theme style sheet.</p> <pre><code>form#gform_4 {margin:16px 0 0 0; padding:0;} ul#gform_fields_4 {margin:0; padding:0;} ul#gform_fields_4 li {list-style-type:none; padding:0; margin:0;} li#field_4_2 label {color:#fff;} input#input_4_2 {margin:3px 3px 0 0; width:170px; float:left;} form#gform_4 div.gform_footer {width:50px; float:left; padding:5px 0 0 0;}</code></pre> <p>You'll probably want to tweak it a bit, but that should get you going in the right direction. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2881 Fri, 22 Jan 2010 03:48:53 +0000 wpuser 2881@https://legacy.forums.gravityhelp.com/ <p>Thanks guys. I messed around with it and still can't get it perfect.</p> <p>Site: AllisonCaughell.com</p> <p>Client only wants email signup (no RSS), so I figured I'd just put the GF email form in the header. Only thing is I want the "Submit" button to be directly to the right, for that form only...not any of the other forms ("For Buyers", "For Seller", etc). Basically look like a simple email form, with the submit to the right.</p> <p>I appreciate any help you can provide!</p> <p>P.S. GF works great for the "Comparative Market Analysis" seen under the Sellers tab. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2844 Wed, 20 Jan 2010 17:54:08 +0000 Kevin Flahaut 2844@https://legacy.forums.gravityhelp.com/ <p>The first/last name fields.. as is the case for most of the fields, use percentage widths to try and be as flexible as possible. They're going to change if the size of the containing element changes.</p> <p>Like Carl mentioned, if you'd like to post a link, I would be happy to take a look and offer some suggestions. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2843 Wed, 20 Jan 2010 17:33:59 +0000 Carl Hancock 2843@https://legacy.forums.gravityhelp.com/ <p>For more advanced styling it's usually best to copy-n-paste the contents of of the gravityforms/css/forms.css files directly into your themes stylesheet and then turn off Gravity Forms CSS output in the Forms &gt; Settings page.</p> <p>Then you can control the styles directly. You can also apply custom classes to your form in the Form Settings that you can use to override the base styles.</p> <p>If you post a link to your form and describe what you are trying to do, i'm sure someone can chime in and help you out with suggestions on how to accomplish what you want to do with the styling. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2842 Wed, 20 Jan 2010 17:08:08 +0000 wpuser 2842@https://legacy.forums.gravityhelp.com/ <p>Yeah. That's what I've been doing. Interestingly the form in the header looks right on a page that has a GF in the body, but then reverts back to the default on a page without a GF in the body. Trying to solve everything using Firebug, but just not going as quickly as I would hope, so thought there might be a tutorial, blog post, etc to look at. Appreciate the help though! </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2841 Wed, 20 Jan 2010 17:02:43 +0000 net_mage 2841@https://legacy.forums.gravityhelp.com/ <p>The best way to do styling of these forms is to use the Firebug plugin for FF. Once you output a form on a page or post you can then view all of the ID or class names and create a custom stylesheet for these elements.</p> <p>If you would like further advice I can write up a tutorial for this. Good luck. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-documentation#post-2840 Wed, 20 Jan 2010 16:45:54 +0000 wpuser 2840@https://legacy.forums.gravityhelp.com/ <p>Is there any documentation on CSS styling of Gravity Forms? If there are any blog posts on other sites, etc I'd appreciate any help.</p> <p>I'm pretty good with styling websites, but having trouble making first name/last name fields narrower to fit side by side in header. </p>