![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
-
AuthorPosts
-
June 11, 2019 at 6:53 pm #1109243
Enfold has several ways to customize CSS. Such a versatile theme, but it is all getting confusing.
— General Styling > Quick CSS
— Theme Editor > style.css
— Customize > Additional CSS
— CSS Hero, if installedIs there one CSS to rule them all? Which is parsed first? Which outranks the other?
Can someone please list/rank these in priority.
June 12, 2019 at 6:39 am #1109376Hey Nicole,
The first two options are from the theme, there two last ones are not. If you are using file compression under Enfold->Performance then all your CSS should be included in the same file, so it shouldn’t make any difference where you put it. It’s up to you really.
Best regards,
RikardJune 12, 2019 at 9:20 pm #1109606Indicating which are “from the theme” and which are “not from the theme” doesn’t help indicate hierarchy. I’ve read several places to keep “Enfold Theme Options > Performance > JS & CSS file merging and compression” turned off while developing the site.
Then, another Moderator, Mike, wrote this
“If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”
Here https://kriesi.at/support/topic/column-colors-dont-change/
Now, totally confused and would imagine others are too who use the theme. Would appreciate a ranking of these as to employ best-practices on Enfold, or any other approaches.
— General Styling > Quick CSS
— Theme Editor > style.css
— Customize > Additional CSS
— CSS Hero, if installedJune 13, 2019 at 7:22 pm #1110000Hi stanbrid,
The css rules application comes down to the specificity of the selector and so if the plugins selector will be more specific it will apply.
You just need to pick one place where you’ll put all your css. It can be Quick css or styles.css in the child theme. As mentioned above, the merging should be turned on when all the changes are made.
Best regards,
VictoriaJune 19, 2019 at 6:26 pm #1111655What does “the specificity of the selector” mean?
Maybe the question can’t be answered: please rank them. Or, maybe developers can help?
There are also statements otherwise – that css placement does matter – in responses from other moderators on other questions. I’ve read that the styles.css has precedence over the Quick CSS. And then some settings matter.
Then it appears toggling on/off the setting | CSS file merging and compression | does have an impact as well per this support response. …here by Mike (Moderator).
And another: “I disabled this setting in Performance -> CSS file merging and compression and now I see the custom.css file as the source file.”
And here: “If you are using a child theme, typically when css is added to the child theme style.css and the css merging is on in the Enfold Theme Options > Performance > JS & CSS file merging and compression the merged file needs to be re-built by saving the theme options again. Sometimes the big blue button “save all changes” is not available to click, so try adding a blank space to the Quick CSS to active the button.”
And here “Often if someone adds css into their child theme style.css via WordPress > Appearance > Editor > Child Theme > Stylesheet and then checks their site it seems that the css is not working, this is because adding the css this way doesn’t rebuild the merged files to add the new css. by Victoria (Moderator).
I can’t be the only one confused by all of this, struggling with css, and wanting to use “best-practice” for Enfold. Would appreciate some clarity on it all. Steps or settings for best-practices, i.e, only add css here, turn this setting on, keep this off, hit the blue button when…?
Tks
-
This reply was modified 5 years, 2 months ago by
Jen.
June 21, 2019 at 8:34 pm #1112407Hi stanbrid,
The best practice, as for me, is to use one place, like Quick css for example. When you’re making changes to css all the merging and minification has to be disabled, when happy with the result those features can be enabled.
Here is an article about the selector specificity for you
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/Hope this helps.
Best regards,
Victoria -
This reply was modified 5 years, 2 months ago by
-
AuthorPosts
- The topic ‘Priority / Hierarchy: Quick CSS vs. style.css vs. Additional CSS vs. CSS Hero’ is closed to new replies.