{ "cells": [ { "cell_type": "markdown", "metadata": {}, "source": [ "Jupyter-flex allows for some easy ways to customize the look and feel of the dashboard in general and also specific components.\n", "\n", "Jupyter-flex frontend is based on [Bootstrap 4](https://getbootstrap.com/), it allows for easy customization once you are familiar with it.\n", "\n", "## Class tag\n", "\n", "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\n", "\n", "Jupyter-flex includes multiple color CSS classes as part of it's default theme, these colors are the same as on [Materialize CSS Colors](https://materializecss.com/color.html).\n", "\n", "For example let's look at this notebook:" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "class=blue" ] }, "outputs": [], "source": [ "# Page" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "## Section 1" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "### This page has a class=blue tag" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "\"Thats what makes the whole content wrapper blue\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "class=yellow", "class=darken-4" ] }, "outputs": [], "source": [ "### This Card has a class=yellow and class=darken-4 tags" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "\"So the card looks orange.\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "class=green" ] }, "outputs": [], "source": [ "## Section 2" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "### This column section has a class=green tag" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "\"This is some code output\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body" ] }, "outputs": [], "source": [ "\"The `class=green` on the section cell makes this division (↓↓↓) between the cards green.\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": {}, "outputs": [], "source": [ "### On this Card the code and markdown cells here have different color tags" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body", "class=yellow" ] }, "outputs": [], "source": [ "\"This code section has a class=yellow tag\"" ] }, { "cell_type": "code", "execution_count": null, "metadata": { "tags": [ "body", "class=brown", "class=white-text" ] }, "outputs": [], "source": [ "\"This text section has a `class=brown` and `class=white-text` tags\"" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "[![Jupyter-flex customization](/assets/img/screenshots/customize/classes-colors.png \"classes-colors\")](/examples/classes-colors.html)\n", "\n", "
" ] }, { "cell_type": "markdown", "metadata": {}, "source": [ "## Custom CSS\n", "\n", "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.\n", "\n", "Custom CSS files plus `class` tags allows you to easily customize all aspects of the dashboard.\n", "\n", "Voila Static Files
\n", "By default Voila doesn't serve all files, see Serving static files.
\n", "If you are using flex_custom_css
with voila you need to run it with:
voila --template=flex --VoilaConfiguration.file_whitelist=\"['.*']\" notebook.ipynb\n", "