https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices Gravity Support Forums Topic: Custom CSS Best Practices en-US Tue, 21 Apr 2026 11:55:00 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-42287 Mon, 28 Nov 2011 12:24:17 +0000 Rob Harrell 42287@https://legacy.forums.gravityhelp.com/ <p>You can target specific form IDs (each form has it's own) or hook onto some selector on the page. You can also set custom classes within the form builder. Since I don't have a link to your site, that's about all I can provide to you at the moment. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-42283 Mon, 28 Nov 2011 12:03:38 +0000 isle2isle 42283@https://legacy.forums.gravityhelp.com/ <p>I feel like an idiot. Just don't get it. How can my style.css override the gravity forms css when style.css appears BEFORE it on my pages? I am missing something very basic here I know. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11139 Wed, 13 Oct 2010 20:31:14 +0000 Kevin Flahaut 11139@https://legacy.forums.gravityhelp.com/ <p>Totally up to you. The more specific you are with your CSS rules, the fewer inheritance problems you'll have. Sounds like a solid plan. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11137 Wed, 13 Oct 2010 19:18:45 +0000 Chris M. 11137@https://legacy.forums.gravityhelp.com/ <p>One last thing (Kevin and Carl):</p> <p>As per the advice of the Thesis guys, they say the following:</p> <blockquote><p> BASIC USAGE:</p> <p>If you have enabled the custom stylesheet in the Thesis options panel, the &lt;body&gt; tag<br /> will be appended with the "custom" class, like so: &lt;body class="custom"&gt;. You can use<br /> the "custom" class to override *any* CSS declarations contained in the style.css file.</p> <p>For example, if you wish to change the default link color to green, you would add the<br /> following declarations to this file:</p> <p> .custom a, .custom a:visited { color: #090; } &lt;--- This makes links green<br /> .custom a:hover { color: #00f; } &lt;--- This makes links blue when you mouse over them</p> <p>WHY THIS WORKS:</p> <p>By using the "custom" class, you are creating more specific CSS declarations for HTML<br /> elements. CSS styling is applied through rules of specificity, and because declarations<br /> prepended with .custom are more specific, they get applied when the page is rendered!</p> </blockquote> <p>So, my question is this:</p> <p>Should I also take this approach with the Gravity Forms custom CSS in this same file here (with the Thesis customizations)?</p> <p>Like this, for example:</p> <p><code>.custom .gform_body {background: #000000;}</code> </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11134 Wed, 13 Oct 2010 18:13:01 +0000 Chris M. 11134@https://legacy.forums.gravityhelp.com/ <p>Love it! </p> <p>Thanks for the tips, time, and advice. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11131 Wed, 13 Oct 2010 18:05:44 +0000 Carl Hancock 11131@https://legacy.forums.gravityhelp.com/ <p>Yep, you are correct. Just use CSS inheritance to add just the styles necessary to do what you want to your custom.css file. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11129 Wed, 13 Oct 2010 17:50:22 +0000 Chris M. 11129@https://legacy.forums.gravityhelp.com/ <p>Thanks Carl, I will try it out!</p> <p>Just to repeat, all I have do is isolate/target the exact selector that I want to influence within the form and place that ONE declaration block in the "custom.css" file for Thesis?</p> <p>Thanks again guys! </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11094 Wed, 13 Oct 2010 11:12:49 +0000 Carl Hancock 11094@https://legacy.forums.gravityhelp.com/ <p>Yes, you would add your custom CSS to override the Gravity Forms default styles to your custom.css file.</p> <p>If you have any problems with a style not being applied because of the order in which the stylesheets are included in the HTML you can use the CSS !important declaration to force it to apply.</p> <p>Ex.</p> <p>.gform_body {background: #000000!important;} </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11089 Wed, 13 Oct 2010 10:57:30 +0000 Chris M. 11089@https://legacy.forums.gravityhelp.com/ <p>Thanks Kevin! I really appreciate the time you have taken to answer me (I know it must be overwhelming at times). </p> <p>Ok, so I am using Thesis 1.8, and they use a custom.css file structure (which I love, and I understand that this is what you are suggesting as well). Can I just enter in the selectors that I want to target in Gravity Forms in the Thesis custom.css file (assuming that all of the Gravity Form selectors are uniquely named)? I don't want to make drastic changes, mainly things like form font size, border, background shading, etc. Maybe about 6 major areas of the display of the forms.</p> <p>Thanks again Kevin! </p> https://legacy.forums.gravityhelp.com/topic/custom-css-best-practices#post-11083 Wed, 13 Oct 2010 09:23:54 +0000 Kevin Flahaut 11083@https://legacy.forums.gravityhelp.com/ <p>Chris,</p> <p>Welcome and thanks for the kind words.</p> <p>We recommend that you append any custom styles to the end of your theme's stylesheet and never change the default forms.css file that's in the plugin folder.</p> <p>If you need to make extensive changes, I recommend copying the entire contents of the forms.css file from the plugin folder and either making a new stylesheet in your theme folder or appending all of that to your theme's style.css file. Then go to the form settings page and set the "output css" option to no. That way you're free to modify everything safely from within the theme folder and none of your changes will be overwritten when the plugin updates. </p>