X Generated Customizer CSS

[WDWMagazine]

I’m not using the theme customizer at all to generate CSS but it’s overriding the custom CSS I’ve added to the child theme. How can I remove this properly so I don’t have to go through every line of my custom css and add !important …
thanks,

[ruenel]

Hello @TheDisneyDad,

Thanks for writing in!

Even if you are not using the Theme Customizer or Theme options, it is setting the theme’s default layout, width, color, background colors, font sizes, etc. It is overriding your custom css in the child theme because this is the order of the styles being loaded to your site:

• Theme’s stack style.css
• Child theme’s style.css
• WordPress custom css, Appearance > Customizer > Additional CSS
• Theme Option settings
• Theme Option’s custom css
• Cornerstone’s custom css

We do not recommend that you remove the generated css. What you need to do is to add a .x-child-theme-active to your custom css. So instead of having this:

.element {
   // your styling
}

You will have this:

.x-child-theme-active .element {
   // your styling
}

To force the styling to be implemented in your site. Off course adding !important; will also work but not the proper way of handling it.

Hope this helps.

[WDWMagazine]

Thanks for the quick reply and explanation.

If we follow your guidance and at some point change the theme, then customization will not be transferrable. We would then need to go through and remove the .x-child-theme-active class reference in our custom CSS, correct?

It just seems a strange approach to have custom CSS loaded before the theme. The whole point of custom CSS is to build upon the theme style, not the other way around.

[jade]

Hello @TheDisneyDad,

That is right, you will have to remove the .x-child-theme-active class in the selectors you have written since it is an X specific body class that is added to a page.

However, please note that adding the .x-child-theme-active is just a way to increase the level of specificity of your CSS selectors in the child theme’s CSS style. You may try changing it to body .element instead.

You may also provide us with the link to the site in question so that we can check and provide you with other suggestion as this might be something specific to your site.

Hope this helps.