https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file Gravity Support Forums Topic: Creating a custom forms.css file en-US Sun, 19 Apr 2026 11:41:57 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47385 Wed, 25 Jan 2012 20:19:10 +0000 Rob Harrell 47385@https://legacy.forums.gravityhelp.com/ <p>Awesome Ken, we're always glad to help out. Let us know if you need anything else! </p> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47381 Wed, 25 Jan 2012 19:42:44 +0000 Ken Dove 47381@https://legacy.forums.gravityhelp.com/ <p>Thx, Rob. I have to say I'm very impressed with Gravity Forms support. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47379 Wed, 25 Jan 2012 19:36:34 +0000 Rob Harrell 47379@https://legacy.forums.gravityhelp.com/ <p>This would place a border around the form with the ID of 1 (which is what is on your current link provided)</p> <pre><code>[css] #gform_wrapper_1 { border: 1px solid black; }</code></pre> <p>You can obviously add other properties and such here as needed. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47376 Wed, 25 Jan 2012 19:16:20 +0000 Ken Dove 47376@https://legacy.forums.gravityhelp.com/ <p>Thx, Rob. Just figured out Weaver 2.2.6 provides &lt;HEAD&gt; and Advanced CSS insertion fields for exactly this purpose. Made the changes easy, although I will likely try your suggestion as well for educational purposes. </p> <p>...Now if I can just figure out how to but a box around the form. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47351 Wed, 25 Jan 2012 17:22:37 +0000 Rob Harrell 47351@https://legacy.forums.gravityhelp.com/ <p>Hey Ken, try this out instead (using !important to override these two properties from forms.css):</p> <pre><code>[css] body .gform_wrapper .chzn-container-single .chzn-single { height: 20px !important; line-height: 20px !important; }</code></pre> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47348 Wed, 25 Jan 2012 16:49:39 +0000 Ken Dove 47348@https://legacy.forums.gravityhelp.com/ <p>Kevin:</p> <p>Thx for your help. I'm getting closer but still doing something wrong. Using Firebug I've identified the lines of css I need to change to get the look I'm after (some are in the forms.css file and a few are in the weaver/styles.css file.</p> <p>I inserted this code as per the following at the end of styles.css file (the code is from line 1202 of forms.css) unfortunately nothing changed. Where am I going wrong?</p> <pre><code>#main { display: inline; background: none !important; } .home .sticky { border: none; } //inserted code starts here body .gform_wrapper .chzn-container-single .chzn-single { height: 20px; line-height: 20px; } //ends here }</code></pre> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47281 Wed, 25 Jan 2012 02:43:57 +0000 Kevin Flahaut 47281@https://legacy.forums.gravityhelp.com/ <p>A. You don't really need to create a custom forms.css file. You can simply append any custom Gravity Forms CSS rules to the end of the existing theme stylesheet. In your case, it would be this file.</p> <p><a href="http://calgarynewhomefinder.com/wp-content/themes/weaver/style.css" rel="nofollow">http://calgarynewhomefinder.com/wp-content/themes/weaver/style.css</a></p> <p>Open the style.css file and add any new CSS rules to the very end of the document. The browser reads the stylesheet from top to bottom so any rules defined near the end of the document should supersede those placed near the beginning of the file.</p> <p>B. Unless you need to make extensive changes to the form styles, I recommend leaving the defaults in place and just creating the new rules to override the defaults.. again placed at the end of your theme stylesheet. If you want to completely turn off the default styles, you can go the the <a href="http://www.gravityhelp.com/documentation/images/1/10/Install-step4.png" rel="nofollow">forms settings page</a> and uncheck the "output CSS" option. That will turn off the default stylesheets and you can start with everything from scratch if you want. The world is your oyster.</p> <p>If you need some help overriding default styles, you can reference this guide for examples of how to properly format your CSS rules to apply changes to specific form elements.</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <p>Hope that helps out. </p> https://legacy.forums.gravityhelp.com/topic/creating-a-custom-formscss-file#post-47273 Wed, 25 Jan 2012 00:38:37 +0000 Ken Dove 47273@https://legacy.forums.gravityhelp.com/ <p>I am a css beginner and that is the root of the problem. Here's what I'm struggling with...</p> <p>My form has excessive amounts of space between elements (<a href="http://calgarynewhomefinder.com/find-a-home/)" rel="nofollow">http://calgarynewhomefinder.com/find-a-home/)</a>. I'm using Weaver 2.2.6 as my theme.</p> <p>After several hours of research I've figured out that<br /> A) forms inherit styles from the theme - thus the spacing problem<br /> B) To make the forms look the way I want them to I need a custom forms.css file (as the instructions say not to change the existing one).</p> <p>I get the basics of css and know how to use Firebug</p> <p>but...</p> <p>every post and online resource I can find seems to assume that I know how to create a custom forms.css file and that I know how to make my forms reference that file for formatting. (Ok, the creating part isn't hard - just copy the existing file and make changes). </p> <p>Unfortunately I have no clue of...<br /> A) Whether my customized forms.css file should be given a different file name and put in the same folder as the original forms.css or I should give it the same name and put it somewhere else and<br /> B) How to make the forms use my custom file instead of the default forms.css (this is the big mystery at this point!)</p> <p>Instructions or a link to somewhere that will explain this procedure will be appreciated. </p>