Настройка внешнего вида компонента комментариев

Внешний вид компонента настраивается через CSS-переменные, объявленные в файле variables.css. Изменяя значения этих переменных, можно адаптировать цвета, фон, скругления и другие параметры под дизайн проекта.

Важно перед началом

Перед внесением изменений:

• Скопируйте шаблон компонента в свою директорию (например, в шаблон сайта).
• Вносите изменения только в копию.

Осторожно Если редактировать файлы напрямую в модуле, при обновлении компонента изменения могут быть перезаписаны.

Где изменять стили

• Файл: ваш_шаблон/css/variables.css
• Переменные объявлены в :root и применяются ко всему компоненту.

Пример:

:root {
--color-bg-primary: #fff;
}

Чтобы изменить фон основного блока, достаточно поменять значение:

--color-bg-primary: #f0f2f5;

Рекомендации

Используйте HEX, RGB или CSS-градиенты. Можно подключить собственный файл с переменными после variables.css, чтобы не редактировать исходный файл. Для поддержки темной темы можно переопределять переменные внутри [data-theme="dark"].

Пример переопределения:

[data-theme="dark"] {
--color-bg-primary: #121212;
--color-text-primary: #ffffff;
}

Минимальный безопасный способ кастомизации

Создайте файл, например:

/local/templates/ваш_шаблон/css/custom_variables.css

И подключите его вместо основного variables.css.

Это исключает риск потери изменений при обновлении компонента.