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

Gravity Support Forums » Plugin Support » Gravity Forms

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 13 years ago on Saturday December 17, 2011 | Permalink

Rob Harrell
Member

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 13 years ago on Saturday December 17, 2011 | Permalink

Erin
Member

Thank you Rob. I will add that code.

Posted 13 years ago on Tuesday December 20, 2011 | Permalink
Chris Hajer
Key Master

Erin, please let us know if you need more help. If this works for you, we will close this topic. Thank you.

Posted 13 years ago on Tuesday December 20, 2011 | Permalink
davidboroi
Member

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
Kevin Flahaut
Administrator

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
davidboroi
Member

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
Kevin Flahaut
Administrator

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
davidboroi
Member

stylesheet.css
http://pastebin.com/GUycnvJz

Posted 12 years ago on Thursday April 26, 2012 | Permalink
Kevin Flahaut
Administrator

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
davidboroi
Member

Sorry - I meant style.css ..... if that makes a difference.

Posted 12 years ago on Thursday April 26, 2012 | Permalink
Kevin Flahaut
Administrator

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
jgiroux
Member

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 12 years ago on Saturday November 24, 2012 | Permalink
David Peralty
jgiroux - Try the following:
```
.content_area ul li::before {
content: none !important;
```
Posted 12 years ago on Sunday November 25, 2012 | Permalink
jgiroux
Member

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 12 years ago on Sunday November 25, 2012 | Permalink
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 12 years ago on Sunday November 25, 2012 | Permalink