[Support request] GeneratePress Overriding Gravity Forms Styles

Home Forums Support GeneratePress Overriding Gravity Forms Styles

  • This topic has 14 replies, 4 voices, and was last updated 1 year ago by Leo.
Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1000391
    Tyler

    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

    #1000402
    Leo
    Staff
    Customer Support

    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 🙂

    #1000408
    Tyler

    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.

    #1000433
    Tyler

    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.

    #1000458
    Tom
    Lead Developer
    Lead Developer

    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! 🙂

    #1001229
    Tyler

    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?

    #1001243
    Leo
    Staff
    Customer Support

    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.

    #1001249
    Tyler

    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; }
    #1001254
    Leo
    Staff
    Customer Support

    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?

    #1001255
    Tyler

    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.

    #1001593
    David
    Staff
    Customer Support

    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.

    #1001694
    Tyler

    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

    #1001858
    Leo
    Staff
    Customer Support

    Would this CSS work for you?

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

    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

    #1001935
    Leo
    Staff
    Customer Support

    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;
    }
Viewing 15 posts - 1 through 15 (of 15 total)
  • You must be logged in to reply to this topic.