Skip to content

Css template

Добавление CSS стилей

C помощью задания CSS стилей вы можете изменять внешний вид своих дэшбордов в DataOps.BI. Настройка стилей позволяет адаптировать интерфейс к вашему бренду и личным предпочтениям.

Шаги по кастомизации

  1. Доступ к настройке дэшборда
  2. Откройте дэшборд, который вы хотите настроить.
  3. Нажмите на кнопку Редактировать дэшборд, чтобы перейти в режим редактирования.
  4. Добавление пользовательского CSS
  5. Нажмите на три точки в правом верхнем углу дэшборда, чтобы открыть контекстное меню.
  6. Выберите опцию Редактировать CSS. Откроется окно редактора.
  7. Введите свой CSS-код, чтобы изменить элементы, такие как цвет фона, шрифты, размеры и другие стили. Также вы можете воспользоваться предустановленными шаблонами, нажав на кнопку Загрузить CSS шаблон и выбрав подходящий вариант.
  8. Применение изменений
  9. После ввода CSS ваши новые настройки стиля автоматически применятся к дэшборду.

Советы и рекомендации

  • Наименования классов могут меняться при обновлениях платформы. Чтобы избежать проблем с версткой, старайтесь использовать рекомендованные способы указания элементов.
  • Используйте инструменты разработчика в вашем браузере для тестирования CSS-правил в реальном времени.
  • Убедитесь, что ваши изменения не нарушают функциональность дэшборда.
  • Храните резервные копии оригинальных стилей на случай, если потребуется вернуть прежние настройки.

Примеры

❗ В CSS имеются автогенерируемые классы, названия которых могут изменяться с каждым новым релизом. Они представлены в формате: css-**, где префикс «css» сопровождается уникальным хэшом. Поскольку эти классы подвержены изменениям, использование их в процессе стилизации элементов не является целесообразным. Если вы будете опираться на такие классы, ваша стилизация окажется неактуальной после обновления.

Пример неправильного кода в шаблоне: 

.css-1lo2k5r  {
    background: red;
}
В данной ситуации структура в DOM-дереве выглядит следующим образом:

<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.