Form Styles « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

Ori
Member

Hey everyone,

I'm having some issues with styling my forms - I've searched around but I can't seem to access my form's CSS properties.

I would like to remove the arrows, decrease the spacing between each field, and add padding on the left (to make sure the submit button is lined up with the rest of the fields)

http://ocfreshcarpetcare.com/

Thank you!

Posted 13 years ago on Friday February 3, 2012 | Permalink
Rob Harrell
Member
Hey Ori - we have a pretty extensive documentation page relating to styling here:

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

However, drop this into your theme's stylesheet and it should get you to where you want to be:
```
[css]
.gform_wrapper li, .gform_wrapper form li {
background: none;
margin: 0;
}
.gform_footer.top_label {
padding-left: 15px;
}
```
Keep in mind that the style blocks I gave you above would be global to GF. You can always be more specific with your selector to just affect the form on this home page area if you choose.
Posted 13 years ago on Friday February 3, 2012 | Permalink
Ori
Member

Hi Rob, thanks for the quick reply!

I tried adding that code but the form doesn't seem to be affected. I don't know if it has anything to do with the fact that I'm using this code instead of the standard shortcode:

<?php gravity_form(1, false, false, false, '', false); ?>

Thanks,
Ori

Posted 13 years ago on Friday February 3, 2012 | Permalink
Rob Harrell
Member

Ori, I"m not seeing that style block in your theme's style.css - what CSS file did you place it in? I used those styles via Chrome Developer Tools just fine.

Posted 13 years ago on Friday February 3, 2012 | Permalink
Ori
Member

I put the style block at the very bottom of my style.css.

Posted 13 years ago on Friday February 3, 2012 | Permalink
Rob Harrell
Member

Yeah its def not there. If you view your source and open up the style.css that's referenced, those styles are not at the bottom. Are you using any kind of caching plugin perhaps?

Posted 13 years ago on Friday February 3, 2012 | Permalink
Ori
Member

Okay so I checked my site today and the styles I added took affect (I guess it just took a little bit to refresh), however, the submit button is still not lined up with the rest of the form.

Thanks!

Posted 13 years ago on Monday February 6, 2012 | Permalink
Rob Harrell
Member
Go ahead and add an !important after that padding style:
```
[css]
.gform_footer.top_label {
padding-left: 15px !important;
}
```
Posted 13 years ago on Monday February 6, 2012 | Permalink
Ori
Member

I added the !important; to the code but I am seeing no results. Maybe I'm getting a delayed update again?

Posted 13 years ago on Monday February 6, 2012 | Permalink
Rob Harrell
Member
Ori - no delayed result you just have a minor typo:
```
[css]
.gform_footer.top_label {
padding-left: 10px; !important;
}
```
It should be (need to get rid of that semi-colon after the px):
```
[css]
.gform_footer.top_label {
padding-left: 10px !important;
}
```
Posted 13 years ago on Tuesday February 7, 2012 | Permalink
Ori
Member

I took off the ";" and it seems to have moved the submit button a little over to the right, however, it is still not aligned with the rest of the form

Posted 13 years ago on Monday February 13, 2012 | Permalink
Rob Harrell
Member

It's showing fine here, you may want to change it to 15px instead of 10 to get it more inline with the other fields.

Posted 13 years ago on Monday February 13, 2012 | Permalink