CSS Overriding Layout « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

howardhyoung
Member

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.

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?

/* #Forms
================================================== */

	form {
		margin-bottom: 20px; }
	fieldset {
		margin-bottom: 20px; }
	input[type="text"],
	input[type="password"],
	input[type="email"],
	textarea,
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", 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="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]: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="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }

Posted 11 years ago on Saturday January 5, 2013 | Permalink

Daniel Schutzsmith
Member
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:
```
.gfield input[type="text"] {
    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;
}
```
Posted 11 years ago on Saturday January 5, 2013 | Permalink
Chris Hajer
Key Master
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:
```
[css]
body .gform_wrapper form .gform_body
.gfield input[type="text"] {
```
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: http://css-tricks.com/specifics-on-css-specificity/
Posted 11 years ago on Sunday January 6, 2013 | Permalink