https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf Gravity Support Forums Topic: CSS Styling on Wordpress for GF en-US Mon, 20 Apr 2026 05:18:17 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-75221 Thu, 13 Sep 2012 21:50:34 +0000 Chris Hajer 75221@https://legacy.forums.gravityhelp.com/ <p>It has nothing to do with which stylesheet is loaded first. It has to do with specificity. If you make your rules specific enough, they will override any rules which are less specific. Add as many ancestors as you can to ensure your rule is the most specific one, and your CSS will "win". You can cheat the system if this does not work as expected, and add the <strong>!important</strong> declaration to your rule. Please see this CSS documentation:</p> <p><a href="http://css-tricks.com/specifics-on-css-specificity/" rel="nofollow">http://css-tricks.com/specifics-on-css-specificity/</a></p> <p><a href="http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/" rel="nofollow">http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/</a> </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-74939 Wed, 12 Sep 2012 04:30:13 +0000 e-rik 74939@https://legacy.forums.gravityhelp.com/ <p>@Rob Harrel If I put style info for gf elements in my child theme's style.css, will it override styles in plugins/gravityforms/css? I mean: which stylesheet is executed first? </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68767 Tue, 31 Jul 2012 10:29:11 +0000 Chris Hajer 68767@https://legacy.forums.gravityhelp.com/ <p>If you're modifying your theme files, you should probably be using a child theme. That way your changes will not be lost when you update your theme.</p> <p>You can add an additional stylesheet to you theme. Just save the CSS to a file called "gravity-style.css" in your theme folder, then add this to your theme's header.php (of course, <strong>this too</strong> will be lost when you update the theme, so, you should really be using a child theme if you want to make modifications):</p> <pre><code>[css] &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;&lt;?php bloginfo(&#39;get_stylesheet_directory_uri&#39;); ?&gt;/gravity-style.css&quot; media=&quot;screen&quot; /&gt;</code></pre> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68756 Tue, 31 Jul 2012 10:03:22 +0000 lam09 68756@https://legacy.forums.gravityhelp.com/ <p>There isnt any place for css outside of the theme and so theme updates will overwrite too</p> <p>Will see if there is a CSS plug in that adds css outside of the GF and the theme </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68755 Tue, 31 Jul 2012 09:59:03 +0000 Rob Harrell 68755@https://legacy.forums.gravityhelp.com/ <p>You don't want to edit the plugin css, notice I said drop into your theme's stylesheet. :)</p> <p>Since each theme is setup differently, if you are unsure of where to place custom css, you should reach out to your theme author/creator. </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68754 Tue, 31 Jul 2012 09:56:42 +0000 lam09 68754@https://legacy.forums.gravityhelp.com/ <p>Thanks - where is that css to go?</p> <p>If I edit the plug in css, will it not be deleted each time the plug in is updated? </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68752 Tue, 31 Jul 2012 09:49:36 +0000 Rob Harrell 68752@https://legacy.forums.gravityhelp.com/ <p>For your form with the submit button, see this <a href="http://www.evernote.com/shard/s212/sh/e8133c89-d232-49c7-ba1e-0d7eae7ebee2/8309c585538a2e4793b10af51bc43f63" rel="nofollow">Screenshot</a></p> <p>I used this to start playing around with restyling (obviously there is a decent amount of overriding to do, but this should give you a start):</p> <pre><code>[css] .gform_footer input.button { background: none; color: #666 !important; border: 1px solid #666 !important; }</code></pre> <p>For the form with the inputs, drop this into your theme's stylesheet:</p> <pre><code>[css] .gform_wrapper input[type=&quot;text&quot;], .gform_wrapper input[type=&quot;url&quot;], .gform_wrapper input[type=&quot;email&quot;], .gform_wrapper input[type=&quot;tel&quot;], .gform_wrapper input[type=&quot;number&quot;], .gform_wrapper input[type=&quot;password&quot;] { border: 1px solid #666; }</code></pre> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68729 Tue, 31 Jul 2012 08:32:07 +0000 lam09 68729@https://legacy.forums.gravityhelp.com/ <p>Sure - Form 1 - <a href="http://tinyurl.com/dyb32sn" rel="nofollow">http://tinyurl.com/dyb32sn</a></p> <p>Form 2 - <a href="http://tinyurl.com/c2y6qcm" rel="nofollow">http://tinyurl.com/c2y6qcm</a> </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68728 Tue, 31 Jul 2012 08:29:14 +0000 David Peralty 68728@https://legacy.forums.gravityhelp.com/ <p>Can you link to your form please so we can see the CSS it is inheriting from your theme? </p> https://legacy.forums.gravityhelp.com/topic/css-styling-on-wordpress-for-gf#post-68725 Tue, 31 Jul 2012 08:25:14 +0000 lam09 68725@https://legacy.forums.gravityhelp.com/ <p>Hi, I have 2 wordpress sites using this plug in.<br /> The forms work perfectly, it's the styling that is the issue.</p> <p>Site 1 - the theme seems to make the gravity form send button white with white text and I can't seem to change it despiste messing with the default css that came with the theme. Is there anyway to override this so the GF form styling is used?</p> <p>Site 2 - the theme seems to have no borders on the gravity form, so the field titles are floating in space and it's unclear where to type these in. Any advise on getting the borders to show? </p>