Newbie to CSS « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

David Plum
Member

Hello.

I am running the Thesis theme at my website and I wish to use the build in css for forms instead of the Gravity default.

This is the styles I would like to use (comment section): http://66.147.244.62/~freakstr/?p=43

This is the form (among many) I would like to change: http://66.147.244.62/~freakstr/?page_id=122

I do know how to change the style of each form in Gravity through my custom CSS file. However, is there a way to customize EVERY input field and not just one at a time (.medium, .large ect)?

Also, how come the thesis css does not take over when I disable the default CSS in the Gravity Form settings?

Thanks,

David

Posted 12 years ago on Monday July 11, 2011 | Permalink
Kevin Flahaut
Administrator

David, your forms look very similar to me. To begin with, Gravity Forms has very little default styling for inputs so the borders, background colors and button styles that you're seeing are coming from the Thesis theme already.

What is it in particular that you want to change?

Posted 12 years ago on Monday July 11, 2011 | Permalink
David Plum
Member

Hello Kevin,

I styled the submit button on the Gravity Form (through the custom css file) to replicate the submit button shown in the comment section. I have now changed things back to default.

Take a look at http://66.147.244.62/~freakstr/?p=43 again.

Notice how the input fields actually has borders. Notice how these borders also change in color when the fields are focused (they get a yellow glow). As you can see the fields are also a bit higher and the text size is larger.

At last, as you may notice now, the submit button looks different.

Posted 12 years ago on Monday July 11, 2011 | Permalink
Kevin Flahaut
Administrator

Okay, sounds like you were on the right track with the button styling. I don't see any yellow glow so it must be a browser style that you're seeing there but the same goes for the input elements. Simply add some new rules with additional padding & font size properties to emulate the look of the theme styles.

You can find examples of how to properly target and manipulate all of the form elements here.

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

and there's also a visual guide here to help you get the lay of the land when it comes to the form structure if you need.

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

Posted 12 years ago on Monday July 11, 2011 | Permalink
David Plum
Member

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

Awesome, Kevin. That was exactly what I was looking for. Thanks! :)

Posted 12 years ago on Monday July 11, 2011 | Permalink
Kevin Flahaut
Administrator

Great David, Glad I could point you in the right direction.

Posted 12 years ago on Monday July 11, 2011 | Permalink
NTMedia
Member

hello - just a quick question. I think this CSS guide will do the trick, but before I dive in, will it still work similarly if you're placing the form in manually via the html how you discuss here? http://www.gravityhelp.com/documentation/page/Embedding_A_Form

http://kaizendev.pairserver.com/ntunemedia/#contact-border

I'm also using the thesis theme fwiw

Posted 12 years ago on Wednesday July 13, 2011 | Permalink
Kevin Flahaut
Administrator

Sure, once the form is rendered the markup/structure is the same no matter which method you use to actually embed it. If you're using the php function call method to embed the form, you'll need to remember to manually enqueue the scripts as detailed in the documentation on the page below.

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

Posted 12 years ago on Wednesday July 13, 2011 | Permalink