CSS and Gravity Forms « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

tutarata
Member

Hi Rob and team - I've checked the previous posts on CSS discussion and I understood that the best way to go is to keep "Output CSS" as "Yes" and only do the small changes we need.

Problem here is that 1) I know nothing of CSS and 2) I did some small tweaks on my CSS to be able to make one of my other forms look better on my site.

However, because of these tweaks, the Gravity Forms CSS seems to be affected.

On this link http://bit.ly/zbxi3h (I shortened so my URL does not get indexed by search engines) you will see that my survey got messed.

In particular, I'd like:

1) Larger font size for Title
2) Field label supporting more characters, since currently it is breaking down into multiple lines and getting squeezed at the left side
3) Align radio button choices to the left (currently they are aligned to the right)
4) Larger font size for Description
5) Change "submit" from the final Submit button for a different text

Would you please give some directions? Although I found the CSS guide, I was not able to figure out which files I should be editing and how... :-( #cssdummyhere

Posted 13 years ago on Friday January 27, 2012 | Permalink
Rob Harrell
Member
Always place styles into your theme's stylesheet, try these out below:
```
[css]
h3.gform_title {
font-size: 2em !important;
}
.gform_wrapper .gfield_label {
width: auto !important;
float: none !important;
text-align: left !important;
}
.gfield_description {
font-size: 1em !important;
}
```
Didn't completely understand your last question, are you looking for styling help on the submit button or how to change what the button says?
Posted 13 years ago on Friday January 27, 2012 | Permalink
tutarata
Member

Thanks a lot - I figured out the changing of what the button says by going to the "advanced" tab.

however, now I'd like to change the color of the Submit button, so the text is black instead of white - any idea?

in the meantime, I'm going to add the code you provided to the style.css

Tks!!!

Posted 13 years ago on Friday January 27, 2012 | Permalink
Rob Harrell
Member
Try this for the submit button:
```
[css]
.gform_wrapper .gform_footer .gform_button {
background: #666 !important;
border: 1px solid black !important;
}
```
One thing to note about these styles as well, these would be for global form styling. If you ever wanted to specify a rule for a specific form, each form has it's own unique ID wrapped around it, so you can just add that to the selectors to affect only those forms.
Posted 13 years ago on Friday January 27, 2012 | Permalink
tutarata
Member

You guys are really awesome. Thanks!

I used the code, but the choices for the radio buttons are still aligned to the right - any idea of what may be wrong?

Posted 13 years ago on Friday January 27, 2012 | Permalink

Whoops, try this one for that:

[css]
.gform_wrapper .gfield_checkbox li label, .gform_wrapper .gfield_radio li label {
text-align: left  !important;
float: none !important;
}

Posted 13 years ago on Friday January 27, 2012 | Permalink

tutarata
Member

I only wish all companies in the world could have this level of support.

Thanks a lot, Rob!

Posted 13 years ago on Friday January 27, 2012 | Permalink
Rob Harrell
Member

Awesome! Form is looking great man. Glad to help.

Posted 13 years ago on Friday January 27, 2012 | Permalink

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