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