SoundsGood
Member
Hi,
Where might I find step-by-step instructions on how to change the font type and font size of text within a Gravity Form?
Also, any chance of seeing this as an option within the panel in a future release? (without having to mess with any code, that is)
Thanks.
You would need to add custom CSS to your themes stylesheet to target and style whatever form elements you want to style.
By default, Gravity Forms uses the default font styles of your theme as we are a firm believer that the form should mimic the theme and not look out of place. However, some themes don't adequately apply global styles so customizations may be necessary.
Here is documentation that discusses how to target and style form elements:
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples
You would add the custom CSS to your themes stylesheet.
Style options will not be added to the core plugin, however we would like to create a visual style editor as an Add-On down the road.
SoundsGood
Member
>> However, some themes don't adequately apply global styles...
That must be case. I'm using the StudioPress Genesis / Prose theme and I've changed all fonts to Arial. Everything on the form looks fine *except* the text in the dropdown -- which looks funky!
I'll take a look at the link. Thanks.
Sure, you would target a select input with this CSS:
body .gform_wrapper .gform_body .gform_fields .gfield select {font-face: arial;}
This was located here:
http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples#Drop-Down_.28Select.29_Field
Please note not all browsers style Select fields the same, they are one of the form elements where you don't really have full control over what styles you can apply to them because each browser handles them differently.
What if only one form, out of 5, is different from the rest?
This one is different from the rest: http://rsainsuranceagency.com/request-a-quote/auto-insurance/ and it wasn't made differently. Only difference was that I made it while on my netbook, and that shouldn't affect it, should it?
What can I do to fix/remedy this?
Thanks!
Nope, It has nothing to do with you having created the form on a netbook or any other specific device. Something on that form page is adding a < code > tag around content in your form. You'll see that the code element has a different font style and font size being applied to it and your form labels and descriptions are inheriting from that.
screenshot: http://i.imgur.com/AFqzg.png
There's either a theme/plugin script thats adding the extra markup to your form and causing the weird style inheritance.
Try testing for conflicts and see if you can identify where the extra code is originating.
http://www.gravityhelp.com/documentation/page/Testing_for_a_Theme/Plugin_Conflict
Yes, if you want to find out what's causing the problem, you'll have to spend the time debugging it. There's something different about that page or page template. It's not related to the form itself. There is either some different script being loaded there or some plugin that's injecting the extra markup.
You can try changing the page to use another page template temporarily and see if the issue persists.
I'm going to guess the post editor has the extra markup for strong and code around the shortcode (assuming the form was inserted into the page using the shortcode.)
I would switch the post editor to HTML view for this one page so you can see the markup around the Gravity Forms shortcode. Maybe the strong and code buttons got bumped when using the netbook.
Wonderful. Sometimes the simple ideas are magical. Glad you got it working properly.
DItto Kevin. I didn't want to go through all that or recreate the form. It took too long in the first place. Although my brother cranked out the rest in no time flat. :P
I think it might have occurred after I upgraded to WP 3.2. So I blame the upgrade. :P
Thanks for replying so quickly though! :D
Sure. My pleasure Kathy.
