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.
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:
# Page
## Section 1
### This page has a class=blue tag
"Thats what makes the whole content wrapper blue"
### This Card has a class=yellow and class=darken-4 tags
"So the card looks orange."
## Section 2
### This column section has a class=green tag
"This is some code output"
"The `class=green` on the section cell makes this division (↓↓↓) between the cards green."
### On this Card the code and markdown cells here have different color tags
"This code section has a class=yellow tag"
"This text section has a `class=brown` and `class=white-text` tags"
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 simple example with a simple custom.css
file:
.navbar .container-fluid {
background-color: #000 !important;
}
.page {
background-color: red;
}
.section {
background-color: green;
}
.card {
background-color: #bbbb70;
}
flex_title = "A dashboard using a custom.css file"
flex_custom_css = "customize/custom.css"
flex_author = "built using jupyter-flex"
flex_source_code = "https://github.com/danielfrg/jupyter-flex/blob/master/examples/customize/custom-css.ipynb"
# Page
## Section 1
### Card 1
## Section 2
### Plot 1
# code
### Plot 2
# code
### Plot 3
# code