CSS Styling Questions: How to and huh? / Best Practices

Gravity Support Forums » Plugin Support » Gravity Forms

wordpressuser
Member

I'm sorry if I missed answers to the following questions somewhere... I definitely browsed the forum AND read through the documentation... however, I can't seem to figure this out. I consider myself of moderate CSS ability.

My problem is that my form seems to be inheriting the theme CSS AND the GF default CSS.

Here is my form: https://www.speedyeyes.com/speedy-eyes-order-form/

I understand that I could go in and edit the GF forms.css file... but I know that is not best practice.

It seems in some places I would like the default GF styles and in other places I would like my theme CSS. For fields that I want to have the theme CSS, I tried defining the "Advanced > CSS Class Names" for fields... but that doesn't seem to work.

For example here: https://www.speedyeyes.com/speedy-eyes-order-form/ ... I would like to
- Use the theme h2, but it is using both
- Change the width of certain form fields
- Increase the width of the field label
- Increase the size of the field labels (e.g.: "First" and "Last", under the form fields) and push them close to the field.
- Change the style of the "Price"

I see the settings options to disable GF output CSS, but I don't want that.

My question is not necessarily how to do the above... but what the best practices are for handling these scenarios... should I (1) remove inapplicable CSS from GF forms.css so it inherits theme css? YUCK (2) create additional css in my theme CSS that repeats the theme CSS I want to use in the GF form

And how do I define when GF should not use GF default styling? My attempts at using "CSS Class Name" have been unsuccessful

Posted 11 years ago on Thursday December 27, 2012 | Permalink
David Peralty

It unfortunately isn't a pick and choose system. You can do overrides or turn off Gravity Forms CSS.

Those are our best practices. All my best.

Posted 11 years ago on Thursday December 27, 2012 | Permalink
wordpressuser
Member

I disabled the GF CSS output in settings after copying and pasting the entire GF forms.css content to my theme custom.css and none of the GF styles are working.

What am I missing?

Posted 11 years ago on Thursday December 27, 2012 | Permalink
wordpressuser
Member

By the way, i reversed everything because of a live form... so you will not be able to see this if you go to the page.

Posted 11 years ago on Thursday December 27, 2012 | Permalink
David Peralty

Are you currently running any caching plugins? Hopefully, you can get this sorted out soon.

Posted 11 years ago on Thursday December 27, 2012 | Permalink
wordpressuser
Member

No caching plugins...

Posted 11 years ago on Monday December 31, 2012 | Permalink
Chris Hajer
Key Master

I just tried loading this page and I get a 404 Not Found error:

https://www.speedyeyes.com/speedy-eyes-order-form/

Do you have a current URL where we can see what's going on?

Posted 11 years ago on Monday December 31, 2012 | Permalink
wordpressuser
Member

I have live forms using style sheet... so I reversed all of the changes so GF is using the default styles.

I tried disabling allowing GF to output CSS and copied and pasted the GF CSS into my theme css files and for whatever reason, the GF styles in my theme CSS is not displaying the same as if I was allowing GF to output CSS. I hope this made sense.

Here is the form: https://www.speedyeyes.com/order-form/ ... but right now it is using the standard GF output.

I am trying to figure out how to disable GF CSS output and copy the GF CSS into my theme so I can modify the styles.

Posted 11 years ago on Wednesday January 2, 2013 | Permalink
wordpressuser
Member

The referenced page is not intended to serve as an example for troubleshooting.

I am just having so much trouble with GF CSS. I am not a CSS power user... however, I know enough to typically accomplish everything I need with customizing [dozens of] themes... but GF is in a completely different league. I have read all the documentation... but am just having so many problems that I don't know where to start with specific questions.

I assume GF is awesome, and I don't understand... but argggg.

Posted 11 years ago on Wednesday January 2, 2013 | Permalink
Chris Hajer
Key Master

If you would like to just disable Gravity Forms CSS, please go to this page on your site https://www.speedyeyes.com/wp-admin/admin.php?page=gf_settings and select "No" for the option "Output CSS". That will prevent Gravity Forms from outputting its own stylesheet. Then, copy the entire contents of this file https://www.speedyeyes.com/wp-content/plugins/gravityforms/css/forms.css and paste it to the bottom of this file https://www.speedyeyes.com/wp-content/themes/inspire/style.css

(It looks like you would be modifying the Inspire theme from Woothemes. If they update the theme, you will lose these changes. The WordPress best practice here would be to create and use a child theme so any modifications you make to your theme are not lost when performing updates.)

HOWEVER, there is no need to do any of that. You can if you like, and it seems to be a way you're familiar with and comfortable with. There is no need to copy the entire stylesheet over to your own stylesheet. Additionally, you should not modify the forms.css file which comes with the plugin. The best practice is to override the specific style you want, by adding a more specific rule in your child theme's stylesheet.

If you would like to go that route, please identify one element on this page you would like to change, and we will show you how to do it. With that knowledge, you can use the same process to modify the display of other elements in your form. No need to copy the entire Gravity Forms stylesheet over to your theme.

Posted 11 years ago on Wednesday January 2, 2013 | Permalink