#!/usr/bin/env python
# coding: utf-8

# Jupyter-flex allows for some easy ways to customize the look and feel of the dashboard in general and also specific components.
# 
# Jupyter-flex is based on [Material UI](https://material-ui.com) and it allows for easy customization once you are familiar with it.
# 
# ## Class tag
# 
# 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.
# 
# 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).
# 
# For example let's look at this notebook:

# In[ ]:


# Page


# In[ ]:


## Section 1


# In[ ]:


### This page has a class=blue tag


# In[ ]:


"Thats what makes the whole wrapper blue"


# In[ ]:


### This Card has a class=yellow and class=darken-4 tags


# In[ ]:


"So the card looks orange."


# In[ ]:


## Section 2


# In[ ]:


### This column section has a class=green tag


# In[ ]:


# <code>


# In[ ]:


### Cells with tags


# In[ ]:


"This code section has a class=yellow tag"


# [![](/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_classes-colors-reference.png)](/examples/classes-colors.html)
# 
# <p class="img-caption">Click on the image to open the dashboard</p>

# ## Custom CSS
# 
# 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.
# 
# <div class="admonition warning">
#     <p class="admonition-title">Voila Static Files</p>
#     <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>
#     <p>If you are using <code>flex_custom_css</code> with voila you need to run it with:</p>
#     <pre>voila --template=flex --VoilaConfiguration.file_whitelist="['.*']" notebook.ipynb</pre>
# </div>
# 
# There is other parameters that allows you to customize the logo, favicon and other aspects of the dashboard, see [Reference > Parameters](/reference/#parameters).
# 
# One example with a simple `custom.css` file:
# 
# ```css
# .navbar {
#     background-color: yellow !important;
# }
# 
# .sidebar {
#     background-color: #DDD;
# }
# 
# .dashboard {
#     background-color: red;
# }
# 
# .page {
#     background-color: yellow;
# }
# 
# .section {
#     background-color: green;
# }
# 
# .card {
#     background-color: yellow;
# }
# 
# ```

# In[ ]:


flex_title = "A dashboard using a custom.css file"
flex_custom_css = "layouts/customize/custom.css"


# In[ ]:


# Sidebar


# In[ ]:


### Card in the sidebar


# In[ ]:


# Page


# In[ ]:


## Section 1


# In[ ]:


## Section 2


# In[ ]:


### Card 1


# In[ ]:


# <code>


# In[ ]:


### Card 2


# In[ ]:


# <code>


# ## Examples
# 
# <div class="image-grid">
# 
# <a class="image-card" href="/examples/classes-colors.html">
#     <figure>
#         <img src="/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_classes-colors-reference.png">
#         <figcaption>classes-color</figcaption>
#     </figure>
# </a>
# 
# <a class="image-card" href="/examples/custom-css-nbconvert.html">
#     <figure>
#         <img src="/assets/img/screenshots/jupyter_flex.tests.test_layouts/customize_custom-css-reference.png">
#         <figcaption>custom-css</figcaption>
#     </figure>
# </a>
# 
# </div>