Css template
Добавление CSS стилей
C помощью задания CSS стилей вы можете изменять внешний вид своих дашбордов в MWS Data Compass. Настройка стилей позволяет адаптировать интерфейс к вашему бренду и личным предпочтениям.
Что это такое
Функционал Редактировать CSS позволяет менять внешний вид дашборда без написания кода.
Вы можете: - менять фон блоков - менять цвет текста - настраивать отступы - изменять ширину и высоту элементов - менять шрифт и формат текста - делать скругления и рамки - скрывать элементы
Все изменения сразу будут отображаться на дашборде
Как открыть редактор
- Откройте нужный Dashboard
- Нажмите кнопку Редактировать CSS
- Справа откроется панель редактирования
Как выбрать элемент для настройки
Чтобы изменить стиль конкретного блока: 1. Слева вверху есть кнопка-иконка – Инспектор стилей, нажмите ее 2. Кликните по элементу на дашборде (график / таблица / KPI / контейнер дашборда) 3. Убедитесь, что выбран именно нужный элемент 4. Меняйте параметры в панели справа
Если выбран не тот элемент — изменения будут применены не туда.
Режимы применения стилей
В редакторе есть 3 режима.
1. Выбранный элемент
Изменения применяются только к одному элементу, который вы выбрали.
Используйте, если хотите выделить один KPI, одну таблицу или один график
2. Аналогичные элементы
Изменения применяются ко всем похожим элементам на этом дашборде. Пример: - изменили стиль таблицы - изменились все таблицы - изменили стиль KPI - изменились все KPI - изменили стиль контейнера графика - изменились все контейнеры графиков
Используйте этот режим, если хотите единый стиль на всём дашборде.
3. Продвинутая настройка
Это режим для ручного ввода CSS. Важно: - этот режим предназначен для опытных пользователей - ошибки в коде могут привести к неправильному отображению дашборда Если Вы не уверены - используйте режим Выбранный элемент или Аналогичные элементы
Советы и рекомендации
- Наименования классов могут меняться при обновлениях платформы. Чтобы избежать проблем с версткой, старайтесь использовать рекомендованные способы указания элементов.
- Используйте инструменты разработчика в вашем браузере для тестирования CSS-правил в реальном времени.
- Убедитесь, что ваши изменения не нарушают функциональность дашборда.
- Храните резервные копии оригинальных стилей на случай, если потребуется вернуть прежние настройки.
Примеры
В CSS имеются автогенерируемые классы, названия которых могут изменяться с каждым новым релизом. Они представлены в формате: css-**, где префикс «css» сопровождается уникальным хэшом. Поскольку эти классы подвержены изменениям, использование их в процессе стилизации элементов не является целесообразным. Если вы будете опираться на такие классы, ваша стилизация окажется неактуальной после обновления.
Пример неправильного кода в шаблоне:
.css-1lo2k5r {
background: red;
}
<div class=«total»>
<span class=«css-1lo2k5r»>Итоги года</span>
<span>Итоги квартала</span>
</div>
id или классом class, а затем обращаться к дочерним элементам, следуя структуре DOM-дерева.
В нашем примере, чтобы стилизовать текст «Итоги года», находящийся в элементе с хэшированным классом, мы можем использовать родительский элемент <div> с классом total. Правильным решением этой задачи будет следующий CSS:
.total > span:nth-child(1) {
background: red;
}
<span> родительского блока с классом total. Это позволяет избежать зависимости от хэшированного класса и гарантирует, что ваши стили останутся актуальными после будущих релизов.
Для более детального изучения доступа к дочерним элементам, вы можете ознакомиться с документацией на MDN.
Приоритет применения стилей
Иногда один и тот же стиль может быть задан в нескольких режимах одновременно. В этом случае применяется правило приоритета.
Приоритет (от самого сильного к самому слабому)
1. Выбранный элемент
Если стиль задан для конкретного элемента, он применяется всегда в первую очередь.
Пример: Вы сделали фон KPI красным в режиме Выбранный элемент. Даже если в режиме Аналогичные элементы задан другой фон, выбранный KPI останется красным.
2. Аналогичные элементы
Если для элемента нет индивидуального стиля, применяется стиль из режима "Аналогичные элементы".
Пример: Вы задали одинаковые отступы для всех таблиц. Все таблицы изменятся, кроме тех, где есть индивидуальная настройка в "Выбранный элемент".
3. Продвинутая настройка
CSS, заданный в "Продвинутой настройке", применяется только если он не перекрыт настройками из первых двух режимов.
Важное следствие
Если вы изменили стиль в режиме Аналогичные элементы, но на одном конкретном блоке изменений не видно - скорее всего у него уже есть настройки в режиме Выбранный элемент, которые перекрывают общий стиль.
Что делать, если стиль "не применяется"
Если вы хотите, чтобы элемент снова подчинялся общему стилю: 1. Перейдите в режим Выбранный элемент 2. Уберите или измените параметры, которые мешают 3. Нажмите Сохранить
После этого стиль из режима Аналогичные элементы начнёт применяться.
Состояния элемента (Default / Hover / Focus / Active)
Помимо выбора режима применения стилей (Выбранный элемент или Аналогичные элементы), вы также можете настраивать внешний вид элемента в разных состояниях. Селектор состояния доступен: - в панели настройки стилей; - в таблице стилей.
Это позволяет задавать различный внешний вид одного и того же элемента в зависимости от действий пользователя.
Default
Default — обычное состояние элемента. Это состояние используется всегда, пока пользователь не взаимодействует с элементом. Примеры: - обычный фон карточки; - обычный цвет текста; - стандартная рамка.
Если вы не планируете создавать специальные эффекты, большинство настроек следует задавать именно в состоянии Default.
Hover
Hover — состояние при наведении курсора мыши на элемент. Используется для визуального выделения элемента и улучшения интерактивности. Примеры: - изменение цвета фона; - появление рамки; - усиление тени; - изменение цвета текста.
Состояние Hover появляется только тогда, когда пользователь наводит курсор мыши на элемент.
Важно: Если вы настраиваете Hover и не видите изменений сразу — это нормально. Для проверки необходимо навести курсор на элемент.
Focus
Focus — состояние выбранного или активного элемента. Обычно используется для: - элементов управления; - фильтров; - полей ввода; - интерактивных компонентов.
Примеры: - подсветка рамки; - изменение цвета фона; - выделение элемента после выбора.
Focus появляется после выбора элемента пользователем. Например: - пользователь нажал на фильтр; - пользователь выбрал значение; - элемент получил фокус через клавиатуру.
Некоторые элементы дашборда могут не поддерживать визуальное отображение Focus. Это зависит от типа компонента.
Active
Active — состояние элемента в момент взаимодействия. Обычно возникает: - во время нажатия кнопки; - при выборе элемента; - во время активного взаимодействия пользователя.
Примеры: - затемнение кнопки; - изменение цвета рамки; - уменьшение прозрачности.
Состояние Active отображается только во время взаимодействия пользователя с элементом. Поэтому изменения могут быть заметны лишь на короткое время.
Как работают состояния
Для каждого состояния можно задать собственные стили. Например:
| Свойство | Default | Hover |
|---|---|---|
| Цвет фона | Белый | Светло-серый |
| Цвет текста | Чёрный | Синий |
| Радиус границы | 8px | 8px |
В результате в обычном состоянии карточка будет белой, а при наведении станет светло-серой.
Приоритет состояний
Если для свойства задано значение в текущем состоянии, используется оно. Если значение для состояния не задано, используется значение из Default. Например:
| Свойство | Default | Hover |
|---|---|---|
| Цвет фона | Белый | Светло-серый |
В результате в обычном состоянии фон будет белым, а при наведении станет светло-серым. Для полноты картины разберём второй пример:
| Свойство | Default | Hover |
|---|---|---|
| Цвет фона | Белый | Светло-серый |
| Цвет текста | Чёрный | - |
С такими настройками в результате в статичном состоянии цвето фона будет белым, а цвет текста будет чёрным, но при наведении поменяется только цвет фона на светло-серый, так как свойство "Цвет текста" в Hover не было переопределено.
Рекомендации по использованию состояний
| Рекомендация | Описание |
|---|---|
| Используйте Hover для лёгких визуальных эффектов | Хорошие примеры: - немного изменить цвет фона; - добавить или усилить тень; - изменить цвет границы. |
| Не меняйте слишком много параметров одновременно | Если в Hover одновременно меняются: - фон; - текст; - граница; - размеры; - отступы; элемент может выглядеть нестабильно и отвлекать пользователя. |
| Для большинства элементов достаточно Default и Hover | В большинстве случаев пользователи настраивают только: - Default — основной стиль; - Hover — эффект наведения. Состояния Focus и Active обычно используются реже и нужны для интерактивных элементов. |
Таблица стилей
В таблице стилей также доступен селектор состояния: - Default - Hover - Focus - Active
При выборе состояния в таблице отображаются только стили, относящиеся к выбранному состоянию. Это позволяет быстро понять: - какие настройки применяются сейчас; - какие стили будут использоваться при наведении; - какие стили настроены для Focus или Active.
Кнопки управления
В редакторе есть кнопки: - Сохранить - Отменить - Сбросить
Сохранить
Сохраняет все изменения, сделанные в режимах: - Выбранный элемент - Аналогичные элементы - Продвинутая настройка
После сохранения стили будут применяться при каждом открытии дашборда.
Отменить
Отменяет несохранённые изменения. Используйте, если вы попробовали настройки и хотите вернуться к предыдущему состоянию.
Сбросить
Полностью сбрасывает все стили, применённые через no-code вкладки: - Выбранный элемент - Аналогичные элементы
Важно: - сброс удаляет все применённые no-code стили - ручной CSS из "Продвинутой настройки" может остаться и продолжить влиять на дашборд
Вкладки редактора
В режимах Выбранный элемент и Аналогичные элементы доступны одинаковые вкладки: - Внешний вид - Позиционирование - Типография - Границы и тень
Каждая вкладка содержит разделы, которые можно свернуть/развернуть.
Вкладка "Внешний вид"
Эта вкладка отвечает за: - фон - видимость - цвет текста
Раздел "Фон"
Цвет фона
Меняет цвет заднего фона элемента (карточки). Примеры: - сделать карточки белыми - сделать фон KPI выделяющимся - сделать блок тёмным
Важно: Цвет фона меняется у контейнера элемента. Цвета внутри графика (линии, столбцы) могут не измениться.
Прозрачность
Меняет прозрачность фона. - 100% — фон полностью видимый - 0% — фон полностью прозрачный
Когда полезно: - если хотите убрать фон карточки - если хотите сделать фон более "лёгким"
Раздел "Видимость"/"Отображение"
Скрыть элемент
Полностью скрывает элемент с дашборда. Используйте, если нужно: - убрать лишний KPI/таблицу/график - временно скрыть блок
Если элемент исчез — сначала проверьте, не включено ли "Скрыть элемент".
Раздел "Цвет"
Цвет (цвет текста)
Меняет цвет текста внутри элемента. Примеры: - сделать текст тёмнее или светлее - выделить KPI красным/зелёным - улучшить контраст в тёмной теме
Важно: Некоторые элементы графиков могут иметь собственные настройки текста (например подписи осей). Если текст не изменился - это нормально.
Вкладка "Позиционирование"
Эта вкладка отвечает за: - отступы - ширину - высоту
Раздел "Отступы"
Внутренние отступы
Внутренний отступ - это расстояние внутри элемента между краем карточки и содержимым. Виды отступов: - Внутренний отступ сверху - Внутренний отступ справа - Внутренний отступ снизу - Внутренний отступ слева
Внешние отступы
Внешние отступы - это расстояние между элементами на дашборде. Виды отступов: - Внешний отступ сверху - Внешний отступ справа - Внешний отступ снизу - Внешний отступ слева
Единицы измерения
Вы можете выбирать единицы: - пиксели (рекомендуется) - в процентном соотношении - относительно ширины экрана - относительно высоты экрана - относительно шрифта приложения
Простое правило: если вы не уверены - используйте пиксели
Раздел "Ширина"
- Ширина
- Максимальная ширина
- Минимальная ширина
Важно: дашборд использует сетку размещения, поэтому ширина может применяться не так, как ожидается.
Раздел "Высота"
- Высота
- Максимальная высота
- Минимальная высота
Полезно для таблиц и крупных графиков.
Важно: если задать маленькую высоту, часть содержимого может не помещаться.
Вкладка "Типография"
Отвечает за внешний вид текста.
Раздел "Шрифт"
Размер шрифта
Меняет размер текста
Совет: не делайте текст слишком маленьким. Обычно 11–12px — минимально читаемый размер.
Насыщенность шрифта
Это жирность текста.
Раздел "Стиль"
Преобразование текста
Меняет регистр текста: - нижний регистр - верхний регистр - с заглавных букв
Расстояние между буквами
Меняет расстояние между символами.
Важно: слишком большое значение ухудшает читаемость.
Вкладка "Границы и тень"
Все настройки этой вкладки находятся в разделе "Границы"
Раздел "Границы"
Радиус границы
Скругляет углы карточки.
Ширина границы
Толщина рамки.
Цвет границы
Цвет рамки вокруг элемента.
Стиль границы
Тип линии рамки: - скрытый (рамки нет) - штрих - пунктир - сплошной
Рекомендация: чаще всего используется сплошной.
Частые проблемы и ответы
| Проблема | Что проверить/сделать |
|---|---|
| Я меняю настройки, но ничего не меняется | Проверьте: 1. выбран ли элемент 2. выбран ли правильный режим (Выбранный элемент / Аналогичные элементы) 3. нажали ли вы "Сохранить" |
| Я хотел изменить один блок, а изменились все | Вы были в режиме Аналогичные элементы |
| Я изменил стиль аналогичных элементов, но один блок не изменился | У этого блока скорее всего есть настройки в режиме Выбранный элемент, которые перекрывают общий стиль |
| Я не вижу элемент на дашборде | Скорее всего включено Скрыть элемент |
| Я настроил Hover, но ничего не изменилось | Проверьте: 1. Наведён ли курсор на элемент. 2. Нажата ли кнопка Сохранить. 3. Поддерживает ли выбранный элемент состояние Hover. |
| Почему в Hover часть стилей не меняется? | Если свойство не задано для Hover, используется значение из Default. Это нормальное поведение. |
| Нужно ли настраивать все четыре состояния? | Нет. Для большинства сценариев достаточно настроить: - Default - Hover Focus и Active используются только при необходимости. |
Если что-то пошло не так
- Проверьте режим (Выбранный /ы Аналогичные / Продвинутый)
- Проверьте приоритет (индивидуальные настройки всегда сильнее)
- Проверьте "Скрыть элемент"
- Нажмите Отменить (если хотите вернуть как было)
- Если нужно всё очистить - нажмите Сбросить
- Нажмите Сохранить после изменений