Для изменения параметров CSS перейдите на вкладку Администрирование > Настройки > Изменить.
Далее в поле Собственные стили интерфейса укажите необходимые параметры и их значения, и нажмите Применить. Вы можете использовать пример CSS настроек демо-системы, заменить значения и удалить лишние параметры.
Пример заполнения:
body {
--active-color: #ff4e02;
--active-nav-item: var(--active-color);
--non-active-nav-item: #ffffff;
--navigation-bg: #4b5360;
--navigation-dropdown-bg: transparent;
--popup-bg-color: #ffffff;
--active-subnav-item: var(--active-color);
--non-active-subnav-item: #59616c;
--session-header-bg-color: #181818;
--session-header-color: #ffffff;
--header-logo-max-height: 30px;
--header-logo-max-width: 160px;
--footer-logo-max-height: 30px;
--footer-logo-max-width: 160px;
--button-text-color: #ffffff;
--button-bg-color: var(--active-color);
--button-secondary-color: var(--active-color);
--input-bg-color: #ffffff;
--input-border-color: #e1e1e1;
--table-header-color: #ffffff;
--table-header-bg-color: #8c8c8c;
--table-color: #181818;
--table-row-odd-bg-color: #ffffff;
--table-row-even-bg-color: #f7f7f7;
--select-highlited-option-color: #ffffff;
--select-highlited-option-bg: var(--active-color);
--form-bg-color: #f7f7f7;
--table-link-color: #026578;
}
html {
--font-family-base: "Montserrat", sans-serif;
--font-size-base: 16px;
--color: #181818;
}
Таблица: описание параметров CSS
|
|
Название параметра |
Описание |
|---|---|---|
|
1 |
--color |
Базовый цвет текста. |
|
2 |
--active-color |
Цвет для активных элементов, таких как кнопки или ссылки. |
|
3 |
--active-nav-item |
Цвет для текущего выбранного элемента навигации. |
|
4 |
--non-active-nav-item |
Цвет для неактивных элементов навигации. |
|
5 |
--navigation-bg |
Цвет фона для верхней панели навигации, где расположены разделы личного кабинета (Администрирование, Обслуживание, Поддержка, Бухгалтерия) |
|
6 |
--navigation-dropdown-bg |
Цвет фона для меню разделов личного кабинета. |
|
7 |
--popup-bg-color |
Цвет фона для всплывающих или модальных окон. |
|
8 |
--active-subnav-item |
Цвет для активных элементов меню разделов личного кабинета. |
|
9 |
--non-active-subnav-item |
Цвет для неактивных элементов меню разделов личного кабинета. |
|
10 |
--session-header-bg-color |
Цвет фона для заголовка окна входа в кабинет пользователя. |
|
11 |
--session-header-color |
Цвет текста для заголовка окна входа в кабинет пользователя. |
|
12 |
--header-logo-max-height |
Максимальная высота для логотипа в заголовке. |
|
13 |
--header-logo-max-width |
Максимальная ширина для логотипа в заголовке. |
|
14 |
--footer-logo-max-height |
Максимальная высота для логотипа в футере. |
|
15 |
--footer-logo-max-width |
Максимальная ширина для логотипа в футере. |
|
16 |
--button-text-color |
Цвет текста внутри кнопок. |
|
17 |
--button-bg-color |
Цвет фона для основных кнопок. |
|
18 |
--button-secondary-color |
Цвет шрифта для второстепенных кнопок. |
|
19 |
--font-size-base |
Базовый размер шрифта для дизайна. |
|
20 |
--font-family-base |
Основное семейство шрифтов. |
|
21 |
--input-bg-color |
Цвет фона для полей ввода. |
|
22 |
--input-border-color |
Цвет границы для полей ввода. |
|
23 |
--table-header-color |
Цвет текста для заголовков таблицы. |
|
24 |
--table-header-bg-color |
Цвет фона для заголовков таблицы. |
|
25 |
--table-color |
Цвет текста для содержимого таблицы. |
|
26 |
--table-row-odd-bg-color |
Цвет фона для строк с нечетными номерами в таблице. |
|
27 |
--table-row-even-bg-color |
Цвет фона для строк с четными номерами в таблице. |
|
28 |
--select-highlighted-option-color |
Цвет текста выделенных вариантов в выпадающих списках. |
|
29 |
--select-highlighted-option-bg |
Цвет фона для выделенных вариантов в выпадающих списках. |
|
30 |
--form-bg-color |
Цвет фона для элементов формы. |
|
31 |
--table-link-color |
Цвет ссылок в таблицах. |
