Customizing Apache Superset UI – Config , Theme Changes

Lets talk something different than Traditional BI today which is about Apache Superset , A modern UI framework based on Flask and React JS.

As of my writing I am on Superset 0.99.0a version : Assuming I have my virtualenv , node module everything running and I have superset installer synced from docker Hub or cloned from Github I am straight going to the customization of different pieces of UI.

I am touching basics of the installation quickly : and my local folder where Superset exist is ‘ssdev’

pip install virtualenv
virtualenv venvdxp — create the env called ssdev
. ./venvdxp/bin/activate or source venvdxp/bin/activate — Activating virtualenv ssdev

Create your own Superset Dev env directory:
mkdir ssdev
cd ssdev
sudo git clone
sudo git clone
cd incubator-superset
(venv) dpaul@<HOST> ~/ssdev/incubator-superset $
sudo pip install -r requirements.txt
cd ~/superset_dxp
sudo chmod -R 777 incubator-superset/
cd incubator-superset/
sudo pip install -e .
fabmanager create-admin –app superset (note you can’t have multiple account in same name and same emailid in 1 venv )
superset db upgrade
superset init or superset-init
superset load_examples
nohup superset runserver -d -p 8080 &
tail -f nohup.out

The version I am working on below is :

cat $HOME/ssdev/incubator-superset/superset/assets/version_info.json
{“GIT_SHA”: “0509d7aefd71ee21b417c315c8f29cb51bb6b48c”, “version”: “0.999.0dev”}

Create Custom Folder for UI in Superset to make custom change localized here : In my case my custom changes placed under TC folder :
cd ~/ssdev/incubator-superset/superset/assets/stylesheets/less/
mkdir TC
cp -r cosmo/* TC/
cd ~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC
mv cosmoTheme.js TCTheme.js
Comment below and Add TC config :
//@import “./cosmo/variables.less”;
//@import “./cosmo/bootswatch.less”;
// TC Branding Config
@import “./TC/variables.less”;
@import “./TC/bootswatch.less”;
Comment below and Add TC Config:
@import ‘./less/index.less’;
//@import “./less/cosmo/variables.less”;
// TC Branding Config change
@import “./less/TC/variables.less”;
Changing All UI Fonts to “Lato” Font:
Replace below to change all font to Lato: (Note Lato file must be copied/ deployed to the Superset Unix/ Linux env in ~/.fonts)
and then :
$fc-cache -fv
to load the fonts.
if fc-cache is not available in docker then use :  apt-get install fontconfig
Now change below on  :  ~/ssdev/incubator-superset/superset/assets/stylesheets/less/TC/variables.less
//@font-family-sans-serif:  Helvetica, Arial;
@font-family-sans-serif:  Lato;
//@font-family-serif:       Georgia, “Times New Roman”, Times, serif;
@font-family-serif:       Lato ;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
//@font-family-monospace:   Menlo, Monaco, Consolas, “Courier New”, monospace;
@font-family-monospace:   Lato;
Changing Logo:
Copy new logo here: ~/ssdev/incubator-superset/superset/assets/images/TClogo.png
Edit ~/ssdev/incubator-superset/superset/
Change the Logo name there:
APP_ICON = ‘/static/assets/images/TClogo.png’
Shaping the Top Nav Bar(height) plus bgcolor and font color:
Replace below:
//@navbar-height:                    50px;
@navbar-height:                      30px;
//TC Branding colors
@tcbrand-blue:         #0093e0;
//@navbar-inverse-bg:                         #fff;
@navbar-inverse-bg:                         @tcbrand-blue;
//@navbar-inverse-link-color:                 @gray-dark;
@navbar-inverse-link-color:                 #ffffff;
Navbar onhover underline color:
.navbar-inverse .navbar-nav > > a {
//  border-bottom: 3px solid @brand-primary;
border-bottom: 3px solid #F38A00;
.navbar-nav > li > a {
//  padding-top: 18px;
// padding-top: 8px;
Changing the Caret color:
.caret {
  border: none;
  color:  #ffffff;
.caret:hover {
  color:  #ffffff;
Changing The filterbox visualizations:
const backgroundImage = (
                ‘linear-gradient(to right, lightgrey, ‘ +
              //  `lightgrey ${perc}%, rgba(0,0,0,0) ${perc}%`
                `lightgrey ${0}%, rgba(0,0,0,0) ${0}%`
              label={t(‘Start Date’)}
              description={t(‘Select starting date’)}
              onChange={this.changeFilter.bind(this, since)}
              label={t(‘End Date’)}
              description={t(‘Select end date’)}
              onChange={this.changeFilter.bind(this, until)}
Background blue onhover color:
.VirtualizedSelectFocusedOption {
//  background-color: rgba(0, 0, 0, 0.1);
background-color: #ffffff ;
color: #0093e0;
.VirtualizedSelectFocusedOption:hover {
  cursor: pointer;
background-color: #0093e0 ;
color: #ffffff;
Changing the Brand Primary color from SS default green to TC Blue:
Will change Dashboard links to blue , Fav color to blue and export link color to blue:
//@brand-primary:         #00A699;
@brand-primary:         #0093E0;
Changes the style of the Input fields:
//** Text color for “s
//@input-color:                    @text-color;
@input-color:                    #0093e0;
//@input-bg-disabled:              @gray-lighter;
@input-bg-disabled:             #0093e0 ;
//@input-border-focus:             #66afe9;
@input-border-focus:             #0093e0;
Button shape change:
// Allows for customizing button radius independently from global border radius
//@btn-border-radius-base:         @border-radius-base;
//@btn-border-radius-large:        @border-radius-large;
//@btn-border-radius-small:        @border-radius-small;
@btn-border-radius-base:         30px;
@btn-border-radius-large:        30px;
@btn-border-radius-small:        30px;
Removing the table border color:
//** Border color for table and cell borders.
//@table-border-color:            #ddd;
@table-border-color:            #fff;
Dropdown menu changes:
//@dropdown-border:                rgba(0,0,0,.15);
@dropdown-border:                #0093e0;
//@dropdown-link-color:            @gray-dark;
@dropdown-link-color:            #495057;
Fix custom logo alignment issue:
(Not available in older SS version) And add margin on below section at :
.navbar-brand {
  float: left;
  padding: @navbar-padding-vertical @navbar-padding-horizontal;
  font-size: @font-size-large;
  line-height: @line-height-computed;
  height: @navbar-height;
  &:focus {
    text-decoration: none;
  > img {
    display: block;
    margin-top: -7px ;
Else change in here :
Add new entry after navbar section as below :
.navbar-brand > img {
  display: block;
margin-top: -7px !important;
height: 34px !important;
Changing Filter control text:
              className=”float-left ok”
                onClick={this.setValueAndClose.bind(this, ‘now’)}
                onClick={this.setValueAndClose.bind(this, ”)}
Removing Right side navbar menu items : (Profile / Languages)
Commented out this section:
<!–li class=”dropdown”>
    <a class=”dropdown-toggle” data-toggle=”dropdown” href=”javascript:void(0)”>
    <ul class=”dropdown-menu” id=”language-picker”>
      <li class=”dropdown”>
        {% for lang in languages %}
            {% if lang != locale %}
                <a tabindex=”-1″ href=”{{appbuilder.get_url_for_locale(lang)}}”>
                     – {{languages[lang].get(‘name’)}}
            {% endif %}
        {% endfor %}
Add below for Dropdown after : {% if not current_user.is_anonymous() %}
<li class=”dropdown”>
<SPAN STYLE=”font-family: Lato”>Dashboards</SPAN>
  &nbsp;<b class=”caret”></b>
        <ul class=”dropdown-menu”>
         href=”/superset/dashboard/world_health” title=”Pricing Analysis” target=”_self”>
        <SPAN STYLE=”font-family: Lato”>Pricing</SPAN>
         href=”/superset/dashboard/births/” title=”Supply Analysis” target=”_self”>
        <SPAN STYLE=”font-family: Lato”>Supply</SPAN>

Add links as tabs in Menu:


add below after : {% include ‘appbuilder/navbar_right.html’ %}
      <li >
         href=”/superset/dashboard/world_health” title=”WorldBank” target=”_self”>
        <SPAN STYLE=”font-family: Lato”>Pricing</SPAN>
        <li >
         href=”/superset/dashboard/births/” title=”Birth” target=”_self”>
        <SPAN STYLE=”font-family: Lato”>Supply</SPAN>

Change ~/ssdev/incubator-superset/superset/templates/appbuilder/navbar.html

          width=”146″ height=”43″ src=”{{ appbuilder.app_icon }}”
          alt=”{{ appbuilder.app_name }}”

To remove Right side navbar menu items : (Version info /Superset’s Github / Documentation  )

Remove all text below:
          <a href=”/static/assets/version_info.json” title=”Version info”>
            <i class=”fa fa-code-fork”></i> &nbsp;


          <a href=”” title=”Google” target=”_blank”>
            <i class=”fa fa-github”></i> &nbsp;
          <a href=”” title=”Documentation” target=”_blank”>
            <i class=”fa fa-book”></i> &nbsp;
Superset default Menu items text can be changed by editing below file content:
Changing the Dashboard in place Button  look and feel to be brand button:
background-color:    #0093e0;
border-radius:     3rem;
border-color:     #0093e0;
Add TC brand color palettes for all visualizations:
Add TC new color palette
In superset/assets/src/modules/colors.js, add this part of code in line 43:
export const tcColors = [
And once that part is added, add this in line 104:
export const ALL_COLOR_SCHEMES = {
To change Heatmap control to add TC color Visualizations:
Add below in line 129 :
tcbrand_blue: [
Add below highlight:
  linear_color_scheme: {
    type: ‘ColorSchemeControl’,
    label: t(‘Linear Color Scheme’),
    choices: [
      [‘fire’, ‘fire’],
      [‘white_black’, ‘white/black’],
      [‘black_white’, ‘black/white’],
      [‘tcbrand_blue’, ‘tcbrand_blue’],
      [‘dark_blue’, ‘light/dark blue’],
      [‘pink_grey’, ‘pink/white/grey’],
      [‘greens’, ‘greens’],
      [‘purples’, ‘purples’],
      [‘oranges’, ‘oranges’],
      [‘blue_white_yellow’, ‘blue/white/yellow’],
      [‘red_yellow_blue’, ‘red/yellowish/blue’],
      [‘brown_white_green’, ‘brown/white/green’],
      [‘purple_white_green’, ‘purple/white/green’],
    default: ‘tcbrand_blue’,
And change the slice view parameter default to : tcbrand_blue or we can change Default in control.jsx 
Adding new SuperSet menu item:
Add below in #2752 Line
#    category_icon=’fa-flask’,
#    icon=’fa-flask’,
#    category_icon=’fa-flask’,
#    icon=’fa-flask’,
    href='<place any URL here>’,
#    category_icon=’fa-flask’,
#    icon=’fa-flask’,
I would only do this if you mind the extra space between container body with navbar:
div.navbar {
  z-index: 999;
margin-bottom: 10px;
Adding lato font:
Add below :
body {
margin: 0px !important;
font-family: ‘Lato’, sans-serif !important;
Removing Select[xxx] in dropdown :
Remove space[%s] :
            placeholder={t(‘Select [%s]’, filter)}
Customize free form text to ‘Custom Range’ :
            title=”Free form”
            isSelected={this.state.type === ‘free’}
            onSelect={this.setType.bind(this, ‘free’)}
Title is not in Lato Font :
.editable-title input {
    padding: 2px 6px 3px 6px;
    font-family: Lato ;
.editable-title input[type=”button”] {
    border-color: transparent;
    background: transparent;
    white-space: normal;
    text-align: left;
font-family: Lato ;
Dashboard and header component change:
Also CSS list of changes in individual dashboards is possible from Superset dashboard pages itself