¶ Пользовательский CSS
Для создания своих стилей для проекта используется пользовательский CSS
¶ Алгоритм настройки пользовательских стилей
Перейдите в настройки и выберите пункт “Общие”
В разделе “Персонализация” в пункте “Пользовательский CSS” впишите нужные вам стили. Подробную информацию о стилях можно найти на сайте https://doka.guide/css/
Сохраните внесенные изменения, нажав на кнопку “Сохранить”
¶ Примеры пользовательских стилей
¶ Замена цвета у кнопок
--mt-color-название_темы – переменная, к которой привязан изначальный цвет кнопки
Основные темы в системе (primary, light, success, danger)
Primary colors (Основные кнопки)
--mt-btn-color-primary: var(--mt-color-primary);
--mt-btn-color-primary-active: var(--mt-color-primary-active);
Light colors (Серые кнопки)
--mt-btn-color-light: var(--mt-color-light);
--mt-btn-color-light-active: var(--mt-color-light-active);
Success colors (Кнопки подтверждения)
--mt-btn-color-success: var(--mt-color-success);
--mt-btn-color-success-active: var(--mt-color-success-active);
Danger colors (Кнопки отмены действий)
--mt-btn-color-danger: var(--mt-color-danger);
--mt-btn-color-danger-active: var(--mt-color-danger-active);
Без префикса – обычное состояние кнопки
-active – активное состояние кнопки (например при наведение на кнопку)
Стили для кнопок указываются в теге body
¶ Пример изменения цвета у кнопки с помощью пользовательских стилей:
body {
--mt-btn-color-primary: black; — Основной цвет у кнопки изменится на черный
--mt-btn-color-primary-active: gray; — При наведение на кнопку цвет изменится на серый
}Некоторые кнопки привязаны не к темам, а к конкретным переменным.
Посмотреть список всех доступных переменных можно в консоли разработчика (F12 + Elements/Инспектор/Элементы):
¶ Замена цвета у иконок
Получим замену цвета иконок на красный.
Пользовательские стили:
.icon svg {
color: red;
}
¶ Замена названия пункта в меню
Получим замену названия пункта меню “Главная страница” на “Дашборд”.
Пользовательские стили:
.n-link--home .n-link-h__heading {
font-size: 0 !important;
}
.n-link--home .n-link-h__heading::after {
font-size: 1.075rem;
content: "Дашборд";
}
¶ Замена цвета иконки рядом с заголовком виджетов на дашборде
Получим измененный цвет иконки в верхней части виджетов.
Пользовательские стили
.base-dashboard header .icon--with-color * path,
.base-dashboard header .icon--with-color * rect {
fill: red !important;
}