diff --git a/Dockerfile b/Dockerfile
index c6208458e04a4a5719ff10aaaf8832c34ff55f27..90130885420e3096c132355d34715a980bf9272f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -169,7 +169,7 @@ RUN pip install ./atomic-features-package
# KERAS-VIS
# ================================================================================
-WORKDIR opt/keras-vis
+WORKDIR /opt/keras-vis
COPY 3rdparty/keras-vis .
RUN pip install .
@@ -227,15 +227,23 @@ RUN ln -s /opt/tutorials/*/*.ipynb . \
WORKDIR $TUTORIALS_HOME/assets
RUN ln -s /opt/tutorials/*/assets/* .
-
# Linking data may required by the tutorials
WORKDIR $TUTORIALS_HOME/data
RUN mkdir data && ln -s /opt/tutorials/*/data/* .
-
RUN fix-permissions $TUTORIALS_HOME \
&& fix-permissions $HOME/.local/share/jupyter
+# Customize jupyter
+WORKDIR $HOME
+COPY files/custom.css custom.css
+COPY files/logo.png logo.png
+COPY files/Titillium Titillium
+RUN mkdir .jupyter/custom
+RUN mv custom.css .jupyter/custom \
+ && mv logo.png .jupyter/custom \
+ && mv Titillium .jupyter/custom
+
# ================================================================================
# Switch back to jovyan to avoid accidental container runs as root
# ================================================================================
diff --git a/files/custom.css b/files/custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..f0f43031800c621428794e17c29216854c5a3839
--- /dev/null
+++ b/files/custom.css
@@ -0,0 +1,343 @@
+@font-face{
+ font-family: titillium;
+ src: url('./Titillium/TitilliumWeb-Regular.ttf');
+}
+
+@media not print {
+ .notebook_app #notebook {
+ background-color: #31B5CC;
+
+ }
+ .notebook_app #notebook-container, .edit_app #texteditor-backdrop {
+ background-color: 'white';
+ border-radius: .35em;
+ }
+}
+
+div#notebook .text_cell_render {
+ font-family: titillium;
+ font-size: 16.25px;
+ line-height: 1.5;
+ color: #2A3C67;
+}
+
+/* Logo */
+
+#ipython_notebook img{
+ display:block;
+ background: url('./logo.png') no-repeat;
+ background-size: contain;
+ width: 100px;
+ height: 50px;
+ padding-left: 100px;
+ padding-right: 50px;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+/* GLOBALS */
+
+/* The majority of the text on the intro page is warapped in the <a> tag.*/
+
+@media not print {
+ body {
+ background-color: #eee;
+ }
+}
+
+a {
+ color: #2A3C67;
+}
+
+a:hover, a:focus {
+ color: white;
+}
+
+
+/* Set the color of the h2 heading.*/
+
+h2 {
+ color: #2A3C67;
+}
+
+
+/* Set the text color for th <p> tag. Most of the text on the nbextension page is wrapped with the <p> tag. */
+
+p {
+ color: #2A3C67;
+}
+
+li {
+ color: #2A3C67;
+}
+/* INTRO PAGE */
+
+body[data-notebook-path] {
+ background-color:white;
+}
+
+.tabbable {
+ color: #2A3C67;
+}
+
+.nav-tabs {
+ border-bottom-color: #cbd6f0;
+}
+
+.nav-tabs>li>a:hover, .nav>li>a:focus {
+ background-color: #7FEFEF;
+ border-color: #cbd6f0;
+}
+
+.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
+ color: white;
+ background-color: #7FEFEF;
+ border-color: #cbd6f0;
+}
+
+.list_container {
+ border-color: #cbd6f0;
+}
+
+.list_container>div {
+ border-bottom-color: #cbd6f0;
+}
+
+.list_item:hover {
+ background-color: #7FEFEF;
+}
+
+.list_header {
+ background-color: #7FEFEF;
+}
+
+#notebook_list input[type="checkbox"] {
+ opacity: 0.6;
+}
+
+.item_icon {
+ color: #2A3C67;
+}
+
+.item_icon:hover {
+ color: white;
+}
+
+.panel {
+ border-color: #cbd6f0;
+ background-color: white;
+}
+
+.panel-default>.panel-heading {
+ border-color: #cbd6f0;
+}
+
+#site .panel-group .panel .panel-heading {
+ background-color: #7FEFEF;
+}
+
+#running .panel-group .panel .panel-body .list_container .list_item {
+ border-bottom-color: #cbd6f0;
+}
+
+/* TERMINAL INTERFACE */
+
+.terminal-app #site {
+ background: #00DFE0;
+}
+
+.terminal-app .terminal {
+ background: #00DFE0 ;
+}
+
+/* Header */
+
+body > #header {
+ background: white;
+}
+
+#notebook_name {
+ font-weight: 500;
+ color: #2A3C67;
+
+}
+
+.checkpoint_status,
+.autosave_status {
+ color: #2A3C67;
+}
+
+.navbar-default .navbar-nav > li > a, #kernel_indicator {
+ color: #2A3C67;
+ background-color: white;
+}
+
+.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover {
+ color: #31B5CC;
+}
+
+div.input_area {
+ background-color: white;
+ border: none;
+ border-radius: 1;
+ background: #f7f7f7;
+ line-height: 1.5em;
+ margin: 0.5em 0;
+ padding: 0;
+}
+
+.navbar-default {
+ background: transparent;
+ color: #b7b7b7;
+ border-color: white;
+}
+
+.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
+ color: #fff;
+ background-color: #7FEFEF;
+}
+
+.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
+ color: #fff;
+ background-color:
+ #7FEFEF;
+}
+
+/*/* Dropdown menus */
+
+.dropdown-menu {
+ background: white;
+ color: #2A3C67;
+}
+
+.dropdown-menu>li>a, .dropdown-submenu>a:after, .dropdown-menu>li>a:visited:after {
+ color: #2A3C67;
+}
+
+.dropdown-menu .divider {
+ background-color: #2A3C67;
+}
+
+.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
+ color: #fff;
+ background-color: #7FEFEF;
+}
+
+.dropdown-menu>li>a:hover:after, .dropdown-menu>li>a:focus:after, .dropdown-menu>li>a:active:after {
+ color: #fff;
+}
+
+/* Markdown */
+
+.CodeMirror.cm-s-default {
+ font-family: titillium;
+ font-size: 16.25px;
+ border-radius: .35em;
+}
+
+/* Remove separation cells */
+
+div.input_area {
+ border: none;
+ border-radius: 0;
+ background: white;
+ line-height: 2.5em;
+}#notebook-container{
+ box-shadow: none !important;
+ background-color: white;
+}
+
+/* Code */
+
+.CodeMirror {
+ border-radius: 1.35em;
+ box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.44);
+
+}
+
+div.CodeMirror-selected {
+ background :#598EBCAB;
+}
+
+.cm-s-ipython.CodeMirror {
+ background-color: #3766b60c;
+}
+
+.cm-s-ipython .CodeMirror-gutters {
+ background: #00DFE0;
+}
+
+.cm-s-ipython .CodeMirror-linenumber {
+ color: #000000;
+ font-size: 10px;
+}
+
+.cm-s-ipython span.cm-atom {
+ color: #61afef;
+}
+
+.cm-s-ipython span.cm-number {
+ color: #000000;
+}
+
+.cm-s-ipython span.cm-property {
+ color: #000000;
+}
+
+.cm-s-ipython span.cm-attribute {
+ color: #000000;
+}
+
+.cm-s-ipython span.cm-keyword {
+ color: #1aa8a8;
+}
+
+.cm-s-ipython span.cm-string {
+ color: #166161;
+}
+
+.cm-s-ipython span.cm-meta {
+ color: #51b6c3;
+}
+
+.cm-s-ipython span.cm-operator {
+ color: #1491f7;
+}
+
+.cm-s-ipython span.cm-builtin {
+ color: #1491f7;
+}
+
+.cm-s-ipython span.cm-variable {
+ color: #000000;
+}
+
+.cm-s-ipython span.cm-variable-2 {
+ color: #000000;
+}
+
+.cm-s-ipython span.cm-variable-3 {
+ color: #51b6c3;
+}
+
+.cm-s-ipython span.cm-def {
+ color: #1e1ead;
+}
+
+.cm-s-ipython span.cm-bracket {
+ color: #B5C2D9;
+ font-weight: bold;
+}
+
+.cm-s-ipython span.cm-tag {
+ color: #61afef;
+}
+
+.cm-s-ipython span.cm-storage {
+ color: #61afef;
+}
+
+.cm-s-ipython span.cm-entity {
+ color: #61afef;
+}
+
diff --git a/files/logo.png b/files/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..30f546aa76076bea1e73e592ea07061fbf7cfb64
Binary files /dev/null and b/files/logo.png differ