[Resolved] Styling a Gravity Forms submit button

Home Forums Support [Resolved] Styling a Gravity Forms submit button

Home Forums Support Styling a Gravity Forms submit button

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #680628
    Jason

    Hi there, I know this is going to be something really simple, but I just can’t seem to style a Gravity Forms submit button.

    I’ve tried the css example on the gravity forms website: body .gform_wrapper .gform_footer input[type=submit] {border: 1px solid red} , and putting !important in there. I can change the colour of the submit button using the colors -> button options in the customizer, so it seems that Generate Press settings can change it.

    Other buttons style ok, it’s just the Gravity Forms submit button that I’m having a problem with.

    Does anyone have any ideas?

    cheers

    Jason

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #680644
    David
    Staff
    Customer Support

    Hi there,

    try this selector .gform_wrapper .gform_page_footer .button.gform_next_button it is the most specific one the from uses for the button on that page.

    If that doesn’t work then hit the group selectors they are using for their colors that should hit all the buttons it uses:

    body .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_footer input.button, .gform_page_footer .gform_previous_button, .gform_page_footer .gform_next_button

    #680652
    Jason

    Hi David,

    Thanks for replying. I removed the selectors for the other buttons and replaced them with your second example (the first was for the next button, which styles ok), and have the same result I’m afraid – prev & next are styled, but the submit button isn’t styled. :-/

    This is the styling I have now:

    body .gform_wrapper .gform_footer input[type=submit], .gform_wrapper .gform_footer input.button, .gform_page_footer .gform_previous_button, .gform_page_footer .gform_next_button {
    box-shadow: -3px 5px 4px 0px #d4d4d4;
    background:linear-gradient(to bottom, #ff0000 5%, #ff6600 100%);
    background-color:#ff0000;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    color:#ffffff;
    font-size:17px;
    padding:10px 31px;
    }

    cheers

    Jason

    #680656
    David
    Staff
    Customer Support

    Looks like thats picking up the default: input[type="submit"]
    Try hitting that with importance.

    #680658
    Jason

    To be sure, I placed !important on the end of all of the properties for that selector. Nothing I’m afraid. I’ve check in Firefox and Chrome to make sure it wasn’t an issue with the browser.

    #680674
    David
    Staff
    Customer Support

    Odd, even Gravity Forms docs provide those classes. Try hitting the ID: #gform_submit_button_1

    #681345
    Jason

    Hi David

    Sometimes it’s the most obvious thing. Thanks so much, the Send button now looks as beautiful as (or at least the same as) all of the others.

    cheers

    Jason

    #681356
    David
    Staff
    Customer Support

    You’re welcome _ they’re a nice looking button i must admit.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.