https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices Gravity Support Forums Topic: CSS Styling Questions: How to and huh? / Best Practices en-US Sun, 19 Apr 2026 20:24:39 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-112345 Wed, 02 Jan 2013 07:28:26 +0000 Chris Hajer 112345@https://legacy.forums.gravityhelp.com/ <p>If you would like to just disable Gravity Forms CSS, please go to this page on your site <a href="https://www.speedyeyes.com/wp-admin/admin.php?page=gf_settings" rel="nofollow">https://www.speedyeyes.com/wp-admin/admin.php?page=gf_settings</a> 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 <a href="https://www.speedyeyes.com/wp-content/plugins/gravityforms/css/forms.css" rel="nofollow">https://www.speedyeyes.com/wp-content/plugins/gravityforms/css/forms.css</a> and paste it to the bottom of this file <a href="https://www.speedyeyes.com/wp-content/themes/inspire/style.css" rel="nofollow">https://www.speedyeyes.com/wp-content/themes/inspire/style.css</a></p> <p>(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 <a href="http://codex.wordpress.org/Child_Themes" rel="nofollow">child theme</a> so any modifications you make to your theme are not lost when performing updates.)</p> <p>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.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-112315 Wed, 02 Jan 2013 05:58:08 +0000 wordpressuser 112315@https://legacy.forums.gravityhelp.com/ <p>The referenced page is not intended to serve as an example for troubleshooting.</p> <p>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. </p> <p>I assume GF is awesome, and I don't understand... but argggg. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-112293 Wed, 02 Jan 2013 04:40:11 +0000 wordpressuser 112293@https://legacy.forums.gravityhelp.com/ <p>I have live forms using style sheet... so I reversed all of the changes so GF is using the default styles.</p> <p>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.</p> <p>Here is the form: <a href="https://www.speedyeyes.com/order-form/" rel="nofollow">https://www.speedyeyes.com/order-form/</a> ... but right now it is using the standard GF output.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-111641 Mon, 31 Dec 2012 10:17:08 +0000 Chris Hajer 111641@https://legacy.forums.gravityhelp.com/ <p>I just tried loading this page and I get a 404 Not Found error:</p> <p><a href="https://www.speedyeyes.com/speedy-eyes-order-form/" rel="nofollow">https://www.speedyeyes.com/speedy-eyes-order-form/</a></p> <p>Do you have a current URL where we can see what's going on? </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-111484 Mon, 31 Dec 2012 04:21:07 +0000 wordpressuser 111484@https://legacy.forums.gravityhelp.com/ <p>No caching plugins... </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-109272 Thu, 27 Dec 2012 19:33:53 +0000 David Peralty 109272@https://legacy.forums.gravityhelp.com/ <p>Are you currently running any caching plugins? Hopefully, you can get this sorted out soon. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-109264 Thu, 27 Dec 2012 19:13:46 +0000 wordpressuser 109264@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-109263 Thu, 27 Dec 2012 19:12:00 +0000 wordpressuser 109263@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>What am I missing? </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-109153 Thu, 27 Dec 2012 14:48:20 +0000 David Peralty 109153@https://legacy.forums.gravityhelp.com/ <p>It unfortunately isn't a pick and choose system. You can do overrides or turn off Gravity Forms CSS. </p> <p>Those are our best practices. All my best. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-questions-how-to-and-huh-best-practices#post-108886 Thu, 27 Dec 2012 05:26:49 +0000 wordpressuser 108886@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>My problem is that my form seems to be inheriting the theme CSS AND the GF default CSS.</p> <p>Here is my form: <a href="https://www.speedyeyes.com/speedy-eyes-order-form/" rel="nofollow">https://www.speedyeyes.com/speedy-eyes-order-form/</a></p> <p>I understand that I could go in and edit the GF forms.css file... but I know that is not best practice.</p> <p>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 &gt; CSS Class Names" for fields... but that doesn't seem to work. </p> <p>For example here: <a href="https://www.speedyeyes.com/speedy-eyes-order-form/" rel="nofollow">https://www.speedyeyes.com/speedy-eyes-order-form/</a> ... I would like to<br /> - Use the theme h2, but it is using both<br /> - Change the width of certain form fields<br /> - Increase the width of the field label<br /> - Increase the size of the field labels (e.g.: "First" and "Last", under the form fields) and push them close to the field.<br /> - Change the style of the "Price"</p> <p>I see the settings options to disable GF output CSS, but I don't want that. </p> <p>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 </p> <p>And how do I define when GF should not use GF default styling? My attempts at using "CSS Class Name" have been unsuccessful </p>