Styling submit buttom « Gravity Support Forums

Gravity Support Forums » Plugin Support » Gravity Forms

http://www.tricitypsychology.com/blog/contact-us/

Hi I seem to be having a problem styling the submit button I have tried several selectors but to no avail
this is what I am have currently any suggestions?

#gform_wrapper_6 input.button {
    -moz-border-radius:0 ;
    -moz-box-shadow:0;
     background-color: #E3E3E3;
     border-color: #CCCCCC #999999 #999999 #CCCCCC;
     border-style: double;
     border-width: 2px;
     color: #111111;
     cursor: pointer;
     font-family: Verdana;
     font-size: 9px;
     overflow: visible;
     padding: 0.313em 0.85em;
     width: auto !important;
     text-shadow:none;

}

Posted 13 years ago on Monday February 28, 2011 | Permalink

Carl Hancock
Administrator

You would target the submit button with this CSS selection:

#gform_wrapper_6 .gform_footer .button {YOUR CSS HERE}

It looks like you have already styled the form on that page. It appears styled to me with rounded corners, etc.

Posted 13 years ago on Monday February 28, 2011 | Permalink
Kathyj
Member

No Carl that is the default style for the button in the theme which is overiding the form button I will try you r code now give me a moment

Posted 13 years ago on Monday February 28, 2011 | Permalink
Kathyj
Member

dosen't work

Posted 13 years ago on Monday February 28, 2011 | Permalink
Kathyj
Member

Its seems that the customization that I have done for the front page button is overriding my ability to customize the submit button... Any other suggestion s or should I just make an image?

Posted 13 years ago on Monday February 28, 2011 | Permalink
Carl Hancock
Administrator

@kathyj Try using the !important declaration after each style you set in your custom CSS to force it to use that. What could be happening is depending on the order the CSS is loaded, your CSS is being overridden by the other styles you have in place. Be sure to place your custom CSS at the very end of your themes stylesheet and use the !important declaration after each style you apply. In your example above you use !important after the width declaration, apply it to every single style declaration.

Posted 13 years ago on Monday February 28, 2011 | Permalink
Kevin Flahaut
Administrator
You can try using the important declaration if you need. It's better if you just use better CSS specificity.

You just need to be more specific with your CSS inheritance to override the other rules. You have to step it down from the parent ID's and classes.

Try adding this to the end of your custom CSS
```
body.custom #container #page #content_box #content .post_box .format_text .gform_wrapper .gform_footer input[type=submit].button {
    color: #fff;
    border: 5px solid green;
    background-image: none;
    background-color: blue;
}
```
test screenshot: http://grab.by/9dfs
Posted 13 years ago on Monday February 28, 2011 | Permalink
Kathyj
Member

Thanks Kevin... I had actually tried that but I had just used the last selector as input.button and it hadn't worked ... all's well now thanks. I now need to apply more styling to the page and form... I may be back!

Posted 13 years ago on Tuesday March 1, 2011 | Permalink