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.

Next / Previous buttons not picking up style (CSS)

Gravity Support Forums » Plugin Support » Gravity Forms

  1. teajayo
    Member

    HI. Something's up with the CSS for the buttons conflicting with the input fields here>
    http://www.sullivanglass.com/auto-glass-repair-installation-quote

    It's a two page form and the 'next' 'previous' buttons are using the style of the input boxes and not the 'Submit' button.

    To view the submit button without filling out the first page of the form... check any of the other forms on the site > like :: http://www.sullivanglass.com/window-repair-quote

    I have tried everything. Even editing the gforms css. Just keeps reading and using the input css. Any ideas are greatly appreciated.

    -Tom

    Posted 12 years ago on Monday February 27, 2012 | Permalink

  2. Rob Harrell
    Member

    Tom - this is what is causing it, you have this selector here:

    [css]
.post form input {
width: auto;
border: 1px solid #CCC;
border-radius: 3px 3px 3px 3px;
color: #222;
padding: 3px 6px 4px;
background: #F9F9F9;
}

    Try placing this into your theme's css (we'll override that with this):

    [css]
.gform_next_button, .gform_previous_button {
height: 30px;
padding: 0 15px !important;
background: black !important;
color: white !important;
cursor: pointer;
overflow: visible;
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-top: 10px !important;
}

    Also, you'll def want to not update the plugin's css file for updating purposes, so you don't lose your customizations.

    Posted 12 years ago on Monday February 27, 2012 | Permalink

  3. teajayo
    Member

    Hi Rob....

    I tired that and the color is correct but not doing the border radius or the hover ?? I added this to style.css

    .gform_next_button, .gform_previous_button {
    height: 30px;
    padding: 0 15px !important;
    background: black !important;
    color: white !important;
    cursor: pointer;
    overflow: visible;
    border: 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin-top: 10px !important;}
    .gform_next_button, .gform_previous_button :hover {background:#852c3b;}

    http://www.sullivanglass.com/auto-glass-repair-installation-quote

    Posted 12 years ago on Monday February 27, 2012 | Permalink

  4. Rob Harrell
    Member

    Try this:

    [css]
.gform_next_button:hover, .gform_previous_button:hover {background:#852c3b !important;}
    Posted 12 years ago on Monday February 27, 2012 | Permalink

  5. teajayo
    Member

    Thanks Rob. U DA MAN!

    Posted 12 years ago on Monday February 27, 2012 | Permalink

  6. Rob Harrell
    Member

    Right on, right on! Glad to help.

    Posted 12 years ago on Monday February 27, 2012 | Permalink

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