PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

How to Remove Bullets & Fix Submit Button From CSS Style Sheet

  1. Hello,
    I have read other posts on how to remove the bullets from my CSS style sheet but I am a bit confused on what code to add and where it should be placed.

    Here is the code I see in my CSS style sheet:

    [css]
    /***** Contact Form ********************/
    
    .gform_wrapper input, .gform_wrapper textarea, .gform_wrapper select {
    	background: #ffffff !important;
    	color: #003300!important;
    	font-family: Georgia, Arial, Tahoma, Verdana !important;
    	font-size: 12px !important;
    	padding: 4px 0 4px 5px !important;
    	border: 1px solid # dark green;
    	}
    
    .gform_footer input.button {
    	color: #FFFFFF !important;
    	}
    
    .gform_wrapper .ginput_complex label {
    	font-size: 12px !important;
    	}
    
    .gform_wrapper li, .gform_wrapper form li {
    	margin: 0 0 10px 0 !important;
    	}
    
    .gform_wrapper .gform_footer {
    	border: none !important;
    	}

    I would like to know how I can fix the font and background colour of my Submit button as it doesn't blend well with my contact form.

    http://www.erinsecolist.com/contact/

    Thank you,
    Erin

    Posted 12 years ago on Saturday December 17, 2011 | Permalink
  2. Erin, add this to your theme's stylesheet and it should remove the bullets:

    [css]
    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
    }

    For your submit button place this in:

    [css]
    .gform_footer input[type="submit"] {
    background: #333 !important;
    cursor: pointer;
    }

    You can then change and add whatever style attributes as you see fit there.

    Posted 12 years ago on Saturday December 17, 2011 | Permalink
  3. Thank you Rob. I will add that code.

    Posted 12 years ago on Tuesday December 20, 2011 | Permalink
  4. Erin, please let us know if you need more help. If this works for you, we will close this topic. Thank you.

    Posted 12 years ago on Tuesday December 20, 2011 | Permalink
  5. Bullets still aren't removed with that in stylesheet - http://www.boroiphotography.com/photography-consultation/

    Posted 12 years ago on Wednesday April 25, 2012 | Permalink
  6. David, where (what file) are you putting your styles? I don't see them.

    If the styles are implemented correctly, they usually work just fine.. it looks like they should on your site as well. Just check out my test screenshot: http://bit.ly/JEq9Mu

    Posted 12 years ago on Wednesday April 25, 2012 | Permalink
  7. Hi Kevin, thanks for responding. Strange your version doesn't show it. I am seeing it in chrome and FF. http://bit.ly/I4fkjG

    Posted 12 years ago on Wednesday April 25, 2012 | Permalink
  8. Sorry, I wasn't clear. No, I do see the problem. I don't see where you've put the styles to remedy the problem. The screenshot was of a test where I applied the styles to your page.

    So, which file are you putting the new CSS rules into?

    Posted 12 years ago on Wednesday April 25, 2012 | Permalink
  9. stylesheet.css
    http://pastebin.com/GUycnvJz

    Posted 12 years ago on Thursday April 26, 2012 | Permalink
  10. Well then sir, that would be your problem. I checked your source and stylesheet.css isn't referenced in the markup. It's not being loaded.

    screenshot: http://bit.ly/JHcep0

    You'll need to put the snippet into a file that IS being loaded into the page so it works properly. If you're not sure exactly what file to put your custom CSS rules into, I suggest you contact your theme developer for some guidance.

    Posted 12 years ago on Thursday April 26, 2012 | Permalink
  11. Sorry - I meant style.css ..... if that makes a difference.

    Posted 12 years ago on Thursday April 26, 2012 | Permalink
  12. Yeah, I thought as much and checked for that too.. don't see a style.css being loaded. There IS a style.min.css called in the markup, but when I looked in it, there aren't any GF specific rules in there.. this sounds like the part where you should contact your theme dev and get the to help you place your CSS in the right place.

    Once it's there and actually gets loaded/rendered in the page it should work just fine.

    Posted 12 years ago on Thursday April 26, 2012 | Permalink
  13. Hey,

    I've tried adding the style snippet into my style.css file and I'm still getting the error. Can you take a look?

    http://transformehosting.com/web-hosting-order-form/

    thanks,

    James.

    Posted 11 years ago on Saturday November 24, 2012 | Permalink
  14. David Peralty

    jgiroux - Try the following:

    .content_area ul li::before {
    content: none !important;
    Posted 11 years ago on Sunday November 25, 2012 | Permalink
  15. thanks! that fixed the bullets but radio buttons / checkboxes aren't showing up now. any ideas? page 2 of the form has three options (monthly, quarterly, yearly) and the options are there, but the radio buttons aren't showing up. page 3 has 2 checkboxes and they aren't showing up. Also, buttons are looking very weird. Is there a way for them to inherit the styles from the theme?

    Posted 11 years ago on Sunday November 25, 2012 | Permalink
  16. David Peralty

    By default, Gravity Forms does take into consideration all the CSS used by your theme. If you want to turn off any styling from Gravity Forms, go to Forms -> Settings and set the Output CSS to Off. All my best!

    Posted 11 years ago on Sunday November 25, 2012 | Permalink