CSS Styling on Wordpress for GF « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

lam09
Member

Hi, I have 2 wordpress sites using this plug in.
The forms work perfectly, it's the styling that is the issue.

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?

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?

Posted 12 years ago on Tuesday July 31, 2012 | Permalink
David Peralty

Can you link to your form please so we can see the CSS it is inheriting from your theme?

Posted 12 years ago on Tuesday July 31, 2012 | Permalink
lam09
Member

Sure - Form 1 - http://tinyurl.com/dyb32sn

Form 2 - http://tinyurl.com/c2y6qcm

Posted 12 years ago on Tuesday July 31, 2012 | Permalink

For your form with the submit button, see this Screenshot

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):

[css]
.gform_footer input.button {
background: none;
color: #666 !important;
border: 1px solid #666 !important;
}

For the form with the inputs, drop this into your theme's stylesheet:

[css]
.gform_wrapper input[type="text"], .gform_wrapper input[type="url"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"], .gform_wrapper input[type="number"], .gform_wrapper input[type="password"] {
border: 1px solid #666;
}

Posted 12 years ago on Tuesday July 31, 2012 | Permalink

lam09
Member

Thanks - where is that css to go?

If I edit the plug in css, will it not be deleted each time the plug in is updated?

Posted 12 years ago on Tuesday July 31, 2012 | Permalink
Rob Harrell
Member

You don't want to edit the plugin css, notice I said drop into your theme's stylesheet. :)

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.

Posted 12 years ago on Tuesday July 31, 2012 | Permalink
lam09
Member

There isnt any place for css outside of the theme and so theme updates will overwrite too

Will see if there is a CSS plug in that adds css outside of the GF and the theme

Posted 12 years ago on Tuesday July 31, 2012 | Permalink
Chris Hajer
Key Master
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.

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, this too will be lost when you update the theme, so, you should really be using a child theme if you want to make modifications):
```
[css]
<link rel="stylesheet" type="text/css" href="<?php bloginfo('get_stylesheet_directory_uri'); ?>/gravity-style.css" media="screen" />
```
Posted 12 years ago on Tuesday July 31, 2012 | Permalink
e-rik
Member

@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?

Posted 12 years ago on Wednesday September 12, 2012 | Permalink
Chris Hajer
Key Master

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 !important declaration to your rule. Please see this CSS documentation:

http://css-tricks.com/specifics-on-css-specificity/

http://coding.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/

Posted 12 years ago on Friday September 14, 2012 | Permalink