Creating a custom forms.css file « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Ken Dove
Member

I am a css beginner and that is the root of the problem. Here's what I'm struggling with...

My form has excessive amounts of space between elements (http://calgarynewhomefinder.com/find-a-home/). I'm using Weaver 2.2.6 as my theme.

After several hours of research I've figured out that
A) forms inherit styles from the theme - thus the spacing problem
B) To make the forms look the way I want them to I need a custom forms.css file (as the instructions say not to change the existing one).

I get the basics of css and know how to use Firebug

but...

every post and online resource I can find seems to assume that I know how to create a custom forms.css file and that I know how to make my forms reference that file for formatting. (Ok, the creating part isn't hard - just copy the existing file and make changes).

Unfortunately I have no clue of...
A) Whether my customized forms.css file should be given a different file name and put in the same folder as the original forms.css or I should give it the same name and put it somewhere else and
B) How to make the forms use my custom file instead of the default forms.css (this is the big mystery at this point!)

Instructions or a link to somewhere that will explain this procedure will be appreciated.

Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Kevin Flahaut
Administrator

A. You don't really need to create a custom forms.css file. You can simply append any custom Gravity Forms CSS rules to the end of the existing theme stylesheet. In your case, it would be this file.

http://calgarynewhomefinder.com/wp-content/themes/weaver/style.css

Open the style.css file and add any new CSS rules to the very end of the document. The browser reads the stylesheet from top to bottom so any rules defined near the end of the document should supersede those placed near the beginning of the file.

B. Unless you need to make extensive changes to the form styles, I recommend leaving the defaults in place and just creating the new rules to override the defaults.. again placed at the end of your theme stylesheet. If you want to completely turn off the default styles, you can go the the forms settings page and uncheck the "output CSS" option. That will turn off the default stylesheets and you can start with everything from scratch if you want. The world is your oyster.

If you need some help overriding default styles, you can reference this guide for examples of how to properly format your CSS rules to apply changes to specific form elements.

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

Hope that helps out.

Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Ken Dove
Member
Kevin:

Thx for your help. I'm getting closer but still doing something wrong. Using Firebug I've identified the lines of css I need to change to get the look I'm after (some are in the forms.css file and a few are in the weaver/styles.css file.

I inserted this code as per the following at the end of styles.css file (the code is from line 1202 of forms.css) unfortunately nothing changed. Where am I going wrong?
```
#main {
		display: inline;
		background: none !important;
	}
	.home .sticky {
		border: none;
	}
//inserted code starts here
body .gform_wrapper .chzn-container-single .chzn-single {
	height: 20px;
	line-height: 20px;
}
//ends here

}
```
Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Rob Harrell
Member
Hey Ken, try this out instead (using !important to override these two properties from forms.css):
```
[css]
body .gform_wrapper .chzn-container-single .chzn-single {
height: 20px !important;
line-height: 20px !important;
}
```
Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Ken Dove
Member

Thx, Rob. Just figured out Weaver 2.2.6 provides <HEAD> and Advanced CSS insertion fields for exactly this purpose. Made the changes easy, although I will likely try your suggestion as well for educational purposes.

...Now if I can just figure out how to but a box around the form.

Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Rob Harrell
Member
This would place a border around the form with the ID of 1 (which is what is on your current link provided)
```
[css]
#gform_wrapper_1 {
border: 1px solid black;
}
```
You can obviously add other properties and such here as needed.
Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Ken Dove
Member

Thx, Rob. I have to say I'm very impressed with Gravity Forms support.

Posted 13 years ago on Wednesday January 25, 2012 | Permalink
Rob Harrell
Member

Awesome Ken, we're always glad to help out. Let us know if you need anything else!

Posted 13 years ago on Thursday January 26, 2012 | Permalink