Asset Management

The frontend assets for grouprise are compiled during build time. If you want to use additional assets you can add them via the theming mechanism (overriding templates).

Adjusting CSP directives

If you add new assets (e.g. scripts or styles) to your setup, you have to check your CSP setup. See the Django-CSP documentation for all options.

See grouprise‘s CSP-related settings.

Templates

You may override any grouprise template.

In deb-based deployments, you may place templates below /etc/grouprise/templates/.

Alternatively you may specify alternative locations for templates:

template_directories:
    - /opt/grouprise-templates/

Adding Scripts or Stylesheets

Configure additional scripts or CSS files

See grouprise‘s relevant settings:

• scripts

• stylesheets

Manually override HTML head content via templates

The following procedure (overriding templates) is necessary only under very rare circumstances. Take a look at scripts, stylesheets or the CSP settings mentioned above.

If you want to add more than just scripts or CSS files, then you should override the header file core/_head.html. By default, grouprise ships an empty file with that name. Just add a file core/_head.html to your local template directory (by default: /etc/grouprise/templates/) and add local stylesheet and link definitions to that file. Don‘t forget to adjust the CSP directives as described in the previous section.

Take a look at the next section about style variables to learn about easy style overrides with CSS variables.

Style Variables

To ease the process of overriding styles, grouprise supports CSS variables where applicable. CSS variables are a nice thing because with a single rule you can override a setting on the entire platform. Please mind that support for these type of variables is a browser feature and rather new, so you may still want to override individual styles depending on your target audience.

Supported Variables

The following variables are supported:

--color-primary : used throughout the platform as brand color. determines the appearance of links, buttons, focus rings, etc.

-color-primary-dark : used for active states where --color-primary is used. if you override --color-primary you want to override this variable.

CSS Example

:root {
    --color-primary: red;
    --color-primary-dark: crimson;
}