Customization

Jupyter-flex allows for some easy ways to customize the look and feel of the dashboard in general and also specific components.

Jupyter-flex is based on Material UI and it allows for easy customization once you are familiar with it.

Class tag¶

To target individual components (Cards, Section or Pages) one can add one or more a class={value} tags to any cell that is shown in the dashboard, this adds the {value} to the CSS classes of that component.

Jupyter-flex includes multiple color CSS classes as part of it's default theme, these colors are the same as on Materialize CSS Colors.

For example let's look at this notebook:

In [1]:

class=blue

# Page

# Page

In [2]:

## Section 1

## Section 1

In [3]:

### This page has a class=blue tag

### This page has a class=blue tag

In [4]:

body

"Thats what makes the whole wrapper blue"

"Thats what makes the whole wrapper blue"

Out[4]:

'Thats what makes the whole wrapper blue'

In [5]:

class=yellow

class=darken-4

### This Card has a class=yellow and class=darken-4 tags

### This Card has a class=yellow and class=darken-4 tags

In [6]:

body

"So the card looks orange."

"So the card looks orange."

Out[6]:

'So the card looks orange.'

In [7]:

class=green

## Section 2

## Section 2

In [8]:

### This column section has a class=green tag

### This column section has a class=green tag

In [9]:

body

# <code>

#

In [10]:

### Cells with tags

### Cells with tags

In [11]:

class=yellow

body

"This code section has a class=yellow tag"

"This code section has a class=yellow tag"

Out[11]:

'This code section has a class=yellow tag'

Click on the image to open the dashboard

Custom CSS¶

To add custom CSS styles to a dashboard you can set the flex_custom_css parameter to the path to a .css file, this path should be relative to where you execute the nbconvert or voila commands.

Custom CSS files plus class tags allows you to easily customize all aspects of the dashboard.

Voila Static Files

By default Voila doesn't serve all files, see Serving static files.

If you are using flex_custom_css with voila you need to run it with:

voila --template=flex --VoilaConfiguration.file_whitelist="['.*']" notebook.ipynb

There is other parameters that allows you to customize the logo, favicon and other aspects of the dashboard, see Reference > Parameters.

One example with a simple custom.css file:

.navbar {
    background-color: yellow !important;
}

.sidebar {
    background-color: #DDD;
}

.dashboard {
    background-color: red;
}

.page {
    background-color: yellow;
}

.section {
    background-color: green;
}

.card {
    background-color: yellow;
}

In [12]:

parameters

flex_title = "A dashboard using a custom.css file"
flex_custom_css = "layouts/customize/custom.css"

flex_title = "A dashboard using a custom.css file" flex_custom_css = "layouts/customize/custom.css"

In [13]:

sidebar

# Sidebar

# Sidebar

In [14]:

### Card in the sidebar

### Card in the sidebar

In [15]:

# Page

# Page

In [16]:

## Section 1

## Section 1

In [17]:

## Section 2

## Section 2

In [18]:

### Card 1

### Card 1

In [19]:

body

# <code>

#

In [20]:

### Card 2

### Card 2

In [21]:

body

# <code>

#

Examples¶

classes-color

custom-css