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.

Quick Styling

Gravity Support Forums » Plugin Support » Gravity Forms

  1. Underdog
    Member

    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!

    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  2. Rob Harrell
    Member

    Do you have a link to your form and a link to a page with the button style on it?

    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  3. Underdog
    Member

    Rob, sent you an email with the link and password. Thanks!

    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  4. Rob Harrell
    Member

    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;
}
    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  5. Underdog
    Member

    Thanks Rob! Button now looks the same as the them styling. Is there anyway to duplicate the hover effect?

    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  6. Rob Harrell
    Member

    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');
}
    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  7. Underdog
    Member

    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!

    Posted 11 years ago on Thursday March 28, 2013 | Permalink

  8. Rob Harrell
    Member

    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

    Posted 11 years ago on Thursday March 28, 2013 | Permalink