Кастомизация интерфейса - Документация
Перейти к содержанию

Документация

Кастомизация интерфейса


🛠 Настройка 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.

Процесс настройки

  1. Перейдите в папку проекта:
cd /home/els/nodetrustedserverconfig
  1. Остановите сервис:
docker compose stop
  1. Откройте файл .env и найдите переменную:
CUSTOM_STYLES=`{"palette": {...}}`
  1. Внесите изменения и сохраните файл.
  2. Запустите сервис:
docker compose up -d

Описание переменной CUSTOM_STYLES

  • Обязательно: строгий JSON-формат в одной строке.
  • Запрещено: переносы строк, комментарии.
  • Рекомендуется: проверять JSON через валидатор перед сохранением.

Пример:

CUSTOM_STYLES=`{"palette": {...}, "button": {...}, "isAccordionIconColored": true}`

Пример со значениями (требует форматирования в одну строку):

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"

Советы по настройке

  1. Используйте HEX-формат для цветов.
  2. Перед применением проверяйте JSON через валидатор.
  3. Для тестирования можно использовать относительные пути.
  4. После изменений обязательно перезапускайте контейнер.

В случае ошибок проверьте:

  • Нет ли переносов строк в JSON
  • Все ли кавычки закрыты
  • Корректны ли значения цветов

Для повышения удобства работы и хранения данных веб-сайт TRUSTED.RU использует файлы COOKIE. Продолжая работу с веб-сайтом, Вы даете свое согласие на работу с этими файлами.