CSS showing in "inspect element" but not in .css file

Gravity Support Forums » Plugin Support » Gravity Forms

houseofgrays
Member

I'm super new to this plugin, so I'm sorry if this was posted elsewhere, I searched and couldn't find it.

http://www.houseofgraysdev.com/contact/

I'm trying to modify the CSS styles applied to my form. I have output CSS turned ON in the form settings. Using Chrome inspect element, I find the code I need to modify, but those code snippets do not exist in my CSS file.

What I'm trying to change:
-The padding on the input fields. Text is pushed to the top now.
-The size of the error validation text
-The font weight of the labels
-Notification messages (less of a priority)

I can see what classes are applied to them using Inspect Element, but cannot actually find those classes in my style sheet or editor to modify.

Thanks in advance, and I hope this wasn't too much gibberish.

Posted 12 years ago on Thursday September 15, 2011 | Permalink
Carl Hancock
Administrator

When customizing the look and feel of forms using CSS you should never edit the Gravity Forms CSS file itself. What you need to do is inspect the elements and see what styles you need to apply and then add your custom styles to your themes stylesheet.

So what you need to do is apply custom styles and override existing styles with your own custom CSS you add to your themes stylesheet file.

Here is documentation that discusses how to properly target form field elements:

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

That will discuss how to target various elements such as the labels, errors, etc.

Posted 12 years ago on Thursday September 15, 2011 | Permalink
Kevin Flahaut
Administrator

Firebug shows that the padding you're talking about is coming from your theme stylesheet.. style.css line 1710

screenshot: http://bit.ly/pb47OM

Posted 12 years ago on Thursday September 15, 2011 | Permalink
houseofgrays
Member

ok, thanks, it's a bit daunting but i will give it a try.

so you're saying that the css i'm seeing with "inspect element" is in the gravity forms css file, which i should not edit, and which is why i can't find it in my theme's css file, right? can you clarify how the gravity forms css file is modifying my form if i haven't uploaded it? sorry, my particular theme came with some gforms selectors, so I'd love some clarification.

sorry, once again, for gibberish.

Posted 12 years ago on Thursday September 15, 2011 | Permalink
Carl Hancock
Administrator

@houseofgrays It's possible. When inspecting elements in Chrome it should tell you what file (and line number) the CSS is in. For example see this screenshot: http://i.imgur.com/CF3dV.png

That example shows that the CSS in the inspector starts on line 231 of the main.css file. The Gravity Forms CSS file is forms.css and is in the plugins/gravityforms/css folder. HOWEVER as we mentioned you shouldn't edit this file. All customizations should be added to your themes stylesheet to target and override Gravity Forms styles.

If you edit the Gravity Forms CSS file directly your edits will be overwritten when Gravity Forms applies software updates. And we always advise users keep Gravity Forms up to date when we release updates.

Posted 12 years ago on Thursday September 15, 2011 | Permalink
Kevin Flahaut
Administrator

No, I said the styles you mentioned were in the THEME'S style.css file, not the Gravity Forms CSS file. Look in your theme's style.css file starting on line 1710 and you'll find the padding declaration on around line 1718.

http://www.houseofgraysdev.com/wp-content/themes/scribble/style.css

Looking at your page markup, it appears that the default form stylesheet is in fact being referenced. That's why you're seeing the styles applied from it.

screenshot: http://bit.ly/pOUZUy

You may want to verify that you have the "output CSS" option actually turned off.

Posted 12 years ago on Thursday September 15, 2011 | Permalink