Мои проекты

Настраиваем оформление Commentail через CSS

Автор: Алекс 24 октября 2026 г. Чтение: 2 минуты

Цвета, кнопки, аватары, размеры и тёмная тема без замены HTML форм.

Урок 12 / 22 · Commentail 1.3.2

Виджет наследует шрифт и цвет текста контейнера, а его фон прозрачен. Если сайт уже переключает тему, сначала посмотрите стандартное оформление в обеих темах. Commentail не угадывает имена ваших переменных вроде --brand-link: их нужно связать явно.

Создадим свой файл

В статической папке приложения создайте static/css/commentail-custom.css. Подключите его после CSS библиотеки в базовом шаблоне:

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

Ресурсные теги оставьте в одном экземпляре. Добавьте в новый CSS:

.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"] здесь пример механизма сайта. Если у вас класс .dark на <body>, измените селектор под него.

Для заполненной кнопки задаются и фон, и цвет текста; иначе одна из тем может сделать надпись нечитаемой. --commentail-max-width: 100% убирает штатное ограничение 48rem и использует ширину вашего контейнера.

Что можно менять

Что меняем	CSS-переменные
Текст и фон	`--commentail-color-text`, `--commentail-color-accent`, `--commentail-color-muted`, `--commentail-color-error`, `--commentail-color-surface`, `--commentail-color-border`
Поля ввода	`--commentail-color-input-surface`
Основные кнопки	`--commentail-color-button-text`, `--commentail-color-button-surface`, `--commentail-color-button-hover`
Второстепенные действия	`--commentail-color-control-surface`, `--commentail-color-control-hover`
Меню	`--commentail-color-menu-surface`, `--commentail-color-menu-text`
Метки сотрудников	`--commentail-color-staff-text`, `--commentail-color-staff-surface`, `--commentail-color-superuser-text`, `--commentail-color-superuser-surface`
Отступы и размеры	`--commentail-spacing`, `--commentail-border-radius`, `--commentail-avatar-size`, `--commentail-max-width`, `--commentail-input-min-height`, `--commentail-input-max-height`
Шрифт	`--commentail-font-family`, `--commentail-font-size`, `--commentail-line-height`

Названия можно копировать целиком: префикс --commentail- уже включён. Исходные значения приведены в справочнике оформления.

Пишите селекторы внутри .commentail, чтобы не перекрасить Wagtail и остальные формы сайта. Избегайте глобальных button { ... !important }: они могут победить специально настроенные переменные. Изменение формы на уровне HTML разберём отдельно.

Проверим результат

В production пересоберите static, перезапустите приложение по процедуре сайта и обновите кеш CSS. Проверьте результат:

На узком экране форма и длинный текст не выходят за контейнер.
В обеих темах читаются кнопки и ошибки CAPTCHA.
При переходе клавишей Tab виден фокус.
Меню, раскрытие ответов и редактор открываются и остаются читаемыми.

Страницы подтверждения и отписки — отдельные документы. CSS основной статьи сам туда не переносится. Их настраиваем в следующем уроке через commentail/base.html; для фона и тени есть --commentail-document-background и --commentail-document-shadow.