-
Posts
-
Dear Enfold Team,
we are using your theme (which we like a lot!) for a lot of projects where we need to heavily customize the look of the theme with custom CSS. What I find somewhat unpleasant is the fact that I quite often have to use “!important” in order to make it work. We work with child themes and in a child theme (as suggested in the documentation) I use the following code to enqueue my custom styles:
function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/assets/css/my_custom.css', array('parent-style') ); } add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );This makes the custom styles load after the parent styles but still I quite often need to use !important.
Is there another, better way to overwrite Enfolds CSS ?Thanks in advance and best regards
MichaelHi Michael,
Could you try to add priority to the action to see if that helps?
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 1);https://developer.wordpress.org/reference/functions/add_action/
Best regards,
RikardHi Rikard,
unfortunately this does not further change the CSS-files loading sequence. The last file that gets loaded is still this:
…../wp-content/uploads/dynamic_avia/avia-merged-styles-501f16d17bc2b13f38ded347de9cb817.css
The name implies its a merged CSS-file but my custom styles are not in it. Might this be the problem?Best regards
MichaelHi Michael,
You can use styles.css in the child theme, but for the changed to be seen you need to save theme options and the styles.css will be merged into the /wp-content/uploads/dynamic_avia/avia-merged-styles-501f16d17bc2b13f38ded347de9cb817.css file. Or disable merging until you’re done with all the customizations.
Best regards,
VictoriaHi Victoria,
thanks for your reply but this is not the problem. My styles do not get merged in that file but get overwritten by it like it seems. I just think it would be nice if the custom styles in a child theme would always take effect which they would if they would be last in the loading sequence. If you look around in the forums here a lot of the CSS solutions heavily rely on “!important” statements which I (with some necessary exceptions) see as bad practice.
What would be the effect if I disable merging and where can I do that. Would not the same effect (overwrite) take place once I enable the merge again?Thank you and best regards
MichaelHi Michael,
Regarding your issues with your custom styles not in the merged css files, you may need flush out the cache or clear the browser cache so the newer css is fetched.
As for the !important statement, another workaround for it is to make the weight of your selector heavier.
Hope this helps.Best regards,
NikkoHi Nikko,
yes of course I can always add weight/specificity to my CSS but it would be more convenient if I could just target classes and overwrite as you would expect. I did some research in the forums and found these two things:
new-minify-merging-for-css-and-js-avia-merged-styles-problem
Here is another user experiencing the same problems and you also point him towards higher CSS weight.
But this here seem to lead more in the direction of a solution I am looking for:
add-style-css-from-child-to-merge-files
The code provided to disable the merge however does not seem to work anymore in Enfold 4.4.1. I also tested the de-enqueue and re-enqueues approach (which indeed makes the child theme styles CSS load last in the sequence) but this then creates other CSS problems with some missing styles (which I have not tried fixing yet) – maybe this is what you have been pointing towards in the first linked post (see above). So I do not have the solution yet but I feel this leads in the right direction.
Just wanted to post the research, if you have any thoughts or suggestions, I would be thankful.Best regards
MichaelHi Michael,
Yes, you’re right you don’t need to use that code anymore in the 2nd link since a backend option has been created in Enfold > Performance.
Also it seems to me that you have great knowledge in css, have you tried to use a web inspector? like firebug or chrome web inspector, since you mentioned that it is overwritten it would be hard to figure out what is overriding it if the css are merged, so try disabling CSS file merging and compression and inspect your frontend and check out if it’s some css file or probably css generated by the theme in theme options, that would give you an idea how to approach the issue. If you’re having a hard time, please give us a link to a page in your site and also the css code you’re trying to use which is overriden and we’ll try to help you with it.Best regards,
NikkoHi Nikko,
I now tested disabling the CSS merge and the result is a different CSS behavior (similar to the forcefully enqueueing custom styles at the end of the loading sequence after the merged file). It does not solve the issue with the “!important” statements but some styles seem to change. So it seems like merging does affect the CSS styling which it should not do i guess.
Best regards
MichaelHi Michael,
I apologize for the late response.
While I do think the same that merging shouldn’t change how it looks however I couldn’t produce the same results on my end.
I’m not really sure what approach to take but probably since you have disabled the merging of css, you should be able to see what overrides that style you made, you should be able to know the best selector to use in order for it not to be overriden by other css styles.Best regards,
Nikko
- You must be logged in to reply to this topic.