iEXExchanger 10.x
Официальный сайт
  • 10.x
  • История версий
  • Введение
  • Журнал изменений
  • Общая информация
    • Полезные советы
      • Технические требования к серверу
        • Сервер на FastVPS
        • Сервер на Timeweb
      • Домен для обменника
      • От мониторингов
        • Как попасть в BestChange
        • Рекомендации к обменникам
      • Защита от DDoS-атак
    • Центр безопасности
      • Настройка Google Authenticator
      • Изменение URL панели управления
      • Доступ к панели по IP-адресу
      • Управление группами пользователей
      • CSP Безопасность
      • Защита от CSRF-атак
      • Код безопасности для автовыплат
      • Ограничение доступа по IP в Cloudflare
      • Настройка защиты Fail2ban
      • Советы по безопасности от BestChange
      • Конфигурация брандмауэра UFW
      • Блокировка нежелательных email-адресов
  • Обучение
    • Изучение продукта
      • Введение
      • Начало работы
      • Главы
        • 1. Основные настройки
        • 2. Настройки интерфейса
        • 3. Коды валют и платежные системы
        • 4. Создание валют
        • 5. Настройка курсов
        • 6. Создание направлений
        • 7. Настройка заявок
    • Видеоматериалы
      • Быстрый запуск с нуля
      • Начало работы
        • Настройка планировщика задач
      • Главы
  • УСТАНОВКА И НАСТРОЙКА
    • Установка системы
      • Установка ПО
        • Шаг 1: Подготовка
        • Шаг 2: Настройка FastPanel
        • Шаг 3: Команды терминала
        • Шаг 4: Запуск процессов
          • Настройка Supervisor
          • Настройка PM2
        • Шаг 5: Финальные настройки
      • Интеграция с Cloudflare
        • Подключение сайта к Cloudflare
        • Включение HTTPS
        • Режим защиты (Under Attack Mode)
        • Настройка DNS
        • Установка SSL-сертификата
        • Белый и чёрный список IP
        • Очистка кэша Cloudflare
      • Настройка конфигурации
    • Обновление продукта
      • Обновление с 10.0.x до 10.0.2
      • Переход на версию 10.0.0
      • Обновления внутри 9.x
        • Инструкция с 9.2.1 до 9.2.2
        • Инструкция с 9.2 до 9.2.1
        • Инструкция с 9.1 до 9.2
      • Инструкция по загрузке архивов и лицензии
    • Файлы лицензии
    • CRON: настройка задач
  • Заявки
    • Работа с заявками
      • Статусы заявок
      • Этапы для Заявок
      • Лимиты для операторов
      • Причины для заявок
      • Настройка Live заявок
    • Верификация
      • Верификация карт
        • Категория верификаций
        • Инструкция верификаций
      • Верификация личности (KYC)
  • Меню
    • Основное
      • Добавить код валюты
      • Добавить платежную систему
      • Валюты
        • Добавить новую валюту
        • Сети для валют
        • Фильтры для валют
        • Метки для валют
        • Быстрые команды
      • Направление
        • Добавить новое направление
        • Режимы направлений
        • Сортировка направлений
        • Групповая комиссия
        • Сумма обмена
        • Уведомления
      • Резервы
        • Стандартный резерв
        • Резерв из сервера
        • Резерв из файла
      • Платежные реквизиты
        • Добавить реквизит
        • Информационные поля
        • Дополнительные поля
        • Как настроить систему выдачи реквизитов по запросу?
      • Уведомления
        • Настройка уведомлений в направлениях
        • Настройка уведомлений в валютах
      • Дополнительные поля
        • Доп. поля для валют
        • Доп. поля для направлений
      • Шаблоны
        • Шаблоны для валют
        • Шаблоны для направлений
    • Внешний вид
      • Кастомизация главной страницы
      • Кастомизация окна оплаты заявки
      • Настройка текста
      • Виды отображения направлений обмена на главной странице
      • Уведомление на сайте
      • Цветовая палитра и стили оформления сайта
      • Вопросы и Ответы
        • Как настроить модальное окном "Подтверждение обмена"?
        • Как изменить шрифт на сайте?
        • Как вывести QR-Код при оплате заявки?
        • Как вывести галочку "Не запоминать введенные данные"?
        • Как настроить иконку и логотип?
        • Как установить свой фон на сайте?
        • Как настроить смену стилей?
    • Парсер курсов
      • Типы курсов
        • Курсы из источников
        • BestChange API парсер
          • Как получить ключ BestChange API?
          • Где находятся все созданные пары из BestChange API?
          • Настройка BestChange API парсера
          • Теги и формулы для расчёта курсов BestChange
        • Курсы из файла
        • Курсы по формуле
          • Теги и формулы для расчёта курсов валют
          • Стандартные формулы для расчёта курсов
        • Курсы конкурентов
      • CoinMarketCap API Keys
      • Дата последнего обновления курсов
      • Ускоренное обновление курсов
    • Партнерам и скидки
      • Партнерам
        • Баннеры партнеров
        • Другие разделы
        • Настройка партнерских процентов
        • Настройка партнерской программы для направлений обмена
        • Настройки партнерской программы
        • Настройка валюты для партнёрской программы
        • Почему не начисляются бонусы партнерам?
        • Почему в реферальной программе, неправильно отображается символ валюты?
      • Скидки
    • Пользователи
      • Группы прав пользователей
      • Фильтр по: IP или E-Mail
      • Лог авторизаций
  • Вопросы и ответы
    • Заявки
      • Где можно смотреть прибыль от заявок?
      • Почему создаются заявки, когда нет резерва?
      • Почему заявка автоматически отклоняется через минуту?
      • Как прикрепить файл к заявке, чтобы клиент увидел?
      • Как добавить комментарий к заявке пользователя?
      • Как отключить поле E-mail при для новых клиентов?
      • Как клиенты могут привязать чек к заявке?
      • Почему клиенты при открытии заявки получают сообщение "Нет доступ к заявке"?
      • Могут ли главные менеджеры выполнять любые заявки?
      • Почему клиенты не видят заявки в личном кабинете?
    • Направление обмена
      • Как настроить сумму обмена и установить направление по умолчанию на главной?
      • У меня большое кол-во направлений, как удобнее вывести их на главном?
    • Инфраструктура
      • Как сделать перенос с поддомена на основной домен?
      • Почему IP-адрес клиента отображается некорректно?
      • Как восстановить доступ в панель управления, если забыли пароль?
      • Как сбросить путь доступа к админке?
      • Где расположена корневая директория вашего сайта?
      • Где найти путь к проекту и имя пользователя?
      • (Важно) Что нужно знать перед тем как обновиться?
      • Как открыть терминал и подключиться к серверу по SSH?
      • Можно ли использовать имя файла без указания полного пути в URL?
    • Другие вопросы
      • Как попробовать демо-версию админки перед покупкой?
      • Почему в курсе обмена отображаются только целые числа?
      • Как изменить e-mail или пароль администратора?
      • Как включить Технический перерыв?
      • Где найти список XML кодов валют?
      • Почему администратору на E-mail не приходят сообщения?
      • Как сменить тип начисления вознаграждений для определенных клиентов?
      • Как настроить на blockchain ссылку?
      • Настройка AML, правил сервиса и согласия пользователей
  • Автоматизация
    • Мерчанты и API
      • Мерчанты
        • Предупреждение о рисках
        • Общие настройки
        • Rapira
        • AlfaBit (Pay)
        • Exnode
        • Heleket
        • WestWallet
        • Merchant001
        • PayScrow
        • Volet (ex.ADVCash)
        • Payeer
        • PerfectMoney
        • ePayCore
        • Firekassa
        • Tron
        • Ripple
        • WhiteBit
        • Garantex
        • RPC Connection
        • LuckyPay
        • IvanPay
        • B2BWallet
        • ABCEX
      • Автовыплаты
        • Предупреждение о рисках
        • Общие настройки автовыплат
        • Rapira
        • AlfaBit (Pay)
        • Exnode
        • Heleket
        • WestWallet
        • Garantex
        • Merchant001
        • Volet (ex.ADVCash)
        • Payeer
        • Firekassa
        • Ripple
        • Tron
        • WhiteBit
        • ePayCore
        • PerfectMoney
        • PayScrow
        • RPC Connection
        • LuckyPay
        • IvanPay
        • B2BWallet
        • ABCEX
        • GoldEx
      • Автоматизация валют с разными сетями
      • Как включить автовыплату без участия оператора?
      • Почему не выводится инструкция к оплате?
      • Стратегия обработки ошибок мерчантов
    • AML сервисы
      • Провайдеры
        • GETBlock
        • Rapira
        • AMLBot
        • BitOK
      • Как включить галочку о соглашении с правилами AML?
      • Как привязать AML сервис к валюте?
  • Настройки
    • Уведомления
      • E-mail уведомление
        • Настройка SMTP Yandex
        • Resend
      • Telegram уведомление
      • Всплывающее уведомление
    • Онлайн Чаты
      • Подключение JivoSite
        • Опции для JivoSite
      • Онлайн чат в заявке
    • Настройки
      • Логирование
        • Настройка логирования
      • Архивация заявок
    • Экспорт курсов
  • Модули
    • Контент
      • Меню
      • Страницы
      • Новости
      • Вопросы и Ответы
    • Утилиты
      • Промо-коды
      • Конкурсы
      • Баннеры
      • Контакты
      • Отзывы
      • Статистика
      • Преимущество
      • Статус работы сервиса
    • Работа с наличными
      • Где найти список кодов городов для работы с наличными?
    • Черный список
      • Черный список BestChange
    • Другие модули
      • Модуль "Ссылки для Footer"
      • Модуль "Внутренний счет"
        • Внутренний счет (Мерчант)
        • Внутренний счет (Автовыплата)
      • Модуль "Информация по банковским картам"
      • Модуль "Proxy менеджер"
      • Модуль "Счета пользователей"
      • Модуль "Правила сайта"
  • Прочие
    • Диагностика ошибок
    • Загрузка статического файла
    • Подключение Google reCaptcha
Powered by GitBook

Основное

  • Требования к серверу

iEXExchanger — это профессиональное решение для создания обменника валют.

On this page
  • Создание и настройка CSS-файла
  • В каком файле настраивать цвета и стили сайта?
  • Как добавлять изменения?
  • Настройка светлой и тёмной темы сайта
  • Светлая (По умолчанию)
  • Тёмная тема
  • Полный пример файла

Was this helpful?

  1. Меню
  2. Внешний вид

Цветовая палитра и стили оформления сайта

Важно

Служба поддержки не оказывает помощь по работе с данным разделом. Документация является полной и актуальной, однако рекомендуется использовать только те настройки и параметры, которые подробно описаны ниже.

В текущей версии стилей некоторые переменные ещё могут быть изменены в будущих обновлениях, поэтому для стабильной работы сайта используйте исключительно уже задокументированные настройки.

В этом разделе подробно описано, как самостоятельно настроить цвета и внешний вид вашего сайта. Здесь представлены понятные объяснения и примеры использования переменных, с помощью которых вы сможете легко изменить оформление основных элементов страницы, таких как фон, текст, ссылки, кнопки и поля ввода.

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


Создание и настройка CSS-файла

Здесь описано, в каком файле и формате прописывать цвета и стили, чтобы изменения корректно применились на сервере вашего проекта с поддоменом app (например, app.ваш_домен). Следуйте инструкциям ниже для быстрой и удобной настройки внешнего вида сайта.

В каком файле настраивать цвета и стили сайта?

Чтобы ваши изменения применились, необходимо настроить файл со стилями на сервере вашего сайта.

Файл находится здесь: /public/static/custom-theme.css

Внимание

Эти изменения необходимо выполнять именно на сервере вашего проекта с поддоменом app (например, app.ваш_домен). Убедитесь, что редактируете файл именно по указанному пути.

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

Как добавлять изменения?

Все изменения цветов записываются в специальном формате:

:root {
    --название-переменной: значение !important;
}

Важно:

Всегда ставьте в конце значения цвета слово !important. Это нужно, чтобы изменения точно применились на сайте.

Например, вы хотите изменить цвет фона всей страницы на белый:

:root {
    --body-background: #ffffff !important;
}

Настройка светлой и тёмной темы сайта

Здесь подробно описано, как настроить оформление вашего сайта для двух режимов отображения:

  • Светлая тема используется по умолчанию и идеально подходит для работы в дневное время или при хорошем освещении.

  • Тёмная тема рекомендована для комфортного использования сайта вечером или при недостаточном освещении.

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

Вы можете принудительно управлять темой оформления сайта в панели управления:

Перейдите в раздел: Настройки → Настройки оформления → Стиль

Здесь доступны три варианта:

  • Системный — тема оформления выбирается пользователем самостоятельно.

  • Светлая — принудительно устанавливается светлая тема для всех пользователей.

  • Тёмная — принудительно устанавливается тёмная тема для всех пользователей.

Светлая (По умолчанию)

Ниже представлены все переменные, отвечающие за оформление светлой темы сайта.

Для каждой переменной указано подробное описание того, за какие элементы интерфейса она отвечает. Также даны примеры того, как можно легко и быстро настроить цвета и стили этих элементов по своему желанию.

Основные цвета страницы и текста

Переменная
Что изменяет?
Пример / Значение по умолчанию

--body-background

Цвет основного фона всей страницы

#faf9ff (очень светлый сиреневый)

--body-text-color

Основной цвет текста

#000 (чёрный)

--background

Цвет фона блоков и карточек

#ffffff (белый)

--background-text-color

Цвет текста внутри блоков

#000 (чёрный)

--default-text-color

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

#7B62FF (фиолетовый)

--default-link

Цвет ссылок на сайте

#7B62FF (фиолетовый)

--text-foreground

Дополнительный цвет текста

#95abb7 (серо-голубой)

--text-secondary-foreground

Вторичный (менее яркий) цвет текста

#878792 (серый)

Цвета верхней панели и разделов сайта

Переменная
Что изменяет?
Пример / Значение по умолчанию

--header-bg

Фон верхней панели сайта (шапки)

#ffffff (белый)

--header-text-color

Цвет текста и иконок в верхней панели

#000 (чёрный)

--section-bg

Цвет фона основных разделов и секций сайта

#ffffff (белый)

--section-text-color

Цвет текста внутри секций

#000 (чёрный)

--header-logotype-color

Цвет логотипа в шапке

#7B62FF (фиолетовый)

Цвета кнопок и акцентных элементов

Переменная
Что изменяет?
Пример / Значение по умолчанию

--primary-background

Цвет основных кнопок и активных элементов

#7B62FF (фиолетовый)

--primary-text-color

Цвет текста на этих элементах

#ffffff (белый)

--primary-button-bg-color

Цвет фона основной кнопки

#7B62FF (фиолетовый)

--primary-button-text-color

Цвет текста на основной кнопке

#ffffff (белый)

--menu-active-text-color

Цвет текста активного пункта меню

white (белый)

--menu-active-bg-color

Цвет фона активного пункта меню

совпадает с --primary-background

Цвета фона дополнительных элементов и разделителей

Переменная
Что изменяет?
Пример / Значение по умолчанию

--secondary-bg

Цвет вторичного фона

#f4f5f7 (светло-серый)

--secondary-text-color

Цвет текста на вторичном фоне

#000 (чёрный)

--secondary-light-bg

Дополнительный светлый цвет вторичного фона

#fafafc (почти белый)

--secondary-light-text-color

Цвет текста на дополнительном светлом фоне

#2d2d2d (тёмно-серый)

--divider-color

Цвет разделительных линий

#eceef2 (светло-серый)

--border-color

Цвет границ элементов

#c1c1c1 (серый)

--input-background

Цвет полей ввода

#f6f5f9 (светлый серый)

Стили для обменного блока и форм ввода

Переменная
Что изменяет?
Пример / Значение по умолчанию

--exchange-default-bg

Основной цвет фона обменного блока

#ffffff (белый)

--exchange-block-bg

Цвет конкретного блока обмена

совпадает с --background

--exchange-input-amount-bg

Цвет поля ввода суммы обмена

#f3f4f8 (светло-серый)

Тени и эффекты для элементов интерфейса

Переменная
Что изменяет?
Пример / Значение по умолчанию

--default-box-shadow

Стандартная тень блоков и карточек

Стандартное значение

--primary-shadow

Тень для акцентных элементов

Стандартное значение

--primary-shadow-md

Средняя (заметная) тень для важных элементов

Стандартное значение

--secondary-shadow

Лёгкая тень для второстепенных элементов

Стандартное значение

--primary-background-foreground

Эффект фона акцентных элементов

rgba(123, 98, 255, 0.13)

--secondary-background-foreground

Эффект фона второстепенных элементов

rgb(233 233 233 / 23%)


Стилизация нижней панели сайта (footer)

Переменная
Что изменяет?
Пример / Значение по умолчанию

--footer-background

Цвет нижней панели сайта (подвала)

совпадает с --primary-background

--footer-text-color

Цвет текста в нижней панели сайта

совпадает с --primary-text-color

Скругление углов элементов

Переменная
Что изменяет?
Пример / Значение по умолчанию

--default-border-radius

Радиус скругления углов блоков и кнопок

20px

Дополнительные

Переменная
Что изменяет?
Пример

--default-font-family

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

"Roboto", "Arial", sans-serif или любой другой шрифт

Тёмная тема

Тёмная тема включается отдельно пользователями сайта (если в панели управления установлен режим «Системный») или может быть принудительно задана администратором.

Ниже представлены переменные, с помощью которых можно настроить цвета и оформление сайта именно в тёмной теме. Вы можете использовать предложенный пример и изменить любые цвета на те, которые подходят вашим задачам и предпочтениям.

.dark {
    --body-background: #171721 !important;
    --body-text-color: #ffffff !important;
    --header-bg: #1e1e2a !important;
    --header-text-color: #ffffff !important; 
    --section-bg: #1e1e2a !important;
    --section-text-color: #ffffff !important;
    --input-background: #100f14 !important;
    --border-color: #292935 !important;
    --divider-color: oklch(.37 .013 285.805) !important;
}

Тёмная тема обычно имеет темный фон и светлый текст для комфорта глаз при слабом освещении.


Полный пример файла

Ниже представлен полностью готовый пример файла custom-theme.css, в котором уже настроены несколько переменных для светлой и тёмной тем оформления сайта. Вы можете использовать его как основу, изменяя цвета под свои потребности и задачи. Просто скопируйте этот пример и вставьте в указанный выше файл на вашем сервере.

/* Светлая тема */
:root {
    --body-background: #ffffff !important; /* Белый фон всей страницы */
    --body-text-color: #222222 !important; /* Тёмный текст */
    --primary-background: #007bff !important; /* Синий акцентный цвет кнопок */
    --primary-text-color: #ffffff !important; /* Белый текст на кнопках */
}

/* Тёмная тема */
.dark {
    --body-background: #121212 !important; /* Почти чёрный фон всей страницы */
    --body-text-color: #f5f5f5 !important; /* Светло-серый текст */
    --primary-background: #1a73e8 !important; /* Синий акцентный цвет кнопок */
    --primary-text-color: #ffffff !important; /* Белый текст на кнопках */
}
PreviousУведомление на сайтеNextВопросы и Ответы

Last updated 3 days ago

Was this helpful?

Где расположена корневая директория вашего сайта?