https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons Gravity Support Forums Topic: Styling multi page buttons en-US Sun, 19 Apr 2026 22:04:02 +0000 http://bbpress.org/?v=1.0.1 q https://legacy.forums.gravityhelp.com/search.php https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20296 Wed, 09 Mar 2011 19:13:02 +0000 Kevin Flahaut 20296@https://legacy.forums.gravityhelp.com/ <p>Okay, wonderful. Thanks for the update. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20294 Wed, 09 Mar 2011 19:06:23 +0000 pcgs51 20294@https://legacy.forums.gravityhelp.com/ <p>I care for it just fine. The buttons now work as they should and with only one !important.<br /> Thank you. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20291 Wed, 09 Mar 2011 18:40:27 +0000 Kevin Flahaut 20291@https://legacy.forums.gravityhelp.com/ <p>Yeah, I got it. I referenced the first form to show that they looked similar.</p> <p>In this instance you're going to need to look at the existing rule that's being applied, and be even more specific to override that. You may still need the important declaration for it.</p> <pre><code>body.custom #container #page #content_box .post_box .format_text .gform_footer input[type=submit].button, body.custom #container #page #content_box .post_box .format_text .gform_page_footer input[type=submit].button.gform_button, body.custom #container #page #content_box .post_box .format_text .gform_page_footer input[type=button].button.gform_previous_button, body.custom #container #page #content_box .post_box .format_text .gform_page_footer input[type=button].button.gform_next_button {width: 110px!important}</code></pre> <p>That works in my test.</p> <p>screenshot: <a href="http://grab.by/9nVT" rel="nofollow">http://grab.by/9nVT</a></p> <p>If you don't care for that, you can always copy the forms.css file to your theme directory and modify that version. Just set the "output CSS" option in the settings page to no. That way you can modify the default CSS to your heart's content without it being overwritten by future upgrades.</p> <p>Oh, and the button settings are in the page break fields.. you can see the option to use an image instead.</p> <p>screenshot: <a href="http://grab.by/9nXs" rel="nofollow">http://grab.by/9nXs</a> </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20289 Wed, 09 Mar 2011 18:19:28 +0000 pcgs51 20289@https://legacy.forums.gravityhelp.com/ <p>Yes, the normal form is fine and that is why I provided the link. That's how I'd like it to work in the multi page scenario. </p> <p>The buttons on the multi page form are cut off on the right at varying amounts. I did start at the body tag. Adjusting the width doesn't do anything. In fact I've tried it many many different ways starting with the body tag.</p> <p>What I see in firebug is that the Gravity stylesheet for Version 1.5.RC4.2 shows </p> <p>width: auto; </p> <p>for the Next button and if I click it off (in firebug) the button to displays properly. This is the rule in the Gravity CSS not Thesis. But I don't know how to affect the "width: auto;" in my style sheet. I tried using these options:</p> <p>width: 110px!important;<br /> width: 110px;<br /> width: &lt;insert various widths here&gt;px !important<br /> ---nothing---</p> <p>Even if I opt for the image button you suggest it would only affect the "Submit" button. I don't see where I can affect the "Previous" and "Next" buttons. Thought it would be logical to affect all the buttons the same way site wide using a blank image for the button background and using text over it.</p> <p>Is there a way to fix this with cleaner CSS? </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20282 Wed, 09 Mar 2011 17:20:59 +0000 Kevin Flahaut 20282@https://legacy.forums.gravityhelp.com/ <p>The buttons appear to be the same to me - sans the rounded corners on the right.</p> <p>screenshot - multi: <a href="http://grab.by/9nNP" rel="nofollow">http://grab.by/9nNP</a></p> <p>screenhot - normal: <a href="http://grab.by/9nNZ" rel="nofollow">http://grab.by/9nNZ</a></p> <p>If you want to override the other styles without using the important declaration you need to use very specific inheritance, starting back from the body tag if necessary.</p> <p>There is also an option to use image buttons in place of the standard submits if you prefer to do that. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20275 Wed, 09 Mar 2011 16:48:50 +0000 pcgs51 20275@https://legacy.forums.gravityhelp.com/ <p>Thanks Carl,</p> <p>I try not to use !important whenever possible but I will if I must. </p> <p>However this !important solution only partially works and after attempting to adjust thinking it will take more than that. Please view my <a href="http://priscillac.com/services/client-services/design-brief/" rel="nofollow">multi page form</a> and advance to the last page for the full effect.</p> <p>Wondering how I managed to change the Contact page's submit button without it? Yes, I did have to use the !important on the width. </p> <p>FWIW, I tried changing the width of the buttons with no affect what so ever. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20263 Wed, 09 Mar 2011 15:50:27 +0000 Carl Hancock 20263@https://legacy.forums.gravityhelp.com/ <p>The problem is it is inheriting some Thesis specific styles.</p> <p>You can override these by adding !important to the end of each style attribute to force it to override any other styles being applied.</p> <p>For example:</p> <pre><code>body.custom .gform_wrapper .gform_body .gform_page_footer .gform_next_button, body.custom .gform_wrapper .gform_body .gform_page_footer .gform_previous_button, body.custom .gform_wrapper .gform_body .gform_page_footer .gform_button { background: transparent url(&#39;images/btn_submit.png&#39;) 0 0 no-repeat!important; border:0!important; color: #fff!important; text-shadow: 2px 2px 2px #3c2715!important; font-family:&quot;Trebuchet MS&quot;,&quot;Lucida Grande&quot;,&quot;Lucida Sans Unicode&quot;,&quot;Lucida Sans&quot;,Arial,sans-serif!important; font-size: 1.2em!important; font-weight: bold!important; width: 110px!important;}</code></pre> <p>You may need to tweak the styles some more, but that should get you started. </p> https://legacy.forums.gravityhelp.com/topic/styling-multi-page-buttons#post-20255 Wed, 09 Mar 2011 15:38:16 +0000 pcgs51 20255@https://legacy.forums.gravityhelp.com/ <p>I managed to style a "Submit" button with your help on another Gravity form on my site, but I now find in attempting to style multi page "Previous" "Next" and "Submit" buttons that there must be something I'm missing. I tried the CSS Targeting Samples with no luck.</p> <p>You can <a href="http://priscillac.com/services/client-services/design-brief/" rel="nofollow">see the multi page form here.</a> My <a href="http://priscillac.com/wordpress/wp-content/themes/thesis_18/custom/custom.css" rel="nofollow">CSS is here</a>. The Gravity multi page rules are at the very bottom of that file.</p> <p>I would like my buttons to be styled like the Submit button <a href="http://priscillac.com/contact/" rel="nofollow">on this page.</a></p> <p>Thanks. </p>