PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

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

  1. 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 7 years ago on Thursday September 15, 2011 | Permalink
  2. 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 7 years ago on Thursday September 15, 2011 | Permalink
  3. 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 7 years ago on Thursday September 15, 2011 | Permalink
  4. 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 7 years ago on Thursday September 15, 2011 | Permalink
  5. @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 7 years ago on Thursday September 15, 2011 | Permalink
  6. 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 7 years ago on Thursday September 15, 2011 | Permalink