Background color for fields « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

JillChongva
Member

Some of the fields on my contact form are white and some are black - I'd like them to be all white. How do I do that?

jill :)

Posted 14 years ago on Thursday April 28, 2011 | Permalink
Carl Hancock
Administrator

If the fields are different this is a theme CSS issue. We don't set background colors on the fields, it's coming from your theme. If you post a link to a page on your site where we can view the form we can make some CSS suggestions for you to implement.

Posted 14 years ago on Thursday April 28, 2011 | Permalink
JillChongva
Member

Soot - sorry about that! Page is http://50.22.108.32/~tifflpit/contact/

j :)

Posted 14 years ago on Thursday April 28, 2011 | Permalink

Without seeing your form, I can't say what the actual problem is..probably the HTML5 input types, but you can use some custom CSS rules added to the end of your theme stylesheet to reset the input styles for your forms.

[css]
body .gform_wrapper .gform_body .gform_fields .gfield input[type=text],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=email],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=url],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=password],
body .gform_wrapper .gform_body .gform_fields .gfield input[type=tel],
body .gform_wrapper .gform_body .gform_fields .gfield select,
body .gform_wrapper .gform_body .gform_fields .gfield textarea {
	background-color:#fff;
	color:#000
}

There are more examples here in the documentation as well

http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples

Posted 14 years ago on Thursday April 28, 2011 | Permalink

Kevin Flahaut
Administrator

Yep, you're using the HTML5 input types (email, phone, etc) that aren't defined in your theme stylesheets. You can add those input types to your style rules like this..

orange.css line 41 - change to

[css]
input[type="text"],
input[type=email],
input[type=url],
input[type=password],
input[type=tel]{
    background: url("orange/input.jpg") repeat-x scroll center bottom #FFFFFF;
    border: 1px solid #D2D2D2;
    color: #2B2B2B;
}

style.css line 97 - change to

[css]
input[type="text"],
input[type=email],
input[type=url],
input[type=password],
input[type=tel] {
    font: 1.3em/1em Arial,Helvetica,Tahoma,sans-serif;
    padding: 7px 10px;
    width: 570px;
}

Posted 14 years ago on Thursday April 28, 2011 | Permalink

JillChongva
Member

Thanks for the help, but the fields are all still black. I told the client NOT to choose that theme, but it is what it is.

Anything else I can look at?

j :)

Posted 14 years ago on Sunday May 1, 2011 | Permalink
Kevin Flahaut
Administrator
easiest thing to do is to remove the CSS rule on line 53 of your orange.css file. If you can't do that, then you'll need to be more specific with your new rule to override it. Something like this example:
```
[css]
body #page.art input[type="text"],
body #page.art input[type=email],
body #page.art input[type=url],
body #page.art input[type=password],
body #page.art input[type=tel],
body #page.art textarea,
body #page.art select
 {
    background-color:#fff
}
```
Posted 14 years ago on Sunday May 1, 2011 | Permalink
JillChongva
Member

You rock! That last one worked!

Thanks a million!

j :)

Posted 14 years ago on Monday May 2, 2011 | Permalink

This topic has been resolved and has been closed to new replies.