Make child theme's style.css have priority over Theme Options styles

[marketfresh]

Is there a way for the child theme’s style.css to take priority over the Theme Options generated css.
I don’t want to use !important in the style.css and I don’t always want to add the CSS within PRO editor CSS area.

I see that the Theme Options css is loaded inline which I think will make my request difficult, but I was wondering if there was a way.

Thanks.

[nabeel]

Hi Jonathan,

Thank you for reaching out to us. The Theme Options CSS is indeed loaded inline so you cannot override it without using !important rule. Inline style is at the top of the heap, so it will override any rule defined anywhere unless you add !important rule, which will override the inline style. Here’s an article you can refer to for more details https://css-tricks.com/override-inline-styles-with-css/ also see http://www.standardista.com/css3/css-specificity/

The bottom line is, you must use the !important rule to override the inline CSS. Hope this helps!

[marketfresh]

I would argue that the child theme’s style.css should take priority over the Theme Options styles.
If there isn’t already a feature request to make this happen by loading the Theme Options styles in an external CSS file, can we make it a feature request?

Thanks!

[nabeel]

Hey Jonathan,

We already had the discussion about this over here https://theme.co/apex/forum/t/how-to-add-css-to-style-css-instead-of-inline/30806/10 As our lead developer mentioned that this isn’t possible regretfully, If you want to override theme options CSS, it must be done in the Global CSS which will override the Theme Options settings.

Hope this helps!