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.

Use current themes default button CSS when using multi page forms?

  1. Hi!
    I'm using a multi page form for the order process of domain and web hosting package solutions.
    The form is working nicely but I'd like my themes default buttons to override the pagination buttons. The submit button inherits my themes button CSS but not the next/previous buttons?

    What would be the best way to do this?
    I'm using the WP theme "Flare", by the way: http://themeforest.net/item/flare-responsive-business-portfolio-wp-theme/1969512

    Thanks!

    Divent

    Posted 7 years ago on Saturday January 12, 2013 | Permalink
  2. Please post a link to the page on your site where we can see the form.

    Generally, what you would do, is find the class of the previous and next buttons, then copy the styles from your theme's stylesheet, and apply those to the form button elements in the Gravity Form. Submit is a common button name, but they likely did not target the previous and next buttons. Just copy their styles for the buttons, add them to the end of the theme stylesheet, and change the selectors so it will apply to your previous and next form buttons.

    Posted 7 years ago on Saturday January 12, 2013 | Permalink
  3. My site is developed locally at the moment.
    I get what you mean but I'm not really sure what goes where to be honest.

    My theme has a shortcode function for adding buttons of different sizes and with different functions (dividers, etc) built in, so the css was quite extensive in the buttons department.

    I do believe the CSS below is responsible for styling "regular buttons":

    /* --- Buttons --------------------------------------------------------------------------------- */
    .button {
    	margin-bottom:22px;
    	margin-right:0.2px; /*IE8 inline-block fix*/
    	display:inline-block;
    	position:relative;
    	text-decoration:none !important;
    	text-align:center;
    	text-transform:uppercase;
    	vertical-align:middle;
    	-webkit-box-shadow:0 1px 2px rgba(0,0,0, 0.2);
    	   -moz-box-shadow:0 1px 2px rgba(0,0,0, 0.2);
    			box-shadow:0 1px 2px rgba(0,0,0, 0.2);
    	zoom:1;
    }
    
    .button,
    .button span  {
    	-webkit-border-radius:3px;
    	   -moz-border-radius:3px;
    	        border-radius:3px;
    }
    
    .button > span {
    	position:relative;
    	display:inline-block;
    	overflow:hidden;
    	vertical-align:bottom;
    	zoom:1;
    }
    .button > span:before,
    .button > span:after {
    	height:1px;
    	content:"";
        position:absolute;
        left:1px;
        right:1px;
        z-index:2;
    }
    .button > span:after {
        top:1px;
        background-image:-webkit-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.33) 50%, rgba(255,255,255, 0) 100%);
        background-image:   -moz-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.33) 50%, rgba(255,255,255, 0) 100%);
        background-image:    -ms-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.33) 50%, rgba(255,255,255, 0) 100%);
        background-image:     -o-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.33) 50%, rgba(255,255,255, 0) 100%);
        background-image:        linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.33) 50%, rgba(255,255,255, 0) 100%);
    }
    .button > span:before {
       	bottom:0;
        background-image:-webkit-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0) 100%);
        background-image:   -moz-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0) 100%);
        background-image:    -ms-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0) 100%);
        background-image:     -o-linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0) 100%);
        background-image:        linear-gradient(left, rgba(255,255,255, 0) 0%, rgba(255,255,255, 0.2) 50%, rgba(255,255,255, 0) 100%);
    }
    .button:hover > span:before { background:none; }
    
    .button > span > span { display:block; letter-spacing:1px; zoom:1; }

    Which part in the Gravity Forms CSS should I modify?

    Posted 7 years ago on Sunday January 13, 2013 | Permalink
  4. You should not modify any of the Gravity Forms CSS. You will copy the appropriate styles from this section, add them to the end of the stylesheet, and change the selectors to ones which will apply to Gravity Forms. The big reason this is not working for Gravity Forms buttons is that your theme is using a span to style the button. Gravity Forms buttons do not use a span.

    Posted 7 years ago on Sunday January 13, 2013 | Permalink
  5. I am having the EXACT same trouble on my site, the submit button uses the span style and works great with the theme CSS, but the Multi-Page "next", "previous", etc.. buttons dont use the span style and as such don't work with the theme styling.

    Currently the only way to fix this is to edit the Gravity Forms Plugin files... is there anyway you can add the span style to these buttons as well like you did with the Submit button? or at least a workaround that wont break the plugin or theme update process?

    Posted 7 years ago on Sunday January 27, 2013 | Permalink
  6. Please share a link to the page on your site where we can see this form in action. Thank you.

    Posted 7 years ago on Wednesday January 30, 2013 | Permalink
  7. Ok I need help with one more thing. I want to add a multipage form to the website. I looked in the forms.css and found the portion for the "multi-page form paging" settings. Neither the "next, previous, or submit buttons" had styling So I added this to my theme css:

    .gform_wrapper .gform_page_footer .button.gform_button {
    color:#ffffff;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid rgba(114,114,114,0.4);
    border-radius: 1px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    background-color: #0096d6;
    }

    body .gform_wrapper .gform_page_footer .button.gform_button:hover {
    border: 1px solid rgba(114,114,114,0.6);
    background-color: #444444;

    }
    body .gform_wrapper .gform_page_footer .button.gform_button:active { top: 1px; }

    That added styling to the Submit button but not the "Next" or "Previous" buttons.

    Where can I add the styling so that the "Next" and "Previous" will match the submit buttons.

    Here is the link to the form: http://dekarmedia.com/new/multi-page/

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  8. Try this out instead to target the next and previous buttons:

    [css]
    .gform_wrapper .gform_page_footer .button.gform_next_button, .gform_wrapper .gform_page_footer .button.gform_previous_button {
    color:#ffffff;
    padding-top:4px;
    padding-bottom:4px;
    padding-left:10px;
    padding-right:10px;
    border: 1px solid rgba(114,114,114,0.4);
    border-radius: 1px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    -webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);
    background-color: #0096d6;
    }
    
    body .gform_wrapper .gform_page_footer .button.gform_next_button:hover, body .gform_wrapper .gform_page_footer .button.gform_previous_button:hover {
    border: 1px solid rgba(114,114,114,0.6);
    background-color: #444444;
    
    }
    body .gform_wrapper .gform_page_footer .button.gform_next_button:active, body .gform_wrapper .gform_page_footer .button.gform_previous_button:active { top: 1px; }
    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  9. Rob:

    That worked perfectly thank you very much!!

    Posted 7 years ago on Wednesday February 20, 2013 | Permalink
  10. You're welcome. Thanks for the update.

    Posted 7 years ago on Saturday February 23, 2013 | Permalink

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