How to Override Gravity Forms Default CSS

Gravity Support Forums » Plugin Support » Gravity Forms

JordashTalon
Member

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?

Posted 12 years ago on Friday July 29, 2011 | Permalink
Chris Hajer
Key Master

Please post a link to your form.

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.

Posted 12 years ago on Friday July 29, 2011 | Permalink
Chris Hajer
Key Master

You mentioned that you are trying to float some 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.

Screenshot:
http://minus.com/mbWAd7N

Posted 12 years ago on Friday July 29, 2011 | Permalink
Kevin Flahaut
Administrator

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 12 years ago on Friday July 29, 2011 | Permalink
JordashTalon
Member

http://carriagedoorsgarage.com/roll-up-carriage-doors-cart-66-version/

There's a link to a form i'm testing, (it's an integration with Cart 66).

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?

I also want to make all the select boxes a specific width like this page:

http://carriagedoorsgarage.com/roll-up-carriage-door/

I guess i'll just have to keep poking at it until I can get specific enough with it.

Posted 12 years ago on Saturday July 30, 2011 | Permalink
JordashTalon
Member

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.

Posted 12 years ago on Saturday July 30, 2011 | Permalink
JordashTalon
Member

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.

Posted 12 years ago on Saturday July 30, 2011 | Permalink
Kevin Flahaut
Administrator
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.

if you really wanted to get all wild on your form, you could even get this granular to target a select field.
```
[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
```
http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
Posted 12 years ago on Saturday July 30, 2011 | Permalink
JordashTalon
Member

Ok good to know, i've tested it in all major browsers and it seems to work ok.

Posted 12 years ago on Monday August 1, 2011 | Permalink
Kevin Flahaut
Administrator

Great success! We love to hear that.

Posted 12 years ago on Monday August 1, 2011 | Permalink

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