Next and Submit Button Styling « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

soupdigital
Member

I'm trying to keep consistency and leverage the same styling as my themes buttons for the "Next" and "Submit" button within Gravity Forms. I know I need to do this within the css but not too sure where to start.
It does not need to be the exact styling of my theme if that is an issue. But just need to begin editing the style of my form buttons (outside of loading and image within the form itself) as the default style is not optimal.
You can see the button style on the homepage here: http://www.prepit.co.nz/

Posted 12 years ago on Sunday July 22, 2012 | Permalink
Chris Hajer
Key Master
I'm not sure of the easiest way to do this. If you look in your theme's stylesheet, you will see a section called /*=== FANCY BUTTONS. That's where the styles for the buttons begin. You will need to use those styles to target this Gravity Form element:
```
.gform_wrapper input.button {
```
I'm not sure if it will be easier to add that selector to each block in the stylesheet where the buttons are affected, or if it's easier to copy all the button styles to the bottom of your stylesheet and then add the .gform_wrapper input.button selector there.

You need to do one or the other to make the Gravity Forms buttons look like your theme's styled buttons.
Posted 12 years ago on Sunday July 22, 2012 | Permalink
soupdigital
Member

Thanks for the quick reply Chris, legend.
I think this might be above my basic skills but I'll keep trying. I'm trying to find the element with the plugin editor for Gforms but can't find it. What plugin file should I be looking at?
Alternatively if there is a better way to change the formatting of the submit and next button that would get me close to that style then that would be ok also.

Cheers

Posted 12 years ago on Sunday July 22, 2012 | Permalink
Chris Hajer
Key Master

Don't modify any of the plugin files. You will add custom styles to your themes's style.css. If you copied the big blocks of style from the Fancy Buttons section of the stylesheet, then pasted them to the bottom of you style.css, you can change the existing selectors to include .gform_wrapper input.button. Try that for a couple and take a look at your form. I was able to change the size and color pretty quickly. But there are a ton of styling changes applied to buttons in your theme. It is going to take some work to get the Gravity Forms buttons to look the same, but it will be nice when that is done.

Just start by copying the block from your style.css to the bottom of style.css, then add .gform_wrapper input.button where there are existing button references and refresh the page. You might be surprised how quickly that goes.

Posted 12 years ago on Sunday July 22, 2012 | Permalink

Via email:

Try adding this to your theme's stylesheet, wherever the theme provider suggests you add your custom CSS rules:

[css]
.gform_wrapper input.button {
	font-size: 14px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	color: #FFFFFF;
	background-color: #FF5C00;
	line-height: 1em;
	padding: 0.6em 1.3em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	display: inline-block;
	cursor: pointer;
}

There are probably some gradient and hover issues to deal with, but this will get you close. Screenshot: http://minus.com/lbgFoiT7v0lgny

Posted 12 years ago on Friday August 31, 2012 | Permalink

soupdigital
Member

Thanks you so much Chris, this works perfectly!!

Posted 12 years ago on Saturday September 1, 2012 | Permalink
Chris Hajer
Key Master

Thank you for that update. Have a nice weekend.

Posted 12 years ago on Saturday September 1, 2012 | Permalink

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