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
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.
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?
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.
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?
Please share a link to the page on your site where we can see this form in action. Thank you.
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/
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; }You're welcome. Thanks for the update.