Manage to get it displayed and all css code is there but don’t seem to work on the site as it do in the global css (inlined)
Hello @bracas,
Thanks for asking. 
I watched the video you have shared. Can you please share website login details (url/username/password) in a secure note for us to take a closer look?
Thanks.
What on the CMS do you need to look at We have deleted it from the style.css since it didn’t work. And we do not give access to plugin section for disable plugins. We do only lock you to what really necessary and for safety reasons. So you need access to css and pro? Pro do still not have the feature to let non admins have access to full pro library. But you can still go though the deep created wordpress global css.
Let me know and we can arrange this on Saturday, when I have time to overwatch.
Hello There,
Thanks for the updates.
Please review the styling hierarchy being applied to the site. This is the order:
- Stack styles
- Child theme’s style.css
- Theme Option settings
- WordPress Additional CSS in the customizer (https://codex.wordpress.org/CSS)
- Global CSS in Theme Options
- Custom CSS in Cornerstone/Pro Editor
So if you have added your custom css in the child theme’s style.css, in most case, it is being overridden with the other styles elsewhere. I would highly recommend that when you add a custom css in the child theme, you must add an additional selector to force it to be applied to the element or section. For example, instead of this:
element {
// your styling
}
You will have to use this:
.x-child-theme-active element {
// your styling
}
And if you have this kind of css;
body element {
// your styling
}
You will have to replace it with this kind of code instead:
body.x-child-theme-active element {
// your styling
}
These codes are just examples to help you understand how a custom css in the child theme prevents from being overridden by any other code else where.
Hope this make sense.
It does but why doesn’t you just let the child theme always override? Like child themes function.php and other files works. “If some rules is here we listen to these, if not listen to parent.”
By applying your rule above is a lot of work and neither convenient nor good UX for the webmasters.
Hey @bracas,
It is because of CSS Precedence. The Theme Option outputs or generates style related settings as Inline or Internal CSS and that takes precedence over external stylesheets like in the case of style.css.
The child theme’s style.css will actually override the parent’s stack CSS. Your CSS just won’t work in style.css because you’re mostly overriding generated styles which is outputted as inline styles.
If you don’t want to apply CSS specificity in order to override precedence, you would need to put your CSS that overrides theme styles in Global CSS or Content CSS. That way, your customs CSS would be loaded after the generated styles thus taking precedence.
Hope that helps.
That’s really a hassle to style without inline it through global tab then. That can’t be good web standard, I expect it to be easy at the same time I don’t want to load it it into the inline source code. I want it to be loaded by one css file.
And a css file like that should be able to override what ever if you just tell the theme and wordpress to listen to it in it’s core.
It seems like you may full fill the user intent for more non developer users that do not use customized css. Since I never heard it should be this hard to do it with a file instead of inlining it.
Maybe I’m, wrong but we never inline any customized code in html. It’s only the global which inline. Which is bad for web standard and performance.
I think you can do it much smarter so ping your developer team to look into a solution where style.css overrides theme whatever theme css it is. If users can screw things up here they should not even be playing with css.
I’ll post your feedback as a feature request. For now, try using the code below in your child’s functions.php to load the child’s style.css to the footer. I’ve tested it and it overpowers the generated styles. It does not remove the style.css in the header though so it’s loaded twice. To remove the child’s style.css in the header, remove the add_filter( 'x_enqueue_parent_stylesheet', '__return_true' ); line in your functions.php.
Just note that this is considered a hack and will not be supported in case it breaks something in your site.
add_action( 'get_footer', 'child_style_in_footer' );
function child_style_in_footer() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
Thanks.
Hey there,
Just wanted to chime in regarding the feature request to load the child theme styles after the generated CSS. This isn’t possible for a few reasons. The base and child styles are loaded right after each other in the wp_enqueue_scripts hook. There isn’t a good way to place an inline style tag in-between the link to request those stylesheets. Another reason is that because it’s always been done this way making any change now would cause existing sites to break after updating.
If you need different precedence, it’d be best to place your CSS in the Custom CSS from Theme Options.
Cheers, will have a look at that!
Yes understood!
hmm I do understand that but with a custom php row it might be possible for the user who want it in another order?
I mean if no code is in the child style.css then it will take second and then third etc. And that would not break the site?
Why can’t this work such as the child functions.php works?
And how should a user that want to use a style file like style.css do when he/she does not want to use inline css in the global theme options? Important; should not be used as long as you don’t know what you do. I try to prevent it but if I use I know what it can cause issues etc without not knowing what rule overrides which rule etc.
How should my style.css always be the first in line if what you say is not possible to do. I have a few other answers in the thread but still can’t get too many explanations
Tried, first I could not find any any of the functions.php which one should this one be located in?
add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ ); line in your functions.php.
It seems to work for most but not all. Buttons wont change if they have their own class to style them. Even some elements which had background color from the page builder suddenly changed. Not that those previously had any custom styling in the CSS.
Hi there,
As our lead developer explained it is not possible to have a robust complete solution on the matter for the reason he mentioned.
We are sorry but you have Theme Options at hand if you want a true way of overriding the generated CSS code of the elements.
Thank you.
I get that but is there a plugin I can use to add the css into that will be in the first order of the CSS and have a styleshet link instead of inline.
It’s an much better web standard to use than inline css.
Hi there,
It’s a custom one and loaded through enqueue, hence, you’ll have to make it the same if you wish to move all inline CSS. But that’s a lot of work as that CSS file are static compared to dynamically inline generated CSS. Hence, the inline CSS is enabled from time to time every time he make changes and that’s because he needs to copy the final CSS that he’ll add to custom.css.
Thanks!
Yes that I know, but then you work in inline but go live with the static stylesheet css file.
How do we archive custom one loaded through enqueue?
Hi bracas,
If your question is how to auto-generate static custom CSS file and enqueue it based on the rules added in (Theme Options > CSS) every time you add a custom code there, or even include the elements CSS rules generated into that file as well, then that will require further theme development/modification that is beyond our support scope.
Thanks for understanding.
No I just want to have a style.css file that works. I meant i can do my realtime design in inline to see that the code works. then I add it into the style.css.
Hello There,
This is the hierarchy of the styles applied to the page.
- Stack style.css (or parent style.css)
- Child Theme’s style.css
- WordPress Additional CSS
- Theme Option settings
- Theme Option’s Global custom css
- Cornerstone’s custom css
If you put a css in the child theme’s style.css, please make sure that it has !important in it like color: white !important; so that it will force the element styling to be applied and prevent it from being overridden by the Theme Option settings. Another way of forcing a css style added in the child theme is that you must make use of the CSS Specifity. Instead of having a css like this:
element {
// some styling here
}
body element {
// some styling here
}
.class element {
// some styling here
}
You can make use of this:
.x-child-theme-active element {
// some styling here
}
body.x-child-theme-active element {
// some styling here
}
.x-child-theme-active .class element {
// some styling here
}
This should be enough to force all the styling in the child theme to be implemented and avoid the Theme Option or any other css to override it. For more details about CSS Specificity, please check this out:
Hope this explains it briefly.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.