https://legacy.forums.gravityhelp.com/topic/css-overriding-layout Gravity Support Forums Topic: CSS Overriding Layout en-US Mon, 20 Apr 2026 00:58:06 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-overriding-layout#post-115021 Sun, 06 Jan 2013 03:18:47 +0000 Chris Hajer 115021@https://legacy.forums.gravityhelp.com/ <p>You can use the !important rule any time you find yourself unable to use a more specific selector to override a theme or plugin style. Normally, you can do something like this to have a more specific rule in your stylesheet:</p> <pre><code>[css] body .gform_wrapper form .gform_body .gfield input[type=&quot;text&quot;] {</code></pre> <p>The more specific your rule, the better chance you have of your rule being applied above all others. You can read more about CSS specificity here: <a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">http://css-tricks.com/specifics-on-css-specificity/</a> </p> https://legacy.forums.gravityhelp.com/topic/css-overriding-layout#post-114864 Sat, 05 Jan 2013 17:54:17 +0000 Daniel Schutzsmith 114864@https://legacy.forums.gravityhelp.com/ <p>I'm not sure of the official way to do this, but I ended up overriding all of the GF styles by making sure I placed an !important in my declarations. So for example, this works quite nice:<br /> <pre><code>.gfield input[type=&quot;text&quot;] { border: 1px solid #CCCCCC !important; border-radius: 2px 2px 2px 2px !important; color: #888888 !important; font-family: inherit !important; font-size: 16px !important; padding: 6px !important; }</code></pre> https://legacy.forums.gravityhelp.com/topic/css-overriding-layout#post-114854 Sat, 05 Jan 2013 17:34:11 +0000 howardhyoung 114854@https://legacy.forums.gravityhelp.com/ <p>I've read through the forums and I think I have the same problem that a lot of others have experienced where the theme's CSS is overriding the layout. The preview looks perfect but when it's placed on a page it doesn't look good. </p> <p>I went through the style.css but I'm not sure where the problem lies. I'm assuming it's in this section of code. Any thoughts?<br /> <pre><code>/* #Forms ================================================== */ form { margin-bottom: 20px; } fieldset { margin-bottom: 20px; } input[type=&quot;text&quot;], input[type=&quot;password&quot;], input[type=&quot;email&quot;], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 13px &quot;HelveticaNeue&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; color: #777; margin: 0; width: 110px; max-width: 100%; display: block; margin-bottom: 20px; background: #fff; } select { padding: 0; } input[type=&quot;text&quot;]:focus, input[type=&quot;password&quot;]:focus, input[type=&quot;email&quot;]:focus, textarea:focus { border: 1px solid #aaa; color: #444; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } textarea { min-height: 60px; } label, legend { display: block; } select { width: 120px; } input[type=&quot;checkbox&quot;] { display: inline; } label span, legend span { font-weight: normal; font-size: 13px; color: #444; }</code></pre>