https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css Gravity Support Forums Topic: How to Override Gravity Forms Default CSS en-US Tue, 21 Apr 2026 11:56:22 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31338 Mon, 01 Aug 2011 14:43:14 +0000 Kevin Flahaut 31338@https://legacy.forums.gravityhelp.com/ <p>Great success! We love to hear that. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31337 Mon, 01 Aug 2011 14:41:02 +0000 JordashTalon 31337@https://legacy.forums.gravityhelp.com/ <p>Ok good to know, i've tested it in all major browsers and it seems to work ok. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31236 Sat, 30 Jul 2011 09:21:05 +0000 Kevin Flahaut 31236@https://legacy.forums.gravityhelp.com/ <p>Using the "body" in your rule isn't a hack, it's just better CSS specificity. All of the elements you're targeting are children of the body. If you make your rule more specific, it will take precedence over other more generic rules when the browser renders the styles.</p> <p>if you really wanted to get all wild on your form, you could even get this granular to target a select field.</p> <pre><code>[css] html body div.contentWrapper div#content div.innerContent div.productSidebar div#gform_wrapper_2.gform_wrapper form#gform_2 div.gform_body ul#gform_fields_2.gform_fields li#field_2_2.gfield div.ginput_container select#input_2_2.medium</code></pre> <p><a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="nofollow">http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/</a> </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31228 Fri, 29 Jul 2011 23:16:50 +0000 JordashTalon 31228@https://legacy.forums.gravityhelp.com/ <p>Oh those CSS Targeting examples are good, If I put a body in front it seems to work most of the time. Seems like a hack way to do it but I guess it'll work. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31227 Fri, 29 Jul 2011 23:08:53 +0000 JordashTalon 31227@https://legacy.forums.gravityhelp.com/ <p>In fact looking through it, I can't even find a way to go more specific. For example I want all of the select boxes to be the entire width of the sidebar, (about 292 pixels) and I can reference all of the select boxes in the sidebar in a way that overrides the gravity form default css. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31226 Fri, 29 Jul 2011 22:54:56 +0000 JordashTalon 31226@https://legacy.forums.gravityhelp.com/ <p><a href="http://carriagedoorsgarage.com/roll-up-carriage-doors-cart-66-version/" rel="nofollow">http://carriagedoorsgarage.com/roll-up-carriage-doors-cart-66-version/</a></p> <p>There's a link to a form i'm testing, (it's an integration with Cart 66).</p> <p>All of the elements underneath "Door Accessories" I assigned a custom css value and I got them to float left, it's the padding and margins that i'm having a hard time getting specifically identified. Is there an easier way to find out how to get more specific?</p> <p>I also want to make all the select boxes a specific width like this page:</p> <p><a href="http://carriagedoorsgarage.com/roll-up-carriage-door/" rel="nofollow">http://carriagedoorsgarage.com/roll-up-carriage-door/</a></p> <p>I guess i'll just have to keep poking at it until I can get specific enough with it. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31221 Fri, 29 Jul 2011 19:21:28 +0000 Kevin Flahaut 31221@https://legacy.forums.gravityhelp.com/ <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> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31220 Fri, 29 Jul 2011 19:17:08 +0000 Chris Hajer 31220@https://legacy.forums.gravityhelp.com/ <p>You mentioned that you are trying to float <strong>some</strong> of the labels. If you want to float them all, in the form settings tab (where you enter the title, description and confirmation) you can select a label placement of top, left or right aligned. That affects the whole form though.</p> <p>Screenshot:<br /> <a href="http://minus.com/mbWAd7N" rel="nofollow">http://minus.com/mbWAd7N</a> </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31219 Fri, 29 Jul 2011 19:09:17 +0000 Chris Hajer 31219@https://legacy.forums.gravityhelp.com/ <p>Please post a link to your form.</p> <p>You can override all the Gravity Forms styles by specifying styles that are more specific in your theme's stylesheet. If the Gravity Forms CSS "wins" then you need to get even more specific in your theme stylesheet to override the default Gravity Forms styles. </p> https://legacy.forums.gravityhelp.com/topic/how-to-override-gravity-forms-default-css#post-31218 Fri, 29 Jul 2011 19:04:49 +0000 JordashTalon 31218@https://legacy.forums.gravityhelp.com/ <p>I'm trying to float some of the labels to the left of their Dropdowns to make the content more readable. However when I put the extra css in the style.css folder it doesn't overwrite the Gravity Forms CSS, it seems like the Gravity Forms CSS always takes precedence over anything, how do I make my custom css higher priority? </p>