Gravity Support Forums Topic: Form items have bullets, custom button is enlarged and has gaps

Gravity Support Forums Topic: Form items have bullets, custom button is enlarged and has gaps https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps Gravity Support Forums Topic: Form items have bullets, custom button is enlarged and has gaps en-US Sat, 04 Apr 2026 16:10:57 +0000 http://bbpress.org/?v=1.0.1 <![CDATA[Search]]> q https://legacy.forums.gravityhelp.com/search.php Kevin Flahaut on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29799 Tue, 12 Jul 2011 12:55:20 +0000 Kevin Flahaut 29799@https://legacy.forums.gravityhelp.com/ The CSS snippet I provided above does work if implemented correctly. You don't need to add the ".custom" class name before the body tag. The body element isn't a child of the custom div (it's actually the parent of the div) so the styles aren't being applied as you expected. If you take the "custom" off the front of the rule, you'll see that it works fine. So, that said, I would remove the Gravity Forms specific styles you have in there now and start fresh with the ones below. They should work just fine for you. You can see my test screenshot below. <pre><code>[css] /* hide the bullets and fix the margins & padding */ body .gform_wrapper form .gform_body ul, body .gform_wrapper form .gform_body ul li { list-style-type:none!important; list-style-image:none!important; list-style:none!important; background-image:none!important; background:none!important; padding:0!important; margin:0!important } /* add some new margins to the labels to fix spacing */ body .gform_wrapper label.gfield_label { display: block; margin-top: .5em } /* remove the borders, padding & backgrounds from the button image */ body .gform_wrapper .gform_footer input[type=image] { width:auto!important; border:none!important; background:none!important; padding:none!important }</code></pre> screenshot: <a href="http://bit.ly/oMhNNB" rel="nofollow">http://bit.ly/oMhNNB</a> BrettBorders77 on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29744 Mon, 11 Jul 2011 20:12:39 +0000 BrettBorders77 29744@https://legacy.forums.gravityhelp.com/ here's my site: <a href="http://copybrighter.com/contact" rel="nofollow">http://copybrighter.com/contact</a> The code you provided above does not remove the spacing around the custom button. The box model guice you sent me was very comprehensive, but my CSS sucks. What would the code be to add about .5em of vertical space between the Name: E-mail: Phone: and Comments: form elements? Thanks for any specific examples you can provide. And thanks for the help.. I know software support is not an easy job. Kevin Flahaut on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29729 Mon, 11 Jul 2011 18:09:13 +0000 Kevin Flahaut 29729@https://legacy.forums.gravityhelp.com/ I can't tell you anything more specific without seeing your actual form page. The screenshot doesn't help me inspect any styles that are influencing the look of your form. On the button, it's probably just a background image property and padding still being applied so you just have to override that as well. <pre><code>[css] body .gform_wrapper .gform_footer input[type=image] { width:auto!important; border:none!important; background:none!important; padding:none!important }</code></pre> Here's a guide to show you how the forms are laid out.. they'll help you understand what elements you need to target to change the spacing you're interested in <a href="http://www.gravityhelp.com/resources/cssguide/css_guide.html" rel="nofollow">http://www.gravityhelp.com/resources/cssguide/css_guide.html</a> If you want to increase spacing, then you can do that by adding top and bottom margins or padding to a variety of elements.. the containing list items, the containing div element or even to the inputs themselves and as I mentioned before, you can find specific examples on the targeting page in the documentation for each element. If you use those and apply the properties correctly, you should be good to go. BrettBorders77 on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29720 Mon, 11 Jul 2011 17:50:54 +0000 BrettBorders77 29720@https://legacy.forums.gravityhelp.com/ Also.. I see a long, consfusing list of CSS styles in the CSS targeting example... but I just want to but a little bit of space around each element. What is the specific style to add space around each of the Name: e-mail: type fields? BrettBorders77 on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29719 Mon, 11 Jul 2011 17:44:06 +0000 BrettBorders77 29719@https://legacy.forums.gravityhelp.com/ Thanks a lot. this advice helps somewhat. The only outstanding, unresolved issue is the ugly grey "moat" or border space around my custom submit button. How do I remove it so it looks white, smooth and seamless? you can see the form here: <a href="http://copybrighter.com/contact" rel="nofollow">http://copybrighter.com/contact</a> Kevin Flahaut on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29712 Mon, 11 Jul 2011 17:27:55 +0000 Kevin Flahaut 29712@https://legacy.forums.gravityhelp.com/ Info on how to remove the bullets is here: <a href="http://www.gravityhelp.com/frequently-asked-questions/" rel="nofollow">http://www.gravityhelp.com/frequently-asked-questions/</a> Info and samples on how to target and manipulate all the form elements with CSS can be found here: <a href="http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples" rel="nofollow">http://www.gravityhelp.com/documentation/page/CSS_Targeting_Samples</a> The button image that you've uploaded is being ganked up by the Thesis theme styles, not Gravity Forms. They've set a blanket style for all inputs there so you'll need to override that with something like this added to the end of your theme stylesheet. <pre><code>[css] body .gform_wrapper .gform_footer input[type=image] { width:auto!important; border:none!important }</code></pre> BrettBorders77 on "Form items have bullets, custom button is enlarged and has gaps" https://legacy.forums.gravityhelp.com/topic/form-items-have-bullets-custom-button-is-enlarged-and-has-gaps#post-29705 Mon, 11 Jul 2011 17:04:57 +0000 BrettBorders77 29705@https://legacy.forums.gravityhelp.com/ Now that GF is working on my site, I need to style the form into a professional and presentable contact form. Here is a picture of the form it is generating: <a href="https://skitch.com/brettborders/fjeu8/copybrighter.com-contact" rel="nofollow">https://skitch.com/brettborders/fjeu8/copybrighter.com-contact</a> Questions: 1.) How do I remove the bullets? (I'm running Thesis 1.8.2 - latest) 2.) How do I add a little bit of padding space between form elements? (They are "smushed" together.) 3.) I have uploaded a small, exact-sized custom button I made in Photoshop and designed it in the "Advanced" options for the form. Gravity Forms enlages the button beyond actual size and puts an ugly grey border around it. How can I make it display actual size, no border? Thanks!