Update Ignores Gravity Forms CSS

Support
#1

Hi there,

I have a gravity form as my contact page with custom CSS, mostly related to fonts. I’ve placed the CSS in both x theme options global and also in the page CSS, but it does not seem to work.

Link: http://contagiousevents.net/get-in-touch/

How it should look: https://web.archive.org/web/20161222110002/http://contagiousevents.net/get-in-touch/

#2

Hi There,

Please try adding the !important to your custom CSS:

body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=text], 
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=email], 
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=password], 
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=url], 
body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=tel] {
    margin-top: 4px !important;
    border-top: none;
    border-right: none;
    border-bottom: 1px dashed #c2c2c2;
    border-left: none;
    background-color: #fff;
    width: 98%;
    height: auto!important;
    max-height: 2em!important;
    line-height: 1.5!important;
    box-shadow: none!important;
    font-family: 'Just Me Again Down Here',cursive !important;
    font-size: 26px !important;
    color: #000;
    position: relative;
    top: -10px;
}

Hope that helps and thank you for understanding.

#3

that does not work. super frustrated that an update provided by X is what caused this, I don’t really agree with the added note that custom coding is outside the scope of support - I’m not asking you to code, I’m asking why the update that was provided overrides the custom code that I already had a third party developer create and install.

#4

Hello @ContagiousEvents,

Thanks for updating the thread.

I took a look at your website and can see that the code is already present but it’s getting overridden. I can also see that you are using CDN on the website. My first recommendation would be to clear cache and see how it goes. In case problem is still there, please replace previous code that you have added with following:

body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=text], body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=email], body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=password], body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=url], body .gform_wrapper form.madlibform .gfield.madlibstyle input[type=tel] {
    margin-top: 4px !important;
    border-top: none !important;
    border-right: none !important;
    border-bottom: 1px dashed #c2c2c2 !important;
    border-left: none !important;
    background-color: #fff !important;
    width: 98% !important;
    height: 0!important;
    height: auto!important;
    max-height: 2em!important;
    line-height: 1.5!important;
    box-shadow: none!important;
    font-family: 'Just Me Again Down Here',cursive !important;
    font-size: 26px !important;
    color: #000 !important;
    position: relative !important;
    top: -10px !important;
}

Let us know how it goes.

Thanks.

#5

I also would like to know how to disable your styles so that the Gravity form styles work. I dont think that going through all the styles and adding !important is a realistic solution.

#6

Also now looking at the code, looks like gform already has added !important, and they still do not work.

X Theme overriding gravity forms styler
#7

Hi There @jsowers897

In that case, first you will need to setup a child theme and activate it by following our guide here (https://theme.co/apex/forum/t/setup-how-to-setup-child-themes/57).

Then try adding the following code into your child theme’s functions.php file.

add_action( 'wp_enqueue_scripts', 'remove_gf_stylesheet', 9999999999 );
function remove_gf_stylesheet() {
   wp_dequeue_style( 'x-gravity-forms' );
   wp_deregister_style( 'x-gravity-forms' );
}

Hope that helps.

Gravity form button displaying incorrectly
Gravity Form message "This element could not register due to invalid mark up
#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.