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

  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 7 years ago on Thursday March 28, 2013 | Permalink
  2. Do you have a link to your form and a link to a page with the button style on it?

    Posted 7 years ago on Thursday March 28, 2013 | Permalink
  3. Underdog
    Member

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

    Posted 7 years ago on Thursday March 28, 2013 | Permalink
  4. 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 7 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 7 years ago on Thursday March 28, 2013 | Permalink
  6. 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 7 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 7 years ago on Thursday March 28, 2013 | Permalink
  8. 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 7 years ago on Thursday March 28, 2013 | Permalink