khartje
Member
Hello,
I just purchased Gravity Forms and I'm wondering how I can change the default CSS. I notice that there's a CSS Class Name option in the Advanced area, but what am I supposed to put there?
For instance, the email field is currently using the h3 element and I'd like for it to use the h5. What do I enter to change that?
Thanks!
Kaleb
You cannot change the output of the plugin like that. The h3 is output by the Gravity Forms plugin. You would style the h3 element in your theme's stylesheet to look like the existing h5 element style you like. To target just the h3 elements in the Gravity Form, not all h5 elements on your site, the rules you add to your theme's style.css would look like this:
[css]
.gform_wrapper h3 {
color: red;
font-weight: 700;
font-size: 15px;
}However, please post a link to your site with the Gravity Form in use and we'll help you with the exact CSS.
khartje
Member
That's awesome. What are the other .gform_wrappers called? Do you have a list of them somewhere (i.e. for Name, Email, etc.)? The URL you can check out is http://schoolboost.org/donate.
Thanks again!
Kaleb
Take a look here:
http://www.gravityhelp.com/gravity-forms-css-visual-guide/
The other thing you can do it look at the source of the page when the form is rendered. You can see the specific or general elements you want to target in the source.
khartje
Member
Thank you. That's exactly what I was looking for. That's a very useful reference!
I didn't see the element for dropdown choices. I'd like to make those darker. Can you give me the element for those? Will this be the same element for radio or checkbox choices, as well?
Thanks!
Kaleb
Styling of drop downs is sometimes difficult. It's a browser function and differs between browsers and platforms. There are some things you can change. Please see here for a discussion: http://bavotasan.com/2011/style-select-box-using-only-css/
For other elements I would look in the source of the rendered page and find the actual markup for the element you want to style. I was going to post an example of how to style checkboxes or radio buttons in your form, but those elements are not present :-)
Start poking around and experimenting. Be sure to add your styles to the theme's style.css and not modify any of the plugin files. Post an example of what you are having difficulty styling and we will help you out.