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 frontend is based on Bootstrap 4, 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 components

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]:
# Regular page
In [2]:
## Section 1
In [3]:
class=yellow
class=darken-4
### This Card has a class=yellow and class=darken-4 tags
In [4]:
#### This is just some text
In [5]:
class=green
## Section 2
In [6]:
### This column section has a class=green tag
In [7]:
#### That makes the division between this card and the card below green
In [8]:
### On this Card the code and markdown cells here have different color tags
In [9]:
chart
class=purple
"This code section has a class=purple tag"
Out[9]:
'This code section has a class=purple tag'
In [10]:
text
class=brown
class=white-text
#### This text section has a `class=brown` and `class=white-text` tags
In [11]:
class=blue
# Blue page
In [12]:
### Content

Jupyter-flex customization

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 nbconvert or voila.

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 simple example with a simple custom.css file:

.page-wrapper {
    background-color: red;
}

.section {
    background-color: green;
}

.card {
    background-color: yellow;
}
In [13]:
parameters
flex_title = "Custom CSS"
flex_author = "A dashboard with some extra CSS"
flex_logo = "customize/logo.png"
flex_favicon = "customize/favicon.ico"
flex_custom_css = "customize/custom.css"
flex_source_code = "https://github.com/danielfrg/jupyter-flex/blob/master/examples/customize/custom-css.ipynb"
In [14]:
# Page
In [15]:
## Section 1
In [16]:
text
# code
In [17]:
## Section 2
In [18]:
### Plot 1
In [19]:
chart
# code
In [20]:
### Plot 2
In [21]:
chart
# code
In [22]:
### Plot 3
In [23]:
chart
# code

Jupyter-flex customization