GeneratePress Overriding Gravity Forms Styles

Hi there,

Any chance you can link us to the site in question?

You can edit the original topic and use the private URL field.

Let me know :)

OK, its done. Taking out of maintenance mode for review.
Please compare the Project Inquiry page form and Contact page form. One is inheriting the wanted styles, the contact form is inheriting GP styles.

As I don't want the site live at the moment and hadn't heard back yet in roughly 3 hours, I placed the site back under maintenance. Maybe we can troubleshoot at a later date.

Hi there,

If you'd like, you can send us temporary login details so we can get through the maintenance page: https://generatepress.com/contact

Just be sure to mention this topic.

Thanks! :)

Thanks Tom. I can send a login if needed.

It seems strange that it doesn't effect my multi-page forms. Just the single page forms.

My only thought is the single forms submit buttons use class="button", which the multi-page forms use another class name. Could GP use a class called button somewhere?

Yup the button class is used in GP so you can actually change the button colors in the customizer.

We should be able to use some CSS to overwrite it no problem if we can see the site live :)

Let us know.

Thanks for the reply Leo.

I see the code below from the parent GP directory as the only area that calls for the button class in the forms section. I tested removing this section and it didn't allow the child theme style to take over. I'm comfortable inserting potential CSS fixes that you might suggest starting with.

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

button,
input,
select,
textarea {
	font-size: 100%; /* Corrects font size not being inherited in all browsers */
	margin: 0; /* Addresses margins set differently in IE6/7, F3/4, S5, Chrome */
	vertical-align: baseline; /* Improves appearance and consistency in all browsers */
	*vertical-align: middle; /* Improves appearance and consistency in all browsers */
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid transparent;
	background: #666;
	cursor: pointer;
	-webkit-appearance: button;
	padding: 10px 20px;
	color: #FFF;
}
input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box; /* Addresses box sizing set to content-box in IE8/9 */
	padding: 0; /* Addresses excess padding in IE8/9 */
}
input[type="search"] {
	-webkit-appearance: textfield; /* Addresses appearance set to searchfield in S5, Chrome */
	box-sizing:         content-box;
}
input[type="search"]::-webkit-search-decoration { /* Corrects inner padding displayed oddly in S5, Chrome on OSX */
	-webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner { /* Corrects inner padding and border displayed oddly in FF3/4 www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/ */
	border: 0;
	padding: 0;
}
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: #FAFAFA;
	color: #666;
	border: 1px solid #ccc;
	border-radius: 0px;
	padding: 10px 15px;
	box-sizing: border-box;
	max-width: 100%;
}

textarea {
	overflow: auto; /* Removes default vertical scrollbar in IE6/7/8/9 */
	vertical-align: top; /* Improves readability and alignment in all browsers */
	width: 100%;
}
input[type="file"] {
	max-width: 100%;
	box-sizing: border-box;
}

This is the CSS from the child GP theme being used for Gravity Forms button:

.button { text-transform: uppercase; background-color: #f0eff4; color: #000000; border: 1px solid #000000; padding: 10px 15px; margin-top: 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; cursor: pointer; }
.button:hover { text-transform: uppercase; background-color: #319177; color: #000000; border: 1px solid #000000; padding: 10px 15px; margin-top: 25px; text-align: center; text-decoration: none; display: inline-block; font-size: 20px; cursor: pointer; }

You just need to make it a bit more specific.

Any chance you can provide the login details so we can get through the maintenance page?

I'm sending login details and reference number to this thread via the contact page "account issue" portal. Please keep an eye out for it.

Hi there,

looking at the Contact page form i can see the submit button has the gform_button class but there is no CSS styles for that class being applied. So it uses the GP button class styling. Even if you were to remove the button class it would then default to the User agent style sheet.

Thank you for looking David.

In my style sheet there is

body .gform_wrapper .gform_body .gform_page_footer .gform_button { text-transform: uppercase; background-color: #f0eff4; color: #000000; border: 2px solid #2e4057; border-radius: 5px; padding: 10px 15px 10px 15px; cursor: pointer; }
body .gform_wrapper .gform_body .gform_page_footer .gform_button:hover { text-transform: uppercase; background-color: #f0eff4; color: #000000; border: 2px solid #ff0000; border-radius: 5px; padding: 10px 15px 10px 15px; cursor: pointer; }

So the multi-page form is pulling its style from these lines, but the contact form which has the same style class is not pulling from these lines? I did attempt to apply two new CSS lines with the same styling, but using just .gform_button as the class. It didn't seem to change the contact form button style.

Any additional things I can try?

Thank you

Would this CSS work for you?

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] {
    color: #000;
    background-color: #fff;
}

Leo,
That works for the button in general. When I apply the :hover CSS to it though, it causes it to move change location and size upon hover even with the same CSS that worked prior to installing the GP theme. Would you be able to take another look at why the hover CSS is doing that?
The contact form button is suppose to use the same CSS as the button on the form on the "Project Inquiry" page on the menu for review.
Thank you

Edit this:

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit]:hover {
    text-transform: uppercase;
    background-color: #319177;
    color: #000000;
    border: 1px solid #000000;
    padding: 10px 15px;
    margin-top: 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    cursor: pointer;
}

To this:

.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit]:hover {
    text-transform: uppercase;
    background-color: #319177;
    color: #000000;
    border: 1px solid #000000;
    padding: 10px 15px;
    margin-top: 25px !important;
    text-align: center;
    text-decoration: none;
    display: inline-block !important;
    font-size: 20px !important;
    cursor: pointer;
}