Nothing I do affects the css of my form

Gravity Support Forums » Plugin Support » Gravity Forms

agrestal
Member

I'm trying to get my gravity form fields to look like the subscribe/connect form fields from the woo plugin in my statua theme. My site is http://discover.puntaplayavistas.com The form is in the footer.

Right now I've got both the woo plugin and the gravity form active and labeled "Stay Informed"

The top "Stay Informed" form is the gravity form widget.
The bottom is the Woo Subscribe/Connect widget.

I'm using the Ready Classes in the form. gf_left_half and gf_right_half

I'm trying to make the Gravity Form organized like this:

[NAME][EMAIL]
[PHONE][SUBMIT]

Nothing I do in custom.css seems to affect the following:
1. Getting rid of the asterisk for the "required field" (even though the field is still req'd
2. Putting the 3px 3px 3px 3px on the submit button to make its corners rounded.
3. Moving the submit button to the second row, second column.

For example, attempting to address the asterisk, I added this to the custom.css of the theme. I tried it in style.css. I even edited form.css (then put it back)

body .gform_wrapper li#field_1_7 label.gfield_label span.gfield_required {position: relative;left: 8950px;}

Nothing.

Using firebug shows my changes are NOT applied to the form. It's like none of the css files work.

I'm under deadline for a marketing launch. Help please!

Posted 12 years ago on Wednesday September 28, 2011 | Permalink
Kevin Flahaut
Administrator
Where are you adding this CSS? I see custom rules being applied from the theme's style.css file. WooThemes includes some custom Gravity Forms styles in their themes so I'm sure that's where those are coming from. Your styles aren't being applied because they're not being loaded with the page.

I believe you should be adding your custom CSS rules to the custom.css file in your theme, but I don't see them there.

http://discover.puntaplayavistas.com/wp-content/themes/statua/custom.css

Also, your better bet would be to simply hide the required asterisk because even when you apply the "position: relative" property, it still takes up vertical space in the browser. This would be better.
```
[css]
body .gform_wrapper li#field_1_7 label.gfield_label span.gfield_required {
	display: none
}
```
The button not in the same container/list as the other fields so you can't apply a ready class to it to make it go where you want. You can either resize and position the "gform_footer" div that contains it, or absolutely position the button where you need to go.

http://www.gravityhelp.com/resources/cssguide/css_guide.html

Step one would be putting the CSS rules in a stylesheet that gets loaded properly in the page.
Posted 12 years ago on Wednesday September 28, 2011 | Permalink
agrestal
Member

Hi Kevin,
Thanks for chiming in! I really appreciate the help. I've tried the changes every place I can think of, but set things back to blank/unchanged before this post. So, yeah, my first stop was custom.css

Nada.

Your suggested change for the asterisk is now in custom.css, but still no luck.

PS In desperation, I tried my css changes in the following locations before reverting back (and reverting back between changes).
custom.css
style.css
forms.css
green.css

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

I checked your custom.css file again.. linked from your page source and I don't see any Gravity Forms styles in there.

screenshot: http://bit.ly/pOcKvm

I would contact the Woo Themes support team and raise the issue of your CSS not being applied properly in the theme. They should be able to help you debug and resolve that issue. Once you're successfully outputting the CSS, then we can work with that to get your form formatted the way you want.

Posted 12 years ago on Thursday September 29, 2011 | Permalink
agrestal
Member

Seems to have something to do with the way the Statua theme processes different elements of the css files.

For example, I add a change to custom.css then see in firebug that style.css is overriding the custom.css -- which shouldn't happen. I put the same change into the "add some custom css quickly" theme option box and *poof* it works.

I finally just shut off gravity form css output and used the theme to get something workable.

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

Okay. Thanks for the update.

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

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