Custom.css not working at all with default quark theme

Following the instructions in your documentation (https://learn.getgrav.org/17/themes/customization) I created public_html/user/themes/quark/css/custom.css

Did not work at all even though custom.css appears in the source code, and yes I tried clearing cache.

After spending almost an hour trying to get it to work I found that a custom css plugin exists, which actually does work.

Could someone please enlighten me why it wasn't working without the plugin?

Cheers.

@eurico,

Could someone please enlighten me why it wasn’t working without the plugin?

Only if you share exactly which steps you've taken...

When I follow the directions in section Custom CSS, it works out of the box without any plugin.

• Fresh install of the latest Grav
• Edit already existing file /user/themes/quark/css/custom.css and add:
  CSSCopy

  p {
  color: red;
  }
  

• Point the browser at the Grav site and all paragraphs are in red.

I did exactly what you did.

@eurico,

I did exactly what you did.

Starting with a fresh install of Grav? Or were their prior changes?

and yes I tried clearing cache

Which one? Grav's cache, or the browser's cache?

• Did you force the browser to refresh?
• If still not working, try to refresh the cache of Grav.
• Is file /user/themes/quark/css/custom.css loaded in the browser? Does it contain the correct styling?

Starting with a fresh install of Grav? Or were their prior changes?

Yes. I did EXACTLY what you did.

Which one? Grav’s cache, or the browser’s cache? Did you force the browser to refresh?

Yes. Also Cloudflare cache purged. Also tried different browsers.

If still not working, try to refresh the cache of Grav.

I already did. Didn't help.

Is file /user/themes/quark/css/custom.css loaded in the browser? Does it contain the correct styling?

Yes. And no, if it did it there would be no problem.

Anyway the plugin seems to do the job now, so I've moved on and am testing other things.

Have a great day!

@eurico, Have you tried loading your custom.css file with higher priority over other styles documents? For example:

{% do assets.addCss('theme://assets/css/custom.css', {'priority': 10}) %}