Forms aren't using default GF css « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

deeblo
Member

So I'm making multiple forms for my client's site:
http://www.lincolninsure.com/quotes/residential-quote/auto/

Unfortunately the styling is completely gone when I create each form.. and the only way I've gotten any styling on the form is if I manually add it to the style.css file.

I copied everything from the GF form.css file into the bottom of the style.css, but the form still doesn't use the styling as it should.

The only way around it is manually adding specific styles.. such as:
( body #gform_wrapper_1 .gform_body .gform_fields .gfield select {border: 2px solid black} )
I can do that for one form, but I've got at minimum 7 forms to work with.. and would rather style them all the same... Do I seriously have to go through all the lines in the forms.css sheet, modify them to my desires for each individual form by adding _1, _2, _3, and so on in respect to each form I make? Or is there a way to modify just one, and have them all reference the same style sheet?

I'm using the Avanix theme, so I suspect it 'might' have something to do with their built in contact form, but I'm a novice when it comes to wordpress customizations like this. Halp!

Here is the theme's page for further information on the theme:
http://demo.imediapixel.com/index.php?theme=avanix

Here is my site:
http://www.lincolninsure.com
And the main forms I'm working on now:
http://www.lincolninsure.com/quotes/residential-quote/auto/
http://www.lincolninsure.com/quotes/residential-quote/home/
http://www.lincolninsure.com/quotes/commercial-quote/workers-compensation/

Thanks a ton!

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

Do you have the Output CSS setting to on in the Gravity Forms settings page? If not, can you activate that and let me know when you have? Sounds like you might have a conflict of some kind.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Yeah, I turned it off last night while trying to get it to work..

I just turned it back on, the style.css sheet only has my customized code.

Let me know if you want me to change anything else, and thank you so much for the help!

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

OK - now our styles are being output. Comment out or cut and paste everything you added to your styles.css and let me know when that's gone.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Customized styles removed, default GF styles added to the style.css sheet, all styling appears to be gone.

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member
Right on, so in your theme - it's reseting some form elements. Check out this screenshot.

Don't copy our styles into the theme's stylesheet - you don't need to do that, it's redundant. Remove those, they are already getting called in via forms.css. We don't set any "coloring" in our stylesheet, it's all inherited from the theme - but your reset rule is making the inputs appear to have no styling and such.

So after you remove the GF styles from style.css, try dropping this into your theme's stylesheet to target your inputs globally to add a background and a border:
```
[css]
body .gform_wrapper input[type="text"], body .gform_wrapper input[type="url"], body .gform_wrapper input[type="email"], body .gform_wrapper input[type="tel"], body .gform_wrapper input[type="number"], body .gform_wrapper input[type="password"] {
background-color: #fff;
border: 1px solid #ccc;
}
```
This screenshot will be your result.
Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

I copied/pasted your block of code, forced refresh on the form page, and all the styling is still gone.

Looked at the code with Firebug, and this is what I'm showing:
http://imgur.com/JIj7d

When I look at Firebug, it's showing the background as transparent. If I disable it, the form boxes go white (I like that actually)

Ideally, I'd like the background of the form boxes to be white, with a 1px black border, something that looks similar to this:
http://imgur.com/ACAJa

But, I want it as a default for all forms..

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

You have invalid CSS. Look at this Screenshot

You need to get rid of all those dashes and the numbers... if you hover my code sample you'll see a way to pop the code so it doesn't show the numbers. The code sample formatting is for display purposes only - the numbers are used to mimic line numbers.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Ah, got it. Wasn't thinking about it. I meant to use the dashes as a spacer to keep my point of reference, and forgot to comment them out.

Looks much better now, and now I can just look for specific parts of the style sheet to edit. Thanks a bunch!

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

Right on, no problem. Just remember, don't edit forms.css - changes you make there will get overwritten by plugin updates. So do all of your customizations in style.css of your theme. Give a shout if you get stuck anywhere.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Hey Rob, one more quick one.

On my Auto quote page, I took out the Country (since the company only does insurance in the states) but when I style the Address fields, the Zip Code box only has 3 sides with a border, the right side is missing one.

See this example:
http://imgur.com/ofcir

Any way to fix that by chance?

Thanks again!

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

It looks like your theme is adding in paragraph and break tags into our code, which means it's most likely using the [raw] shortcode function. Try wrapping your gravity form shortcode on your page like this:

[raw][your gf shortcode goes here][/raw]

Let's see if that changes things for you.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Slightly confused, but is this how it should look like?

http://imgur.com/0MtQH

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

Ha - sorry, no. I'm talking about the form shortcode, not the CSS. The shortcode would be on your page in the admin, where you place the form.

Posted 11 years ago on Friday December 28, 2012 | Permalink
deeblo
Member

Ah, derp. Sorry, long night.. and early morning. I got it now, looks perfect, you are a bauce.

Posted 11 years ago on Friday December 28, 2012 | Permalink
Rob Harrell
Member

Sweet action, glad to help!

Posted 11 years ago on Friday December 28, 2012 | Permalink
David Peralty

Just as a side note, you might want to contact the theme developer and ask them to look into changing how they do things so you don't need to use those RAW tags, as they can create many issues that will be difficult to troubleshoot because they are changing how WordPress does things by default.

Posted 11 years ago on Friday December 28, 2012 | Permalink

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