Customizing the CSS style in the notebook

Of course, we can create a plugin or use the custom.css file in the profile we are using. Let's go with the second option and then once you know how the change the style, if you want, you can create your own plugin to interact with the style of the notebook.

Let's modify the custom.css file of the pycones14 profile (I will use the style extracted from this one make by Jessica B. Hamrick):


In [1]:
profile_dir = !ipython locate profile pycones14
profile_dir = profile_dir[0]
profile_dir


Out[1]:
'/home/kiko/.ipython/profile_pycones14'

In [2]:
%load $profile_dir/static/custom/custom.css

In [3]:
%%writefile $profile_dir/static/custom/custom.css
/*
Placeholder for custom user CSS

mainly to be overridden in profile/static/custom/custom.css

This will always be an empty file in IPython
*/

/* Solarized color pallet */
.solarized.base03 { color: #002b36; }
.solarized.base02 { color: #073642; }
.solarized.base01 { color: #586e75; }
.solarized.base00 { color: #657b83; }
.solarized.base0 { color: #839496; }
.solarized.base1 { color: #93a1a1; }
.solarized.base2 { color: #eee8d5; }
.solarized.base3  { color: #fdf6e3; }
.solarized.solar-yellow  { color: #b58900; }
.solarized.solar-orange  { color: #cb4b16; }
.solarized.solar-red { color: #dc322f; }
.solarized.solar-magenta { color: #d33682; }
.solarized.solar-violet  { color: #6c71c4; }
.solarized.solar-blue { color: #268bd2; }
.solarized.solar-cyan { color: #2aa198; }
.solarized.solar-green { color: #859900; }

.ansiyellow { color: #b58900; }
.ansiorange { color: #cb4b16; }
.ansired { color: #dc322f; }
.ansimagenta { color: #d33682; }
.ansiviolet { color: #6c71c4; }
.ansiblue { color: #268bd2; }
.ansicyan { color: #2aa198; }
.ansigreen { color: #859900; }

/* Notebook styling */

body, p, div.rendered_html { 
    color: #93a1a1;
    font-family: 'PT Serif', Georgia, Times, 'Times New Roman', serif;
    font-size: 11pt;
}

body { background-color: #eee8d5 !important; }

#notebook { 
    background-color: #073642 !important;
    box-shadow: inset 20px 36px 20px -35px black !important;
}

#maintoolbar { padding-top: 1em; padding-bottom: 1em; }
#header { border-color: #93a1a1 !important; }

/* Pager */

#pager_splitter { background: none !important; }
#pager {
    background-color: #eee8d5;
}
div#pager pre {
    background-color: #fdf6e3;
    color: #586e75;
}    

/* Forms and menus */

.navbar-default, .navbar-static-top {
    background-color: #fdf6e3 !important;
    color: #586e75 !important;
}
.navbar-default { border: none !important; }
.navbar-nav > li > a { color: #586e75 !important; }
.navbar-nav > li.open > a { background-color: #eee8d5 !important; color: #93a1a1 !important; }
.nav > li.active > a { background-color: #eee8d5 !important; color: #586e75 !important; }

.dropdown-menu { background-color: #fdf6e3 !important; border: none !important; }
.dropdown-menu > li > a { color: #586e75 !important; }
.dropdown-menu > li > a:hover { background-color: #eee8d5 !important; }
.dropdown-menu > li.disabled > a { color: #93a1a1 !important; }

button, .btn-default, .form-control, select {
    background-color: #fdf6e3 !important;
    color: #586e75 !important;
}

/* Tooltips */

.completions {
    border: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-radius: 0;
    margin-top: 0.5em;
}
.completions select { font-size: 11pt; }

.ipython_tooltip .tooltiptext pre { 
    font-size: 10pt;
    background-color: #eee8d5;
    color: #586e75;
}
.ipython_tooltip {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #eee8d5;
    color: #586e75;
}
.pretooltiparrow:before {
    background-color: #eee8d5;
}

/* Cell output */

.rendered_html pre, .rendered_html code {
    color: inherit !important;
    background-color: inherit !important;
}
div.output_area pre {
    color: #93a1a1 !important;
}
.rendered_html table, .rendered_html td, .rendered_html th {
    border: 1px solid #586e75 !important;
}

/* Modal dialogs */

.modal-content, .modal-content p {
    background-color: #eee8d5 !important;
    color: #586e75 !important;
}

/* Cell styling */

div.cell.selected { border-color: #839496 !important; }
div.cell.edit_mode { border-color: #268bd2 !important; }
div.input_prompt { color: #268bd2 !important; }
div.output_prompt { color: #dc322f !important; }
div.input_area { border: none !important; background: none !important; }

.celltoolbar {
    background: #eee8d5 !important;
    color: #586e75 !important;
    border: 1px solid #002b36 !important;
}

/* CodeMirror Styling */

.cm-s-ipython {
    line-height: 1.45em;
    color-profile: sRGB;
    rendering-intent: auto;
    background-color: #002b36;
    color: #93a1a1;
    text-shadow: none;
    border-radius: 4px;
}

/* Cursor */

.cm-s-ipython div.CodeMirror-cursor {
    border: none;
    width: 0.6em;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Gutters */
.cm-s-ipython .CodeMirror-gutters {
  border-right: 1px solid;
}

.cm-s-ipython .CodeMirror-gutters {
  background-color:  #002b36;
  border-color: #00232c;
}

.cm-s-ipython .CodeMirror-linenumber {
  text-shadow: #021014 0 -1px;
  padding: 0 8px 0 0;
  color: #586e75;
}

.cm-s-ipython .CodeMirror-guttermarker-subtle { color: #586e75; }
.cm-s-ipython .CodeMirror-guttermarker { color: #ddd; }

/* Syntax highlighting */

.cm-s-ipython span.cm-keyword { color: #cb4b16 }
.cm-s-ipython span.cm-atom { color: #d33682; }
.cm-s-ipython span.cm-number { color: #d33682; }
.cm-s-ipython span.cm-def { color: #268bd2; font-weight: bold; }

.cm-s-ipython span.cm-variable { color: #93a1a1; }
.cm-s-ipython span.cm-variable-2 { color: #b58900; }
.cm-s-ipython span.cm-variable-3 { color: #6c71c4; }

.cm-s-ipython span.cm-property { color: #2aa198; }
.cm-s-ipython span.cm-operator {color: #6c71c4;}

.cm-s-ipython span.cm-comment { color: #6c71c4; font-style: italic; }

.cm-s-ipython span.cm-string { color: #2aa198; }
.cm-s-ipython span.cm-string-2 { color: #b58900; }

.cm-s-ipython span.cm-meta { color: #859900; }
.cm-s-ipython span.cm-qualifier { color: #b58900; }
.cm-s-ipython span.cm-builtin { color: #859900; }
.cm-s-ipython span.cm-bracket { color: #cb4b16; }
.cm-s-ipython .CodeMirror-matchingbracket { color: #b58900 !important; font-weight: bold; }
.cm-s-ipython .CodeMirror-nonmatchingbracket { color: #dc322f; }
.cm-s-ipython span.cm-tag { color: #93a1a1 }
.cm-s-ipython span.cm-attribute {  color: #2aa198; }
.cm-s-ipython span.cm-header { color: #586e75; }
.cm-s-ipython span.cm-quote { color: #93a1a1; }
.cm-s-ipython span.cm-hr {
  color: transparent;
  border-top: 1px solid #586e75;
  display: block;
}
.cm-s-ipython span.cm-link { color: #93a1a1; cursor: pointer; }
.cm-s-ipython span.cm-special { color: #6c71c4; }
.cm-s-ipython span.cm-em {
  color: #999;
  text-decoration: underline;
  text-decoration-style: dotted;
}
.cm-s-ipython span.cm-strong { color: #eee; }
.cm-s-ipython span.cm-tab:before {
  content: "➤";   /*visualize tab character*/
  color: #586e75;
  position:absolute;
}
.cm-s-ipython span.cm-error,
.cm-s-ipython span.cm-invalidchar {
  color: #586e75;
  border-bottom: 1px dotted #dc322f;
}


Overwriting /home/kiko/.ipython/profile_pycones14/static/custom/custom.css

If you want to use a css style on http://nbviewer.ipython.org you can use the following recipe:


In [ ]:
from IPython.core.display import HTML
def css_styling():
    styles = open('../styles/custom.css', 'r').read()
    return HTML(styles)
css_styling()

More