Override Gravity Forms CSS

Hi,

I do love the styling that Pro offers to Gravity Forms.
But on some occasions I’m trying to override it and I’m having some troubles doing so.

I created a child-theme with some stylesheets. I’m including a custom stylesheet for Gravity Forms:

function theme_wp_enqueue_style() 
{
	wp_enqueue_style( 'tpgrf_woocommerce', get_stylesheet_directory_uri() . '/css/site/woocommerce.css');
	wp_enqueue_style( 'tpgrf_gravity_forms', get_stylesheet_directory_uri() . '/css/site/gravity_forms.css');
}
add_action( 'wp_enqueue_scripts', 'theme_wp_enqueue_style' );

In my gravity_forms.css file I’m trying to override some of the styles.
On occasions were the style of an element has not been declared by Pro, everything works fine. But when Pro DOES has declared a styling, I can’t seem to override it.

For example, the following doesn’t work:

.gform_wrapper li.gfield{
	margin-bottom:2em !important;
}

As you can see here:

So my question comes down to: how could I use the great styling included in Pro but override some of the styling definitions in a custom file included in a child-theme?

Hello There,

Thanks for posting in! Please be advised that we have also our own built in gravity form css file in the theme. You must remove it first before you can enqueue your own file. Please have your code updated and use this instead:

function theme_wp_enqueue_style() 
{
        wp_dequeue_style( 'x-gravity-forms' );
	wp_enqueue_style( 'tpgrf_woocommerce', get_stylesheet_directory_uri() . '/css/site/woocommerce.css');
	wp_enqueue_style( 'tpgrf_gravity_forms', get_stylesheet_directory_uri() . '/css/site/gravity_forms.css');
}
add_action( 'wp_enqueue_scripts', 'theme_wp_enqueue_style', 90 );

Hope this helps.

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