https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt Gravity Support Forums Topic: Custom CSS worked, then didn't. en-US Tue, 21 Apr 2026 16:21:39 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35814 Tue, 20 Sep 2011 23:13:47 +0000 Kevin Flahaut 35814@https://legacy.forums.gravityhelp.com/ <p>Yep, that's all in the documentation here as well… see section 9.2</p> <p><a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a></p> <pre><code>[css] body #gform_wrapper_1 .gform_footer input[type=submit] { border:1px solid red }</code></pre> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35810 Tue, 20 Sep 2011 21:26:04 +0000 DanielBurns 35810@https://legacy.forums.gravityhelp.com/ <p>Excellent. Thank you. </p> <p>I don't think I see anything in this code to target the submit button. Can you point me in the right direction to make mods to that as well?</p> <p>Thank you again for your help. </p> <p>Dan </p> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35806 Tue, 20 Sep 2011 18:52:35 +0000 Kevin Flahaut 35806@https://legacy.forums.gravityhelp.com/ <p>Okaaaay. I get it now.</p> <p>Your CSS is targeting the wrong elements. You're targeting a select element ( drop-down ) and a textarea ( paragraph text ) - neither of which appear in this form. You probably want to do something like this.. I'd make it specific to this form ID too since you probably don't want all of your forms to format this way.</p> <pre><code>[css] /* Gravity Forms Customizations */ /* input height */ body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=number], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password], body #gform_wrapper_1 .gform_body .gform_fields .gfield select { height:35px } /* text size */ body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=text], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=email], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=url], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=tel], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=number], body #gform_wrapper_1 .gform_body .gform_fields .gfield input[type=password], body #gform_wrapper_1 .gform_body .gform_fields .gfield select, body #gform_wrapper_1 .gform_body .gform_fields .gfield textarea { font-size:22px } /* label color */ body #gform_wrapper_1 .gform_body .gform_fields .gfield .gfield_label { color:red }</code></pre> <p>That should take care of all the field types you might use. You don't need all of them, but this adds support for all the field types if you want to use them in the future.</p> <p>test screenshot: <a href="http://bit.ly/plhJ9N" rel="nofollow">http://bit.ly/plhJ9N</a> </p> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35802 Tue, 20 Sep 2011 18:26:38 +0000 DanielBurns 35802@https://legacy.forums.gravityhelp.com/ <p>here you are:</p> <p><a href="http://experiencegravity.com/services/video-marketing/" rel="nofollow">http://experiencegravity.com/services/video-marketing/</a></p> <p>thank you. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35800 Tue, 20 Sep 2011 18:16:38 +0000 Kevin Flahaut 35800@https://legacy.forums.gravityhelp.com/ <p>Nope, don't edit the forms.css file. You can make all the changes you need in the theme stylesheet if done properly. Please post a URL your form page and I'll be happy to take a look at it. It's easier for me to see it and give you a specific answer rather than just guess. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35797 Tue, 20 Sep 2011 18:10:03 +0000 DanielBurns 35797@https://legacy.forums.gravityhelp.com/ <p>Inspecting the elements of the page show that it is using the style from the forms.css, not the theme's CSS file.</p> <p>But when I read the forms.css file it clearly stated not to use that for modifications since it is overwritten on updates, instead to use my theme's stylesheet. </p> <p>I'm more than a little confused.</p> <p>Thanks. </p> https://legacy.forums.gravityhelp.com/topic/custom-css-worked-then-didnt#post-35787 Tue, 20 Sep 2011 17:50:57 +0000 DanielBurns 35787@https://legacy.forums.gravityhelp.com/ <p>OK I have a really basic form, Name and Email fields, that's it. I wanted to customize the input areas, specifically, the height of the field, the input text and the label.</p> <p>I used this page to add some code to my CSS file:</p> <p><a href="http://www.gravityhelp.com/frequently-asked-questions/faq-styling-formatting/" rel="nofollow">http://www.gravityhelp.com/frequently-asked-questions/faq-styling-formatting/</a></p> <p>It worked perfectly (I swear it was working) I was able to increase the box height and the text size. I then added CSS to change the labels and once I did, the style for the box height and text size stopped working. Adding or removing the styling for the label still works, but something is overriding the height and font styles.</p> <p>I swear it worked at first and although I am a CSS noob, I have a feeling that adding the style to the label didn't have anything to do with the style for the input field height and font size not working. It must be something else, but I don't know where to look.</p> <p>Any advice would be appreciated.</p> <p>This is what I have in my style.css right now:</p> <pre><code>/* Gravity Forms Customizations */ /* Box Height */ body .gform_wrapper .gform_body .gform_fields .gfield select { height:35px } /* Text Height */ body .gform_wrapper .gform_body .gform_fields .gfield textarea { font-size:22px; } body .gform_wrapper .gform_body .gform_fields .gfield .gfield_label {color:red}</code></pre>