{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# Customization\n",
    "\n",
    "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": {},
   "outputs": [],
   "source": [
    "# Regular page"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Section 1"
   ]
  },
  {
   "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": {},
   "outputs": [],
   "source": [
    "#### This is just some text"
   ]
  },
  {
   "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": {},
   "outputs": [],
   "source": [
    "#### That makes the division between this card and the card below 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": [
     "chart",
     "class=purple"
    ]
   },
   "outputs": [],
   "source": [
    "\"This code section has a class=purple tag\""
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "text",
     "class=brown",
     "class=white-text"
    ]
   },
   "outputs": [],
   "source": [
    "#### This text section has a `class=brown` and `class=white-text` tags"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "class=blue"
    ]
   },
   "outputs": [],
   "source": [
    "# Blue page"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Content"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex customization](/assets/img/screenshots/customize/classes-colors.png \"classes-colors\")](/examples/classes-colors.html)\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 `nbconvert` or `voila`.\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 simple example with a simple `custom.css` file:\n",
    "\n",
    "```\n",
    ".page-wrapper {\n",
    "    background-color: red;\n",
    "}\n",
    "\n",
    ".section {\n",
    "    background-color: green;\n",
    "}\n",
    "\n",
    ".card {\n",
    "    background-color: yellow;\n",
    "}\n",
    "```"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "parameters"
    ]
   },
   "outputs": [],
   "source": [
    "flex_title = \"Custom CSS\"\n",
    "flex_author = \"A dashboard with some extra CSS\"\n",
    "flex_logo = \"customize/logo.png\"\n",
    "flex_favicon = \"customize/favicon.ico\"\n",
    "flex_custom_css = \"customize/custom.css\"\n",
    "flex_source_code = \"https://github.com/danielfrg/jupyter-flex/blob/master/examples/customize/custom-css.ipynb\""
   ]
  },
  {
   "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": {
    "tags": [
     "text"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "## Section 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Plot 1"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "chart"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Plot 2"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "chart"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "### Plot 3"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {
    "tags": [
     "chart"
    ]
   },
   "outputs": [],
   "source": [
    "# code"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "[![Jupyter-flex customization](/assets/img/screenshots/customize/custom-css.png \"custom-css\")](/examples/custom-css.html)\n"
   ]
  }
 ],
 "metadata": {
  "celltoolbar": "Tags",
  "kernelspec": {
   "display_name": "Python 3",
   "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.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 4
}