Basic Custom.CSS Custom.CSS does not do anything

Support
1

New User

Quick Review:
I place a custom custom.css in the css directory for my custom theme (just a demo custom mytheme to test)

Yet, nothing in the custom.css seems to ever apply to the site. How do you get a custom.css to apply in an inherited theme?

What I Have Done:
I have read the few posts on this topic and carefully reviewed the documentation. https://learn.getgrav.org/17/themes/customization

This is a new GRAV install and installed locally using a docker container. I can edit files and make a logo change for example so the inherited theme is working. The only manual change is adding the images/logo directory in the custom theme.

My directory structure is:

user/
    themes/
         mytheme/
              css/

The mytheme was setup using the developer tools per https://learn.getgrav.org/17/themes/customization. It is an inherited theme from Quark to test customization.

The mytheme applies and is active.
I have done a full cache clearance multiple times (everything cleared ) from the admin.
I have re-booted etc.

Yet, nothing that I place in custom.css seems to apply.

Sample in custom.css

.notices.green {
    background-color: #eee600 ; /* Green NO MAKE THIS YELLOW TO TEST*/
    color: #ffffff; /* White text */
    border: 10px solid #006400; /* Dark green border */
}

Here, I am just testing and setting the notices green attributes to yellow so I can immediately see if this is working.

Nothing. Clear caches. Restart GRAV server. Verify custom theme is active and working. Nothing.

2

You have to set the priority of your custom css to be loaded before others.

Take a look at

3

Could you try overriding some CSS that actually comes from Quark and not from plugin://markdown-notices/assets/notices.css?

4

Thank you @pmoreno and @Karmalakas.

I am new to GRAV but have done some research.

I don’t think I tried to override a plugin CSS as far as I know. The test CSS was from the default Typography page displayed in a new GRAV install.

<div class="notices green">
<p>This is a success notification</p>

I tried to keep this testing as simple as possible just to test GRAV and the customization capabilties.

I also tried the sample override described on the Customization page of:

body a {
    color: #CC0000;
}

Taken from https://learn.getgrav.org/17/themes/customization.

This also does not work.

I also looked at the suggested Asset Manager but am very confused how this relates to the simple custom.css override described at Customization. The Asset Manager docs seem to suggest that the Customization descriptions are wrong or incomplete. (Not being mean or critical, just puzzled.)

The Customization suggests overriding the css is merely dropping text into the themes css/custom.css. But the Asset Manager seems to suggest a far more complicated effort to do a simple (as in my simple test) override.

Even when I tried to follow the Asset Manager docs, I still do not see any override. I copy the base.html.twig from the parent theme to my theme in the same directory structure mytheme/templates/partials/base.html.twig and then change:

{% block stylesheets %}
    {% do assets.addCss('theme://css-compiled/spectre'~compress) %}
    {% if theme_var('spectre.exp') %}{% do assets.addCss('theme://css-compiled/spectre-exp'>
    {% if theme_var('spectre.icons') %}{%  do assets.addCss('theme://css-compiled/spectre-i>
    {% do assets.addCss('theme://css-compiled/theme'~compress) %}
    {% do assets.addCss('theme://css/custom.css', {priority:200, position:before}) %}
    {% do assets.addCss('theme://css/all.min.css', 100) %}
    {% do assets.addCss('theme://css/line-awesome.min.css', 100) %}
{% endblock %}

The core part is my change to: {% do assets.addCss('theme://css/custom.css', {priority:200, position:before}) %}

NOTE: I tried just adding just a , 200 and then the {priority:200, position:before} syntax. The docs suggest that higher numbers load earlier priority. None worked.

I am at a loss. The Customization seems to suggests a simple override. But Asset Manager seems far more complex (and did not work for me).

Any other suggestions?

5

The priority of your custom.css file is backwards. A low priority number means it will load before one with a higher number.
I would change the 200 to a 10, for example, and see what happens. Clear the Grav and browser caches and try again. (The position in this case I think is not important)

1 Like
6
  • Created a new theme using inheritance with Quark as a parent (bin/plugin devtools new-theme)
  • Added custom.css to my new theme
  • Activated the new theme

image
image1805×1239 261 KB

:man_shrugging:

7

@Shannon, you marked my reply as a solution, but never clarified what was the problem. Did you figure it out?