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.
You can see the multi page form here. My CSS is here. The Gravity multi page rules are at the very bottom of that file.
I would like my buttons to be styled like the Submit button on this page.
Thanks.
The problem is it is inheriting some Thesis specific styles.
You can override these by adding !important to the end of each style attribute to force it to override any other styles being applied.
For example:
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('images/btn_submit.png') 0 0 no-repeat!important;
border:0!important;
color: #fff!important;
text-shadow: 2px 2px 2px #3c2715!important;
font-family:"Trebuchet MS","Lucida Grande","Lucida Sans Unicode","Lucida Sans",Arial,sans-serif!important;
font-size: 1.2em!important;
font-weight: bold!important;
width: 110px!important;}You may need to tweak the styles some more, but that should get you started.
Thanks Carl,
I try not to use !important whenever possible but I will if I must.
However this !important solution only partially works and after attempting to adjust thinking it will take more than that. Please view my multi page form and advance to the last page for the full effect.
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.
FWIW, I tried changing the width of the buttons with no affect what so ever.
The buttons appear to be the same to me - sans the rounded corners on the right.
screenshot - multi: http://grab.by/9nNP
screenhot - normal: http://grab.by/9nNZ
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.
There is also an option to use image buttons in place of the standard submits if you prefer to do that.
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.
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.
What I see in firebug is that the Gravity stylesheet for Version 1.5.RC4.2 shows
width: auto;
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:
width: 110px!important;
width: 110px;
width: <insert various widths here>px !important
---nothing---
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.
Is there a way to fix this with cleaner CSS?
Yeah, I got it. I referenced the first form to show that they looked similar.
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.
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}That works in my test.
screenshot: http://grab.by/9nVT
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.
Oh, and the button settings are in the page break fields.. you can see the option to use an image instead.
screenshot: http://grab.by/9nXs
Okay, wonderful. Thanks for the update.