- This topic has 14 replies, 4 voices, and was last updated 4 years, 7 months ago by Leo.
-
AuthorPosts
-
September 3, 2019 at 2:14 pm #1000391Tyler
Hello,
It appears that since enabling the GeneratePress theme, some of the styling on my forms is being overridden by GP styles. In particular the submit button on my forms.
As I am using Gravity Forms exclusively for all my forms and don’t need the GP form functionality, is there a way to disable all form features/styling in the theme?
Thank you
September 3, 2019 at 2:35 pm #1000402LeoStaffCustomer SupportHi 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 π
September 3, 2019 at 2:40 pm #1000408TylerOK, 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.September 3, 2019 at 4:07 pm #1000433TylerAs 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.
September 3, 2019 at 4:51 pm #1000458TomLead DeveloperLead DeveloperHi 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! π
September 4, 2019 at 2:08 pm #1001229TylerThanks 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?
September 4, 2019 at 2:48 pm #1001243LeoStaffCustomer SupportYup 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.
September 4, 2019 at 3:16 pm #1001249TylerThanks 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; }
September 4, 2019 at 3:24 pm #1001254LeoStaffCustomer SupportYou 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?
September 4, 2019 at 3:29 pm #1001255TylerI’m sending login details and reference number to this thread via the contact page “account issue” portal. Please keep an eye out for it.
September 5, 2019 at 4:36 am #1001593DavidStaffCustomer SupportHi 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 GPbutton
class styling. Even if you were to remove the button class it would then default to the User agent style sheet.September 5, 2019 at 7:40 am #1001694TylerThank 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
September 5, 2019 at 8:27 am #1001858LeoStaffCustomer SupportWould this CSS work for you?
.gform_wrapper .gform_footer input.button, .gform_wrapper .gform_footer input[type=submit] { color: #000; background-color: #fff; }
September 5, 2019 at 9:51 am #1001926TylerLeo,
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 youSeptember 5, 2019 at 10:07 am #1001935LeoStaffCustomer SupportEdit 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.