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:
# Regular page
## Section 1
### This Card has a class=yellow and class=darken-4 tags
#### This is just some text
## Section 2
### This column section has a class=green tag
#### That makes the division between this card and the card below green
### On this Card the code and markdown cells here have different color tags
"This code section has a class=purple tag"
#### This text section has a `class=brown` and `class=white-text` tags
# Blue page
### Content
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;
}
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"
# Page
## Section 1
# code
## Section 2
### Plot 1
# code
### Plot 2
# code
### Plot 3
# code