Кастомизация интерфейса¶
🛠 Настройка front_service
¶
Конфигурация в docker-compose.yml
:
Services:
front_service:
container_name: front_name_container
environment:
- LOGO_URL=<путь к файлу>/logo.png
- PROJECT_NAME=<Название сервиса>
- DATA_PROCESSING_POLICY_URL=<Ссылка на файл>
Логотип сервиса (LOGO_URL
)¶
Файл с логотипом необходимо расположить в папке проекта на сервере в каталоге /public/images/logo.png
.
Требования к файлу:
✔ Формат: PNG (обязательно)
✔ Минимальный размер: 28×28 пикселей
⚠ Допускается использование логотипа в формате SVG, но имейте в виду, что он не поддерживается для email-рассылок.
Название проекта (PROJECT_NAME
)¶
Укажите понятное название вашего сервиса, которое будет отображаться в интерфейсе. По умолчанию используется название ID.Trusted.Net.
Политика обработки данных (DATA_PROCESSING_POLICY_URL
)¶
Укажите cсылкe на PDF-документ с политикой обработки персональных данных. Документ необходимо разместить в папке проекта на сервере. Формат ссылки: https://<адрес сервиса>/<путь к файлу>/<название файла>.pdf
🛠 Настройка back_service
¶
Services:
back_service:
container_name: back_name_container
environment:
- LOGO_URL=<путь к файлу>/logo.png
- PROJECT_NAME=<Название сервиса>
- DATA_PROCESSING_POLICY_URL=<Ссылка на файл>
Переменные окружения описываются по аналогии с front_service
.
🎨 Настройка CSS-стилей¶
Вы можете полностью кастомизировать внешний вид Личного кабинета, выбрав подходящие стили кнопок, ссылок и вкладок через переменную CUSTOM_STYLES
в файле .env
.
Процесс настройки¶
- Перейдите в папку проекта:
- Остановите сервис:
- Откройте файл
.env
и найдите переменную:
- Внесите изменения и сохраните файл.
- Запустите сервис:
Описание переменной CUSTOM_STYLES
¶
- Обязательно: строгий JSON-формат в одной строке.
- Запрещено: переносы строк, комментарии.
- Рекомендуется: проверять JSON через валидатор перед сохранением.
Пример:
Пример со значениями (требует форматирования в одну строку):
CUSTOM_STYLES=`{"palette":{"white":{"accent":"#ff6f00","accentHover":"#f56b00","onAccentColor":"#fff","secondaryAccent":"#fae9de","secondaryAccentHover":"#fadfcd","onSecondaryAccentColor":"#5c2927","outlinedColor":"rgba(0,0,0,0.12)","outlinedBackgroundColor":"#fff","borderColor":"#f0c9bd","outlinedHoverBackgroundColor":"#ffebe6","outlinedHoverBorderColor":"#fae9de"}},"button":{"borderRadius":"4px"},"isAccordionIconColored":true,"contentPosition":"center"}`
Параметр | Описание | Пример |
---|---|---|
accent | Основной цвет акцентных элементов | "#ff6f00" |
accentHover | Цвет при наведении | "#f56b00" |
onAccentColor | Цвет текста на акцентном фоне | "#fff" |
secondaryAccent | Цвет второстепенных элементов | "#fae9de" |
borderColor | Цвет границ элементов | "#f0c9bd" |
borderRadius | Закругление углов кнопок (button ) | 4px , 8px и т.д. |
isAccordionIconColored | Раскрашивать иконки аккордеона | true /false |
contentPosition | Выравнивание контента | "start" , "center" , "end" |
Советы по настройке¶
- Используйте HEX-формат для цветов.
- Перед применением проверяйте JSON через валидатор.
- Для тестирования можно использовать относительные пути.
- После изменений обязательно перезапускайте контейнер.
В случае ошибок проверьте:
- Нет ли переносов строк в JSON
- Все ли кавычки закрыты
- Корректны ли значения цветов