march 16, 2023
Changes in the dashboard UI template in Apache Superset design
Virtually every corporation has its own corporate identity (brand book) and requires it to be followed when developing an analytics systems portal.
The Apache Superset user interface looks quite concise, but lacks customisation to select the colour scheme of the main rendering area. We found a way to solve this problem by editing the CSS template.
Suppose we have a dashboard with a set of charts, an example of which is shown in the image below. We need to change the background colour to black.
1. Press «EDIT DASHBORD» in the upper right-hand corner
2. In edit mode, in the top right-hand menu, there is an option to «Edit CSS»
3. In the window that opens, enter the code:
- To change the dashboard background:
.dashboard{ background: #000000}
- To change the background of the charts:
4. Close the CSS editing area and press ‘Save’
You will receive the following image:
5. To make changes to the design of the filter and header area, you need to find out the names of the relevant classes, unfortunately they do not have standard names. To do this in your browser:
- Right-click and «View code».
- Click on «select on element in the tabs …» (see figure).
- Hover the mouse on the required object, the part of the code corresponding to the selected part will be highlighted on the left side of the screen, remember the name of the class.
Use the name .css-6qb51q to edit the background of the filter area.
6. Repeat step. 5 for all necessary objects and add the code to the CSS template. In our case we have the following:
Filter and header area:
.css-6qb51q { background: #000000;}
.css-1db2tta { background-color: #000000; }
.css-132hnd5 { background: #000000;}
Text and symbol formatting:
.css-1xf2vnm { color: white;}
.css-6szfdn {color: white;}
.css-d9e6wp {color: white;}
.css-1abftjo { color: white;}
The result is a dashboard like the one shown below
