Customize Commentail with CSS

Lesson 12 / 22 · Commentail 1.3.2

The widget inherits its container's font and text color and has a transparent background. First inspect the default result in the site's real light and dark themes. Commentail does not discover arbitrary host variables such as --brand-link; map them explicitly.

Add an override stylesheet

Create static/css/commentail-custom.css in a host app. Load it after the package stylesheet in the base template:

{% load static commentail_tags %}
{% commentail_css %}
<link rel="stylesheet" href="{% static 'css/commentail-custom.css' %}">
{% commentail_js %}

Keep one copy of each resource tag. Add:

.commentail {
  --commentail-color-accent: var(--brand-link, #245a86);
  --commentail-border-radius: .5rem;
  --commentail-avatar-size: 2.25rem;
  --commentail-max-width: 100%;
  --commentail-input-max-height: 20rem;
  --commentail-color-button-surface: #245a86;
  --commentail-color-button-text: #fff;
  --commentail-color-button-hover: #183f5d;
}
.commentail .commentail-date { font-size: .875em; }
[data-theme="dark"] .commentail {
  --commentail-color-accent: #a7d4ff;
  --commentail-color-button-surface: #a7d4ff;
  --commentail-color-button-text: #102638;
  --commentail-color-button-hover: #c8e5ff;
}

[data-theme="dark"] is an example host theme selector. Replace it with the site's actual mechanism, such as .dark on <body>.

Set both background and foreground for filled buttons to maintain contrast. --commentail-max-width: 100% replaces the default 48rem limit with the host container's width.

Choose the right variables

Copy each complete name, including the --commentail- prefix. See the versioned styling reference for defaults.

Scope selectors under .commentail to avoid changing Wagtail or unrelated forms. Broad rules such as button { ... !important } can override your intended styling. Structural HTML changes belong to the next lesson.

Inspect the result

In production collect static files using the host procedure and refresh cached CSS. Check the result:

• Forms and long messages fit the container on narrow screens.
• Buttons and CAPTCHA errors remain readable in both themes.
• Keyboard focus stays visible when pressing Tab.
• Menus, expanded replies and the editor open and remain readable.

Confirmation and unsubscribe screens are separate documents; the article stylesheet does not automatically reach them. The next lesson customizes commentail/base.html. Their background and shadow use --commentail-document-background and --commentail-document-shadow.

Related lessons

• 13. Override templates and action pages
• 14. Customize email wording and appearance

Related documentation

• Styling
• Templates