Customize jupyter

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
 # ================================================================================

files/custom.css

+@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;
+}
+