Custom CSS rules from admin

[kilichenko-pixida]

We've integrated the subsites into thuenen, on the branch subsite_holisoils.

We were able to apply CSS styles from e.g. at geonode/templates/subsites/holisoils/geonode-mapstore-client/snippets/custom_theme.html, however, when we tried doing it directly from the admin panel (from the subsite theme settings, "Custom CSS rules" field), they don't seem to apply.

We've been just adding
.msgapi .gn-theme { --gn-main-color: #000000; --gn-main-bg: #ffffff; ... }
which works when used in custom_theme.html, but not when applied from admin.

Perhaps there is a special trick to it? How should it be done?

[allyoucanmap]

@kilichenko-pixida in your subsite you override the custom_theme.html and removed the injected theme from admin (see this part in geonode-mapstore-client).
I think you could remove the custom_theme.html snippet from your subsite if you are using the admin panel so it will use the default one. If you want to keep the custom_theme.html snippet you need to extend the snippet and not override it:

{% extends "geonode-mapstore-client/snippets/custom_theme.html" %}
{% block content %}
<style>
    /* copy here the rules provided in dark theme variables file */
</style>
{% endblock %}

With extends you will keep the other existing blocks in the snippet

[kilichenko-pixida]

@allyoucanmap thank you for the answer

Could you please give me an example how would the contents of the "Custom CSS rules" look like in either case? For exmaple if I only wanted to apply the following : .msgapi .gn-theme { --gn-main-color: #000000; }

I tried both removing custom_theme.html and adding the styles like here, but still didn't get any changes to apply.

[allyoucanmap]

@kilichenko-pixida in the docs for geonode-mapstore-client there is a tool Theme variables generator to generate a theme:

the generate style uses :root as selector, maybe this will work :root { --gn-main-color: #000000; }

[kilichenko-pixida]

@allyoucanmap

Tried both
`{% extends "geonode-mapstore-client/snippets/custom_theme.html" %}
{% block content %}

<style> :root { ... } </style>

{% endblock %}`

and just
:root { ... }

both with and without the custom_theme.html overwritten. No result unfortunately

[ridoo]

@kilichenko-pixida could you try it without extending, but embedding the custom_theme.extra_css context. In the ./templates/subsites/geonode-mapstore-client/snippets/custom_theme.html:

<style>
  .msgapi .gn-theme {
     /* keep default styling */
  }
</style> 
    
<style>
  {{ custom_theme.extra_css }}
</style>

Then, put the following in the custom css rules form of subsite's theme:

.msgapi .gn-theme {
  --gn-button-primary-bg: #ff0000;
}

[kilichenko-pixida]

@ridoo

That worked!

[ridoo]

@allyoucanmap Thanks for the pointer of the missing custom_theme.extra_css block!

I just played around with it and it seemed the last rules defined win. Wouldn't it be better to place the custom css block under the actual content block to ensure overriding via extra rules take effect? Not sure, if this was the actual problem here, though

[allyoucanmap]

@ridoo @kilichenko-pixida in case you need to overrides rules the order matter but in CSS we could also use a specific selector to give priority to the variables. Usually when making theme in geonode, we are applying the :root selector for the main theme and then we overrides part with a more specific selector like .msgapi .gn-theme so it should work also with (not tested yet locally):

{% extends "geonode-mapstore-client/snippets/custom_theme.html" %}
{% block content %}
<style>
    :root {
       /* theme here */
       --gn-button-primary-bg: #00ff00;
       /* ... other variables */
    }
</style>
{% endblock %}

and then use .msgapi .gn-theme in the panel admin:

.msgapi .gn-theme {
  --gn-button-primary-bg: #ff0000;
}

[ridoo]

TIL :root is an actual CSS selector 😄 Somehow, I thought it would be some Django thing. Good to know. You are right .. organizing the css selectors that way would not require any change upstream. Thanks for sharing.