Hello!
This is my first post here.
First of all, I would like to say that I absolutely LOVE Gravity Forms. Truly amazing and innovative! So thank you!
Now on to my question...
What are the Custom CSS best practices for use with Gravity Forms? What is the best way to approach it so that I will be "safe" from issues when upgrades become available?
Thanks!
Respectfully,
Chris M.
Chris,
Welcome and thanks for the kind words.
We recommend that you append any custom styles to the end of your theme's stylesheet and never change the default forms.css file that's in the plugin folder.
If you need to make extensive changes, I recommend copying the entire contents of the forms.css file from the plugin folder and either making a new stylesheet in your theme folder or appending all of that to your theme's style.css file. Then go to the form settings page and set the "output css" option to no. That way you're free to modify everything safely from within the theme folder and none of your changes will be overwritten when the plugin updates.
Thanks Kevin! I really appreciate the time you have taken to answer me (I know it must be overwhelming at times).
Ok, so I am using Thesis 1.8, and they use a custom.css file structure (which I love, and I understand that this is what you are suggesting as well). Can I just enter in the selectors that I want to target in Gravity Forms in the Thesis custom.css file (assuming that all of the Gravity Form selectors are uniquely named)? I don't want to make drastic changes, mainly things like form font size, border, background shading, etc. Maybe about 6 major areas of the display of the forms.
Thanks again Kevin!
Yes, you would add your custom CSS to override the Gravity Forms default styles to your custom.css file.
If you have any problems with a style not being applied because of the order in which the stylesheets are included in the HTML you can use the CSS !important declaration to force it to apply.
Ex.
.gform_body {background: #000000!important;}
Thanks Carl, I will try it out!
Just to repeat, all I have do is isolate/target the exact selector that I want to influence within the form and place that ONE declaration block in the "custom.css" file for Thesis?
Thanks again guys!
Yep, you are correct. Just use CSS inheritance to add just the styles necessary to do what you want to your custom.css file.
One last thing (Kevin and Carl):
As per the advice of the Thesis guys, they say the following:
BASIC USAGE:
If you have enabled the custom stylesheet in the Thesis options panel, the <body> tag
will be appended with the "custom" class, like so: <body class="custom">. You can use
the "custom" class to override *any* CSS declarations contained in the style.css file.For example, if you wish to change the default link color to green, you would add the
following declarations to this file:.custom a, .custom a:visited { color: #090; } <--- This makes links green
.custom a:hover { color: #00f; } <--- This makes links blue when you mouse over themWHY THIS WORKS:
By using the "custom" class, you are creating more specific CSS declarations for HTML
elements. CSS styling is applied through rules of specificity, and because declarations
prepended with .custom are more specific, they get applied when the page is rendered!
So, my question is this:
Should I also take this approach with the Gravity Forms custom CSS in this same file here (with the Thesis customizations)?
Like this, for example:
.custom .gform_body {background: #000000;}
Totally up to you. The more specific you are with your CSS rules, the fewer inheritance problems you'll have. Sounds like a solid plan.
You can target specific form IDs (each form has it's own) or hook onto some selector on the page. You can also set custom classes within the form builder. Since I don't have a link to your site, that's about all I can provide to you at the moment.
