{
 "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 is based on [Material UI](https://material-ui.com) and 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 component.\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 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": [
    "# <code>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Cells with tags"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "class=yellow",
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "\"This code section has a class=yellow tag\""
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![](/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_classes-colors-reference.png)](/examples/classes-colors.html)\n",
    "\n",
    "<p class=\"img-caption\">Click on the image to open the dashboard</p>"
   ]
  },
  {
   "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",
    "<div class=\"admonition warning\">\n",
    "    <p class=\"admonition-title\">Voila Static Files</p>\n",
    "    <p>By default Voila doesn't serve all files, see <a href=\"https://voila.readthedocs.io/en/latest/customize.html#serving-static-files\">Serving static files</a>.</p>\n",
    "    <p>If you are using <code>flex_custom_css</code> with voila you need to run it with:</p>\n",
    "    <pre>voila --template=flex --VoilaConfiguration.file_whitelist=\"['.*']\" notebook.ipynb</pre>\n",
    "</div>\n",
    "\n",
    "There is other parameters that allows you to customize the logo, favicon and other aspects of the dashboard, see [Reference > Parameters](/reference/#parameters).\n",
    "\n",
    "One example with a simple `custom.css` file:\n",
    "\n",
    "```css\n",
    ".navbar {\n",
    "    background-color: yellow !important;\n",
    "}\n",
    "\n",
    ".sidebar {\n",
    "    background-color: #DDD;\n",
    "}\n",
    "\n",
    ".dashboard {\n",
    "    background-color: red;\n",
    "}\n",
    "\n",
    ".page {\n",
    "    background-color: yellow;\n",
    "}\n",
    "\n",
    ".section {\n",
    "    background-color: green;\n",
    "}\n",
    "\n",
    ".card {\n",
    "    background-color: yellow;\n",
    "}\n",
    "\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_title = \"A dashboard using a custom.css file\"\n",
    "flex_custom_css = \"layouts/customize/custom.css\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "sidebar"
    ]
   },
   "outputs": [],
   "source": [
    "# Sidebar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Card in the sidebar"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "# Page"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Section 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Section 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Card 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# <code>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Card 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "body"
    ]
   },
   "outputs": [],
   "source": [
    "# <code>"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Examples\n",
    "\n",
    "<div class=\"image-grid\">\n",
    "\n",
    "<a class=\"image-card\" href=\"/examples/classes-colors.html\">\n",
    "    <figure>\n",
    "        <img src=\"/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_classes-colors-reference.png\">\n",
    "        <figcaption>classes-color</figcaption>\n",
    "    </figure>\n",
    "</a>\n",
    "\n",
    "<a class=\"image-card\" href=\"/examples/custom-css-nbconvert.html\">\n",
    "    <figure>\n",
    "        <img src=\"/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_custom-css-reference.png\">\n",
    "        <figcaption>custom-css</figcaption>\n",
    "    </figure>\n",
    "</a>\n",
    "\n",
    "</div>"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.8.12"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}