→

Стандартный дизайн Superset может заиграть новыми красками, если уделить внимание работе со стилями. В этой статье рассмотрим основные селекторы и принципы, которые используются для редактирования CSS.

Изменение фона дашборда, цвета текста, шрифта:

Изменение фона графиков:

Для принудительного применения параметров стиля в конце описания необходимо добавить конструкцию "!important".

Изменение цвета заголовков:

Скрытие заголовков:

Скрытие элементов управления для всех графиков:

body {
⠀⠀background-color: #DCDCDC;
⠀⠀color: #191970;
⠀⠀font-family: 'Trebuchet MS', Helvetica, sans-serif;
⠀⠀font-style: normal;
}

.dashboard-component {
⠀⠀background-color: #696969!important;
}

.editable-title {
⠀⠀color: #000080;
}

.header-title {
⠀⠀display: none !important;
}

.header-controls {
⠀⠀display: none !important;
}

Аналогично можно получить доступ и к другим свойствам графика. Описанный принцип поможет вам работать практически со всеми селекторами, которые вы встретите, открыв консоль с дашборда.

Для изменения стилей конкретного графика, необходимо узнать его селекторы через консоль браузера (F12):

Пример использования - изменение фона графика:

.dashboard-component.dashboard-component-chart-holder.dashboard-chart-id-172.fade-out.css-0 {
⠀⠀background-color: #000080!important;
}

Как использовать, на примере поднятия графика вверх:

div[data-test-chart-id="1272"] {
⠀⠀margin-top: -30px!important;
}

Как использовать:

div[id="chart-id-871"] {
⠀⠀margin-top: -30px!important;
}

В общих стилях дашборда мы рассматривали, как скрыть заголовки всех его элементов, и использовали для этого в качестве селектора класс "header-title":

.header-title{
⠀⠀display: none !important;
}

Теперь, для того чтобы скрыть заголовок отдельного графика, нам необходимо совместить его идентификатор с данным классом, соорудив такую конструкцию:

Аналогично можно получить доступ и к другим свойствам графика. Описанный принцип поможет вам работать практически со всеми селекторами, которые вы встретите, открыв консоль с дашборда.

div[data-test-chart-id="1293"] .header-title {
⠀⠀display: none !important;
}

Для многократного использования написанного CSS-кода, рекомендуем добавлять часто используемые стили в меню CSS-templates.

В своём Telegram-канале мы освещаем главные новости Superset
и анонсируем релизы нашей российской сборки.Подписывайтесь!