My theme uses shortcodes for buttons but the form is not inheriting the button style. How do I update this?
Also, how do I add a shaded box behind the total form?
Thank you!
My theme uses shortcodes for buttons but the form is not inheriting the button style. How do I update this?
Also, how do I add a shaded box behind the total form?
Thank you!
Do you have a link to your form and a link to a page with the button style on it?
Rob, sent you an email with the link and password. Thanks!
Steve, drop this into your theme's stylesheet (or wherever you are instructed to place custom CSS at the theme level) and see how far it gets you:
[css]
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
color: #54770f !important;
background-image: linear-gradient(top, #D1E990 0%, #AAD75B 100%);
background-image: -o-linear-gradient(top, #D1E990 0%, #AAD75B 100%);
background-image: -moz-linear-gradient(top, #D1E990 0%, #AAD75B 100%);
background-image: -webkit-linear-gradient(top, #D1E990 0%, #AAD75B 100%);
background-image: -ms-linear-gradient(top, #D1E990 0%, #AAD75B 100%);
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #D1E990), color-stop(1, #AAD75B) );
border: 1px solid #AAD75B;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D1E990', endColorstr='#AAD75B');
height: 32px;
font: 13px/32px 'PTSansBold', arial, helvetica, sans-serif;
text-transform: uppercase;
text-align: center;
text-shadow: 0 1px 0 #fff;
padding: 0 20px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
font-weight: bold;
}
Thanks Rob! Button now looks the same as the them styling. Is there anyway to duplicate the hover effect?
This should be for the hover:
[css]
.gform_wrapper .gform_footer input.button:hover, .gform_wrapper .gform_footer input[type=submit]:hover {
color: #54770f !important;
background-image: linear-gradient(top, #AAD75B 0%, #D1E990 100%);
background-image: -o-linear-gradient(top, #AAD75B 0%, #D1E990 100%);
background-image: -moz-linear-gradient(top, #AAD75B 0%, #D1E990 100%);
background-image: -webkit-linear-gradient(top, #AAD75B 0%, #D1E990 100%);
background-image: -ms-linear-gradient(top, #AAD75B 0%, #D1E990 100%);
background-image: -webkit-gradient( linear, left top, left bottom, color-stop(0, #AAD75B), color-stop(1, #D1E990) );
border: 1px solid #AAD75B;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAD75B', endColorstr='#D1E990');
}
Perfect, great support!
Another question and please let me know if I should start a new topic:
I notice when I tabe from one input trying to move to the next input space it does not move that way. Is there a limitation with GF on this or is there a conflict with my theme?
Thanks!
The tabindex is conflicting with that other form. I assume you won't have both? Just remove the other or set the tabindex higher on your GF shortcode:
http://www.gravityhelp.com/documentation/page/Embedding_A_Form