Form Buttons « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

SK54602
Member

I am on my second form and now the submit and previous button are gray and wanted them to be same as first which is green. I am using a wootheme template how would i go about fixing this.

Thanks

Posted 12 years ago on Wednesday May 11, 2011 | Permalink
Carl Hancock
Administrator

You would have to adjust the buttons using custom CSS you would add to your themes stylesheet. It sounds like Woo is styling the Submit button but not the others.

You can find examples of how to target the button elements in Section 12 of the CSS Targeting Samples here:

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

Posted 12 years ago on Wednesday May 11, 2011 | Permalink
SK54602
Member

So would this be on the style sheet or custom css

Posted 12 years ago on Wednesday May 11, 2011 | Permalink
Kevin Flahaut
Administrator

It depends on your theme. Some have a custom.css file, most use a regular style.css file and some have you put your custom styles in via an admin interface.

If you're not sure, contact your theme developer for guidance on where to best place your custom styles.

Posted 12 years ago on Wednesday May 11, 2011 | Permalink
SK54602
Member

I use woo themes which has an admin interface. I added this but no change

Posted 12 years ago on Thursday May 12, 2011 | Permalink
Kevin Flahaut
Administrator

@SK54602 You'll need to post a URL to your form page so we can take a look at it. Without seeing the form/markup/css we won't be able to tell you much more.

Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

http://www.sbsake.com/send-a-message/

Posted 12 years ago on Thursday May 12, 2011 | Permalink
Kevin Flahaut
Administrator
I looked at your custom.css file that's being output and it's empty.

http://www.sbsake.com/wp-content/themes/simplicity/custom.css

If you add the rule properly, it should work.

This works just fine in my test.. you can tweak it to your needs of course.
```
[css]
body .gform_wrapper .gform_footer input[type=submit] {
    color: red;
    background: orange;
    border: 3px solid black;
}
```
screenshot: http://grab.by/a6Xp
Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

I added this to admin custom.css section nothing changed

body .gform_wrapper .gform_footer input[type=submit] {
color: red;
background: orange;
border: 3px solid black;

Posted 12 years ago on Thursday May 12, 2011 | Permalink
Kevin Flahaut
Administrator

You'll need to contact Woo Themes support if that's not working. The styles should work just fine if they're saved properly.

Posted 12 years ago on Thursday May 12, 2011 | Permalink

They provided...

[css]
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type="submit"] {
color: #FF0000;
background-color: #FF6600;
border: 3px solid #000000;
}

** how would i get the mouse over effect to work???

Posted 12 years ago on Thursday May 12, 2011 | Permalink

Kevin Flahaut
Administrator
I don't know what your mouseover state is supposed to look like, but you would use the :hover pseudo-selector to apply new rules on the mouseover/hover event
```
[css]

.gform_wrapper .gform_footer input.button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover {
    background-color: red;
}
```
Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

I also need this to be on all buttons. This just adds for the submit button.

Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

This is not working the same as my other site.

http://merchant-solutions.sbsake.com/contact-1/

need or trying to get the buttons to respond the same way @

http://www.sbsake.com/referral-program/

Posted 12 years ago on Thursday May 12, 2011 | Permalink

Kevin Flahaut
Administrator

Your other site uses another theme so that's probably why it's not working the same. That has nothing to do with Gravity Forms functionality. The markup is the same and the CSS should work the same if you're using the same theme for different sites.

You can target the different button types specifically if you want to apply new rules. All of this can be found in the documentation here.

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

[css]
body .gform_wrapper .gform_footer input.button,
body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_body .gform_page_footer .gform_button,
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button,
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button {
	color:red
}

body .gform_wrapper .gform_footer input.button:hover,
body .gform_wrapper .gform_footer input[type=submit]:hover,
body .gform_wrapper .gform_body .gform_page_footer .gform_button:hover,
body .gform_wrapper .gform_body .gform_page_footer .gform_previous_button:hover,
body .gform_wrapper .gform_body .gform_page_footer .gform_next_button:hover {
	color:green
}

Posted 12 years ago on Thursday May 12, 2011 | Permalink

SK54602
Member

I added a logo location since this coding seems to be conflicting to much with the woo template. Woo themselves seem real confused on what actual is going on within the code that is conflicting.. now that i added a logo web location ... The logo doesn't even show up.....

Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

opps... my error.... images show up now.

Posted 12 years ago on Thursday May 12, 2011 | Permalink
Kevin Flahaut
Administrator

Woo adds their own Gravity Forms CSS that overrides several of the default layout options provided with Gravity Forms. To be clear, there isn't a "code conflict" of any sort, it's just their choice of styling has locked down some of the built-in options.

As far as the logo location.. I have no idea why your form styles would have any bearing on that. That too sounds like a theme issue.

Posted 12 years ago on Thursday May 12, 2011 | Permalink
SK54602
Member

Thanks for your response. I think the original issues is relation to the button that is showing is hover gray not the blue button that is defined in theme, I am still waiting on a response in this regard from woo themes. But there theme shows a blue button and when hovered it turns a slight gray. Thanks for helping today.... never thought this would be this complicated.

Posted 12 years ago on Thursday May 12, 2011 | Permalink
Kevin Flahaut
Administrator

Usually it's not a big deal. We purposely designed Gravity Forms to inherit as much of the styling from the theme as possible to make it easier getting set up. Sometimes the theme styling causes a few of it's own issues though. We're happy to help all we can.

Posted 12 years ago on Thursday May 12, 2011 | Permalink

SK54602
Member

Woo themes now have this resolved for Simplicity theme. see below for reference

[css]
.gform_wrapper input.button {
	display: inline-block;
	margin: 5px;
	padding: 3px 13px;
	border: 1px solid #4081af;
	border-bottom-color: #20559a;
	color: white !important;
	text-align: center;
	text-shadow: 0 -1px 0 hsla(0,0%,0%,.3);
	text-decoration: none;

	/*Border radius*/
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	/*Background*/
	background: #3585B3; /*Fallback*/

	/*Box shadow*/
	-webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/,
						inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/,
						0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	-moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/,
					inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/,
					0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
	box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/,
				inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/,
				0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/;
}

body .gform_wrapper .gform_body .gform_fields .gfield input[type=text] {font-size:1em}

.gform_wrapper input.button:hover {
	text-decoration: none !important;
	/*Background*/
	opacity:0.8;
}

Posted 12 years ago on Friday May 13, 2011 | Permalink

Kevin Flahaut
Administrator

Thanks for sharing the fix.

Posted 12 years ago on Friday May 13, 2011 | Permalink

This topic has been resolved and has been closed to new replies.