Modifying the CSS on a Gravity form « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

pcgs51
Member

I am using WordPress 3.0.5 with Thesis 1.8. I have a form found here:

<http://priscillac.com/contact/>

I have tried all I can to style the form without touching the custom.css that comes with Gravity. In Thesis we are supposed to add custom CSS to the custom.css in this location.

<http://priscillac.com/wordpress/wp-content/themes/thesis_18/custom/custom.css>

My styles for the Gravity form are found at the very bottom of this document (starts around line 785). I don't want to turn off all they styling (tried that but that is way more work than I need to do) but I'd sure like to change the submit button but cannot find a way to override the Gravity CSS. Sure hope you can help.

I need to know if I can put the rules in my Thesis custom.css and if so can you please specify how to write the rules because nothing I'm doing will override the Gravity rules unless I edit the original Gravity CSS and I don't think you want me to do that.

Thanks.

Posted 13 years ago on Wednesday February 16, 2011 | Permalink
Kevin Flahaut
Administrator

You can put your new style rules in the Thesis custom CSS file and they will work just fine. We have hundreds of Gravity Forms users who also use Thesis. If you're having problems overriding the Thesis default CSS, then you'll simply need to use better CSS inheritance for your rules.

Here's a guide with samples to get you started. It covers targeting all of the different form elements with CSS.

http://www.rocketgenius.com/gravity-forms-css-targeting-specific-elements/

Posted 13 years ago on Wednesday February 16, 2011 | Permalink
pcgs51
Member

Yes, I would think that I could put the styles into the Thesis themes custom.css file but it isn't working for me. Not sure what I'm doing wrong. I went to your link found the rule to modify the button but it isn't working. I also tried adding (as per Thesis suggestion) the .custom class to the rule and adding it to the rule by assigning it to the body element this way: body.custom

In Firebug I can make things happen but not in real world application. Firebug only sees this in your .css not in Thesis. The Gravity CSS wants to override everything and I cannot get around it.

I don't know how to improve the inheritance beyond using those two techniques I've already tried.

I do use a couple of other rules to modify this form and they work. But this submit button has eaten two days of educated guesses and desperate attempts. I really hope you can help me. Thanks.

Posted 13 years ago on Wednesday February 16, 2011 | Permalink
Kevin Flahaut
Administrator
You just need to look at the Thesis structure, match the inheritance and then even be more specific if you can. Gravity Forms includes some basic support for Thesis styles, but this is more specific and should override everything.

Try adding this to your custom CSS
```
body.custom #container #page #content_box .post_box .format_text .gform_wrapper .gform_footer input[type=submit].button {
    background-color: red;
    border:1px solid black;
    font-family:arial,sans-serif
}
```
test screenshot: http://grab.by/8Z6Y
Posted 13 years ago on Wednesday February 16, 2011 | Permalink
pcgs51
Member

Works, thanks!

Posted 13 years ago on Wednesday February 16, 2011 | Permalink

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