Custom CSS applies when added to Formidable Custom CSS box, but not when I put it in my child theme style.css

Labels

This Discussion is public

Notifications

Hello! I am trying to keep the default Formidable Pro styling on, and just make some tweaks in my CSS.  I have a child theme, but I have tried it with the parent default WP TwentySeventeen theme too.  I've tried deactivating all plugins, clearing cache, etc...  It only seems to honor my customizations when I put it in the custom CSS box in the Formidable settings.

What I know:

1. The Formidable pro styling is turned on in general settings to "only load on applicable pages"

2. My code for enqueuing the child CSS and Child Form CSS:

// add child styles
function ag_theme_enqueue_styles() {
 $parent_style = 'parent-style';

wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
 wp_enqueue_style( 'forms-style',
 get_stylesheet_directory_uri() . '/style-form.css',
 array( $parent_style )
 );
}
add_action( 'wp_enqueue_scripts', 'ag_theme_enqueue_styles' );

I've tried adding my custom css to both the style.css and style-form.css, neither work.

3. I know that you can customize the style using the UI in the style tab, but for my purposes it's more efficient to have the styles in my child theme.

For example, adding the code: .with_frm_style .frm_form_field { clear:none; } to my style.css has no effect. But if I add the same code to the custom CSS box in Formidable Pro settings, it works. However, if I add more specificity to the target elements in my style.css, then it DOES honor them in my child theme's CSS. Is that something that needs to be done everytime?

Is it possible that the Formidable Pro CSS is getting loaded after my child theme's styles and therefore overwriting them? Should I be enqueuing my child style differently?

Appreciate any guidance anyone can provide! Thank You!

When you load style sheets in any website, WordPress or otherwise, the last style sheet loaded has the CSS priority, that is of course, unless you have inline styles that override the style sheets altogether. If your child theme's style sheet is loaded before Formidable's then Formidable's will override whatever you have in the child theme's style sheet. You have to adjust the priority in your add_action from its default of 10 to a higher value to ensure the child theme style sheets load after Formidable's. You'll have to experiment to find the higher value that works for your situation.

https://developer.wordpress.org/reference/functions/add_action/

Thank you very much for your reply! Looks like if I put anything higher than 10 for the priority, it doesn't load the parent css at all. I also tried creating a second wp_enqueue_scripts action and moved the form style to that one so I could try to give it a lower priority (went as far as 50), but that didn't work either - the formidable styles are still overriding mine.

I suppose I can just create a style using the Formidable style UI, then export it for use in most projects. thank you for your input though, I thought that would have done it!

Reply to this Discussion