Перейти к основному содержанию

Брендинг и настройка темы

Настройте админ-панель Gridix в соответствии с идентичностью вашего бренда. Настройте цвета, логотипы и визуальные элементы для создания единообразного брендинга.
Настройка брендинга доступна только для разработчиков. Менеджеры не могут изменять настройки брендинга.

Доступ к настройкам брендинга

Перейдите в Настройки → Брендинг в админ-панели. Раздел брендинга позволяет вам настроить:
  • Цветовую схему
  • Настройки логотипа
  • Предпочтения темы
  • Визуальные элементы

Настройка цвета

Основные цвета

Основной цвет - это главный цвет бренда, используемый во всей админ-панели:
  • Выделения навигации
  • Активные состояния
  • Кнопки и призывы к действию
  • Заголовки разделов
1

Выберите основной цвет

Используйте цветовую палитру для выбора основного цвета вашего бренда. Вы можете:
  • Ввести hex код цвета (например, #000000)
  • Использовать интерфейс цветовой палитры
  • Выбрать из предустановленных цветов
2

Предварительный просмотр изменений

Изменения просматриваются в реальном времени. Проверьте, как цвет выглядит в:
  • Боковой панели навигации
  • Активных состояниях
  • Кнопках
  • Выделениях
3

Сохраните тему

Нажмите “Сохранить” для применения вашей цветовой схемы. Изменения вступают в силу немедленно.

Опции цветовой схемы

Gridix использует тему на основе черного по умолчанию, но вы можете настроить:
  • Основной цвет: Главный цвет бренда (#000000 по умолчанию)
  • Основной при наведении: Цвет при наведении (#1a1a1a по умолчанию)
  • Основной активный: Цвет для активных состояний (#333333 по умолчанию)
  • Текст на основном: Цвет текста на основных фонах (#ffffff по умолчанию)
Цветовая схема автоматически настраивается для доступности, обеспечивая достаточный контраст для читаемости.

Конфигурация логотипа

Загрузка логотипов

Gridix поддерживает отдельные логотипы для светлой и темной темы:
1

Подготовьте файлы логотипа

Подготовьте ваш логотип в двух версиях:
  • Логотип для светлой темы: Темный логотип для светлых фонов (PNG, SVG)
  • Логотип для темной темы: Светлый логотип для темных фонов (PNG, SVG)
Рекомендуемый формат: SVG для масштабируемости Рекомендуемый размер: 200x50px или аналогичное соотношение сторон
2

Загрузите логотип для светлой темы

Нажмите “Загрузить логотип” для светлой темы и выберите ваш темный файл логотипа.
3

Загрузите логотип для темной темы

Нажмите “Загрузить логотип” для темной темы и выберите ваш светлый файл логотипа.
4

Предварительный просмотр

Просмотрите, как логотипы отображаются в обеих темах, используя переключатель темы.
5

Сохраните логотипы

Нажмите “Сохранить” для применения ваших логотипов. Они появятся в верхней панели немедленно.

Требования к логотипу

  • Формат: PNG, SVG или JPG
  • Размер: Рекомендуется 200x50px (или аналогичное соотношение сторон)
  • Размер файла: Максимум 500KB на логотип
  • Прозрачность: Поддерживается (PNG, SVG)
Используйте формат SVG для лучшего качества на всех размерах. SVG логотипы масштабируются идеально без пикселизации.

Выбор темы

Темный режим vs Светлый режим

Админ-панель Gridix поддерживает обе темы:
  • Светлый режим: Светлый фон с темным текстом
  • Темный режим: Темный фон со светлым текстом
Пользователи могут переключаться между темами, используя переключатель темы в верхней панели.

Настройка цветов темы

Для каждой темы вы можете настроить: Светлый режим:
  • Цвета фона
  • Цвета текста
  • Цвета границ
  • Фоны карточек
Темный режим:
  • Цвета фона
  • Цвета текста
  • Цвета границ
  • Фоны карточек

Визуальные элементы

Favicon

Установите пользовательский favicon для админ-панели:
1

Подготовьте Favicon

Создайте файл favicon:
  • Формат: ICO, PNG
  • Размер: 16x16 или 32x32 пикселей
  • Поддерживаются несколько размеров
2

Загрузите Favicon

Загрузите файл favicon в Настройки → Брендинг → Favicon.

Пользовательский CSS (Продвинутый)

Пользовательский CSS - это продвинутая функция. Неправильный CSS может сломать интерфейс. Используйте с осторожностью.
Для продвинутой настройки вы можете добавить пользовательский CSS:
  • Перейдите в Настройки → Брендинг → Продвинутые
  • Добавьте пользовательские CSS правила
  • Просмотрите изменения перед сохранением

Лучшие практики

Последовательность: Используйте цвета вашего бренда последовательно во всех настройках для поддержания идентичности бренда.
Доступность: Обеспечьте достаточный цветовой контраст для читаемости. Протестируйте вашу цветовую схему в обоих светлом и темном режимах.
Качество логотипа: Используйте файлы логотипа высокого качества. Формат SVG рекомендуется для четкого отображения на всех размерах.
Тестирование: Просмотрите изменения перед сохранением. Протестируйте в обоих светлом и темном режимах, чтобы убедиться, что логотипы хорошо выглядят в обоих.

Влияние брендинга

Ваша настройка брендинга влияет на:
  • Админ-панель: Цвета и логотипы отображаются в админ-интерфейсе
  • Виджеты проектов: Цвета бренда могут применяться к встроенным виджетам
  • Email сообщения: Логотип появляется в системных письмах
  • Счета: Брендинг компании на сгенерированных счетах

Устранение неполадок

  • Проверьте формат файла (поддерживаются PNG, SVG, JPG)
  • Проверьте размер файла (макс. 500KB)
  • Убедитесь, что файл успешно загружен
  • Очистите кеш браузера
  • Попробуйте другой формат файла
  • Убедитесь, что вы нажали “Сохранить”
  • Проверьте на ошибки валидации
  • Проверьте формат цветового кода (hex коды)
  • Обновите страницу
  • Используйте формат SVG для лучшего качества
  • Убедитесь, что логотип высокого разрешения
  • Проверьте размеры логотипа (рекомендуется 200x50px)
  • Загрузите повторно с файлом более высокого качества

Следующие шаги