https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms Gravity Support Forums Topic: Use current themes default button CSS when using multi page forms? en-US Mon, 20 Apr 2026 02:34:53 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-152744 Sat, 23 Feb 2013 01:10:25 +0000 Chris Hajer 152744@https://legacy.forums.gravityhelp.com/ <p>You're welcome. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-151045 Wed, 20 Feb 2013 17:08:49 +0000 dmayer5 151045@https://legacy.forums.gravityhelp.com/ <p>Rob:</p> <p>That worked perfectly thank you very much!! </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-151017 Wed, 20 Feb 2013 15:55:02 +0000 Rob Harrell 151017@https://legacy.forums.gravityhelp.com/ <p>Try this out instead to target the next and previous buttons:</p> <pre><code>[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; }</code></pre> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-150645 Wed, 20 Feb 2013 02:41:44 +0000 dmayer5 150645@https://legacy.forums.gravityhelp.com/ <p>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: </p> <p>.gform_wrapper .gform_page_footer .button.gform_button {<br /> color:#ffffff;<br /> padding-top:4px;<br /> padding-bottom:4px;<br /> padding-left:10px;<br /> padding-right:10px;<br /> border: 1px solid rgba(114,114,114,0.4);<br /> border-radius: 1px;<br /> -moz-border-radius: 3px;<br /> -webkit-border-radius: 3px;<br /> box-shadow: 0 1px 0px rgba(114,114,114,0.3);<br /> -moz-box-shadow: 0 1px 0px rgba(114,114,114,0.3);<br /> -webkit-box-shadow: 0 1px 0px rgba(114,114,114,0.3);<br /> background-color: #0096d6;<br /> }</p> <p>body .gform_wrapper .gform_page_footer .button.gform_button:hover {<br /> border: 1px solid rgba(114,114,114,0.6);<br /> background-color: #444444;</p> <p>}<br /> body .gform_wrapper .gform_page_footer .button.gform_button:active { top: 1px; }</p> <p>That added styling to the Submit button but not the "Next" or "Previous" buttons.</p> <p>Where can I add the styling so that the "Next" and "Previous" will match the submit buttons. </p> <p>Here is the link to the form: <a href="http://dekarmedia.com/new/multi-page/" rel="nofollow">http://dekarmedia.com/new/multi-page/</a> </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-136517 Wed, 30 Jan 2013 12:58:51 +0000 Chris Hajer 136517@https://legacy.forums.gravityhelp.com/ <p>Please share a link to the page on your site where we can see this form in action. Thank you. </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-133143 Sun, 27 Jan 2013 15:23:49 +0000 escius 133143@https://legacy.forums.gravityhelp.com/ <p>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.</p> <p>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? </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-120873 Sun, 13 Jan 2013 13:22:11 +0000 Chris Hajer 120873@https://legacy.forums.gravityhelp.com/ <p>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. </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-120735 Sun, 13 Jan 2013 07:58:22 +0000 Divent 120735@https://legacy.forums.gravityhelp.com/ <p>My site is developed locally at the moment.<br /> I get what you mean but I'm not really sure what goes where to be honest.</p> <p>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.</p> <p>I do believe the CSS below is responsible for styling "regular buttons":</p> <pre><code>/* --- 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 &gt; span { position:relative; display:inline-block; overflow:hidden; vertical-align:bottom; zoom:1; } .button &gt; span:before, .button &gt; span:after { height:1px; content:&quot;&quot;; position:absolute; left:1px; right:1px; z-index:2; } .button &gt; 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 &gt; 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 &gt; span:before { background:none; } .button &gt; span &gt; span { display:block; letter-spacing:1px; zoom:1; }</code></pre> <p>Which part in the Gravity Forms CSS should I modify? </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-120363 Sat, 12 Jan 2013 13:21:37 +0000 Chris Hajer 120363@https://legacy.forums.gravityhelp.com/ <p>Please post a link to the page on your site where we can see the form.</p> <p>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. </p> https://legacy.forums.gravityhelp.com/topic/use-current-themes-default-button-css-when-using-multi-page-forms#post-120239 Sat, 12 Jan 2013 08:36:02 +0000 Divent 120239@https://legacy.forums.gravityhelp.com/ <p>Hi!<br /> I'm using a multi page form for the order process of domain and web hosting package solutions.<br /> 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?</p> <p>What would be the best way to do this?<br /> I'm using the WP theme "Flare", by the way: <a href="http://themeforest.net/item/flare-responsive-business-portfolio-wp-theme/1969512" rel="nofollow">http://themeforest.net/item/flare-responsive-business-portfolio-wp-theme/1969512</a></p> <p>Thanks!</p> <p>Divent </p>