Inline CSS / Specificity

Hey,
An option to build a CSS file is something I’m considering. At the moment though there is no built-in setting for this.

You can unhook the themes customizer CSS output and either build your own or copy the HTML from the source, add it to a CSS file and then unhook the theme from building any CSS but that would cause issues if you ever make changes in the customizer. Also, there are parts of that CSS that are loaded only for specific pages so to be clear I do not suggest you do this, just trying to relay that you can.

In terms of specificity, you can change the time at which your css loads in the head, for example, move your child css lower in the head after the custom css and your child will override the customizer css. But I should be clear generally a child theme wouldn’t overide settings if you wanted to override settings you can just change the setting if that makes sense.

Is that a clear response, I’m not entirely sure what specific css you are referring to but with details I would be happy to offer some suggestions, you certainly don’t need to use !important to have your child theme css apply.

Ben

Hello Ben,

Thank you for reaching out.

Since I can’t put here screenshots, please check this facebook group post: https://www.facebook.com/groups/webcreatorcommunity/permalink/2741245539428984.

There you can see some details.

I’ve moved the child theme css file to be the last in the header with this:

/**
* Enqueue child styles.
**/
function child_enqueue_styles() {
wp_enqueue_style( ‘child-theme’, get_stylesheet_directory_uri() . ‘/style.css’, array() );
}
add_action( ‘wp_enqueue_scripts’, ‘child_enqueue_styles’ , 1000 );

The problem with the inline head css styles is for example if I want to override this line:

.transparent-header .header-navigation .header-menu-container > ul > li > a

I will need to add another class, id or html tag to that line to override it or use !important.

If my css file will be the last that loads on the page or if the css will not be in the head as inline css and I can control a little those things, then it’s enough to use that line: .transparent-header .header-navigation .header-menu-container > ul > li > a

and just override what I need.

Hope I explained well.

Hey,
Well let me try and explain why, usually if you want to override the transparent header navigation colors, font, etc you would do it from the theme customizer options. If your main theme or child theme CSS overrode it you would prevent the theme customizer options from working and that would appear like things are broken.

So hopefully that makes sense why out of the box this doesn’t work the way you want.

However you can certainly enqueue your child theme later in the head.

For example, change your function to this:

/**
* Enqueue child styles.
**/
function child_enqueue_styles() {
wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array() );
wp_print_styles( 'child-theme' );
}
add_action( 'wp_head', 'child_enqueue_styles', 90 );

I hope that helps!

Ben

• This reply was modified 4 years, 1 month ago by Ben Ritner - Kadence WP. Reason: Fix, add print styles

Hello Ben,

Thank you again for your response!

There are many things that in customizer I can’t do, that’s why I need to write CSS. I solved it somehow by moving my css file later in the head, that way, I don’t have specificity problems anymore.

But it will also be a good thing for the theme to not “create” css, only in an external css.

Anyway, thank you for you time and effort.

BTW, good job on the product = Kadence!