X and Pro Parent CSS Priority

[mattmintun]

Hey guys, I know I can use styles that are more specific like instead of “lss” I can use “body .x-text .lss” to “win” the Cascade battle. However I have about 1000 lines of CSS that I’ve written in Pro Theme Options and want to move to main.css which I’m enqueuing in my child functions.php file. I want to give it a priority just over what the parent theme priority is, but I don’t know what it is. I’ve tried “15” but the parent styles are still taking over. Even tried “150”.

function main_stylesheet() {
  wp_enqueue_style('main_stylesheet', get_stylesheet_directory_uri().'/css/main.css',array(),'1.0.6');
}
add_action('wp_enqueue_scripts', 'main_stylesheet', 150);

[ruenel]

Hello There,

Thanks for writing in! Please keep in mind that the smaller the number, the more priority is the function. In your case, it is still not taking effect because of the style hierarchy. This is the order of the styles being loaded in the theme:

Stack style (theme's stack style)
Child theme style
WordPress Additional CSS
Theme Option Settings
Theme options's custom css
Cornerstone page custom css

Your main.css must be loaded last among the others. Please modify the code and use this:

function main_stylesheet() {
  wp_enqueue_style('main_stylesheet', get_stylesheet_directory_uri().'/css/main.css',array(),'1.0.6');
}
add_action('wp_header', 'main_stylesheet', 150);

Hope this helps. Please let us know how it goes.

[mattmintun]

Thanks! That’s super helpful. I’ll give it a try and see if it works out.

[paul.r]

You’re welcome!

[mattmintun]

I have an edit for others who may use this:

function main_stylesheet() {
  wp_enqueue_style('main_stylesheet', get_stylesheet_directory_uri().'/css/main.css',array(),'1.0.8');
}
add_action('wp_head', 'main_stylesheet', 8);

wp_header is wrong, it should be “wp_head”. Also, the priority of “8” puts this into the body somehow under all the Pro theme CSS classes INCLUDING cornerstone-custom-page-css. This is an important distinction because it means that this stylesheet overwrites anything you have in your specific page CSS. I was hoping to get this style sheet between “x-generated-css” and “cornerstone-custom-page-css”, that way it takes precedence over the x generated css but the specific page CSS would overwrite this stylesheet.

Is it possible to inject this style sheet between these 2?

[ruenel]

Hello There,

You may update the code and use this instead:

function main_stylesheet() {
  wp_enqueue_style('main_stylesheet', get_stylesheet_directory_uri().'/css/main.css',array(),'1.0.8');
}
add_action('x_after_head_css', 'main_stylesheet', 8);

Please let us know how it goes.