Настройки → Общие → Персонализация → Пользовательский CSS
Пользовательский CSS используют, если стандартных настроек персонализации недостаточно: например, нужно точечно изменить внешний вид кнопок, иконок, пунктов меню или других элементов интерфейса.
CSS – это код, который управляет внешним видом интерфейса: цветами, размерами, отступами, скруглениями, рамками и другими визуальными параметрами. Подробнее о синтаксисе CSS
¶ Добавить пользовательский CSS
-
Откройте Настройки → Общие.
-
В блоке Персонализация разверните блок Пользовательский CSS.
-
Вставьте CSS-код в поле Пользовательский CSS.
-
Нажмите Сохранить.
-
Проверьте, как изменился интерфейс.
¶ Изменить цвета интерфейса
Цвета интерфейса можно менять через CSS-переменные. Такой способ подходит, если нужно заменить основной цвет платформы или цвета отдельных состояний.
Пример замены основного цвета на цвет ошибки:
body {
--mt-color-primary: var(--mt-color-danger);
--mt-color-primary-light: var(--mt-color-danger-light);
--mt-color-primary-active: var(--mt-color-danger-active);
}
Изменение применяется только к элементам, которые используют эти переменные. Если цвет нужного элемента не изменился, проверьте его переменные через инструменты разработчика.
Пример для нового дизайна:
body.mk-design-actual {
--mt-color-primary-light: #FFE7A3;
--mt-color-primary: #FFBA00;
--mt-color-primary-active: #D99700;
--mt-color-primary-inverse: #000000;
}
Замените HEX-коды на корпоративные цвета.
¶ Изменить цвета кнопок
Основные темы кнопок:
primary— основные кнопкиlight— светлые или серые кнопкиsuccess— кнопки подтвержденияdanger— кнопки отмены или опасного действия
Для кнопок могут использоваться CSS-переменные:
--mt-btn-color-primary: var(--mt-color-primary);
--mt-btn-color-primary-active: var(--mt-color-primary-active);
--mt-btn-color-light: var(--mt-color-light);
--mt-btn-color-light-active: var(--mt-color-light-active);
--mt-btn-color-success: var(--mt-color-success);
--mt-btn-color-success-active: var(--mt-color-success-active);
--mt-btn-color-danger: var(--mt-color-danger);
--mt-btn-color-danger-active: var(--mt-color-danger-active);
- Переменная без суффикса задает обычное состояние кнопки.
- Переменная с суффиксом
-activeзадает активное состояние, например при наведении. - Стили для кнопок указывают в теге
body.
Некоторые кнопки привязаны не к теме, а к конкретным переменным. Если цвет кнопки не изменился, проверьте переменную элемента через инструменты разработчика.
¶ Найти CSS-переменную через инструменты разработчика
Используйте этот способ, если нужно понять, какая CSS-переменная или класс отвечает за цвет, иконку, состояние кнопки или другое оформление элемента интерфейса.
-
Откройте нужный экран в браузере.
-
Откройте инструменты разработчика: нажмите
F12илиCtrl+Shift+I. На macOS используйтеOption+Command+I. -
В инструментах разработчика нажмите кнопку с иконкой курсора в прямоугольнике.
-
Нажмите на элемент интерфейса, для которого нужно найти CSS-переменную или класс.
-
В панели Elements проверьте, что выбран нужный элемент.
-
Откройте вкладку Styles.
-
Найдите CSS-переменную или класс, который задает нужное оформление элемента: цвет фона, цвет текста, состояние при нажатии или другое свойство.
Например, для кнопки могут отображаться переменные:
--bc-btn-bg: var(--mt-color-primary); --bc-btn-color: var(--mt-color-primary-inverse); --bc-btn-active-bg: var(--mt-color-primary-active); -
Если нужно, временно измените значение свойства в панели Styles и проверьте результат на странице.
-
Добавьте проверенный CSS-код в поле Пользовательский CSS.
-
Нажмите Сохранить и проверьте результат в интерфейсе.
Инструменты разработчика показывают текущую разметку интерфейса. После обновлений платформы найденные классы и переменные нужно проверять повторно.
¶ Изменить цвет иконок
Цвет иконок можно изменить через CSS-селекторы и свойства color или fill.
Например, так можно изменить цвет иконки на красный:
.icon svg {
color: red;
}
¶ SVG-иконки
Если цвет иконки не изменился через color, используйте свойство fill:
.icon svg,
.icon svg * {
color: #FFBA00;
fill: #FFBA00;
}
Если иконка задана через обводку, используйте свойство stroke:
.icon svg,
.icon svg * {
color: #FFBA00;
stroke: #FFBA00;
}
Селектор
.icon svgможет подходить не для всех иконок. Если цвет не изменился, найдите точный класс и нужное свойство через инструменты разработчика.
Один и тот же цвет можно указать в разных форматах. Например, желтый цвет #FFBA00 можно записать как HEX, rgb(), rgba() или hsl().
¶ HEX
.icon svg {
color: #FFBA00;
}
¶ RGB
.icon svg {
color: rgb(255, 186, 0);
}
¶ RGBA
Используйте rgba(), если нужно добавить прозрачность. Последнее значение отвечает за прозрачность: 1 — цвет без прозрачности, 0.5 — прозрачность 50%.
.icon svg {
color: rgba(255, 186, 0, 1);
}
¶ HSL
.icon svg {
color: hsl(44, 100%, 50%);
}
¶ Изменить цвет иконок в заголовках виджетов
Если нужно изменить цвет иконок в верхней части виджетов на дашборде, проверьте SVG-элементы через инструменты разработчика.
Пример:
.base-dashboard header .icon--with-color * path,
.base-dashboard header .icon--with-color * rect {
fill: #FFBA00 !important;
}
Перед публикацией проверьте селектор в актуальном интерфейсе. После обновлений классы и структура SVG могут измениться.
¶ Сбросить пользовательский CSS
Если после сохранения интерфейс отображается некорректно, полностью очистите поле Пользовательский CSS и нажмите Сохранить.
¶ Пользовательский CSS в мобильном приложении
В мобильное приложение подтягивается не весь пользовательский CSS, а только часть настроек – цвет кнопок и цвет текста. Остальные стили, заданные в пользовательском CSS, на мобильное приложение не распространяются.
Цвет кнопок
Задаётся через переменные --mt-color-primary и --mt-color-primary-light в теге body:
body {
--mt-color-primary: #ff867c;
--mt-color-primary-light: #ffe6e4
}
Цвет текста (ссылок и абзацев)
Цвет ссылок задаётся через селектор a, цвет текста абзацев – через селектор p:
a {
color: #ff867c
}
p {
color: #ff796d
}
Вместо указанных в примерах HEX-кодов можно использовать любой другой цвет.