In the coming IPython 1.0 (available on their github) you will be able to change the style of your notebook using a custom CSS file. Here are three attempts, which I will describe in details:
-
- CleanNotebook Theme
-
- Zenofpy Theme
-
- Gameboy Theme
Creating a IPython profile
Credit and many thanks for this part go to Matthias Bussonier for his thorough explanatory blog on the subject.
Creating a profile is easy, you just type this line in a terminal:
ipython profile create yourprofilename
Note that you can send commands to the terminal from within your IPython notebook by writing %%bash in the first line of a code cell:
%%bash ipython profile create yourprofilename
This has created a folder named profile_yourprofilename in your IPython folder. If you don’t know where this folder is, just type in a terminal
ipython locate
You have now a new profile ! In the future, to launch IPython with this new profile, use the command
ipython notebook --profile yourprofilename
To later rename a profile, go to your .ipython folder, rename the folder “profile_name” into “profile_newname”, then run
ipython profile create newname
For the moment your profile is identical to the default profile. Now go in your profile folder, and create a subfolder profile_yourprofile/static/css/. In this /css folder we will put CSS files and pictures to tune the appearance of the notebook. Start by creating a file custom.css, we will see how to fill it in the next sections. I just learned enough CSS to make the themes, so I am not really in control here. Comments and suggestions are welcome 🙂
Theme 1: A Clean Notebook
My favorite 🙂 . Here is the content of my custom.css . I just hope that the structure and class names of IPynb html pages will not change too much in the future
/* file custom.css for the theme CleanNotebook */
div#notebook { /* centers the page content */
padding-left:20%;
padding-right:20%;
}
div.cell { /* Tunes the space between cells */
margin-top:1em;
margin-bottom:1em;
}
div.text_cell_render h1 { /* Main titles bigger, centered */
font-size: 2.2em;
line-height:1.4em;
text-align:center;
}
div.text_cell_render h2 { /* Parts names nearer from text */
margin-bottom: -0.4em;
}
div.text_cell_render { /* Customize text cells */
font-family: 'Times New Roman';
font-size:1.5em;
line-height:1.4em;
padding-left:3em;
padding-right:3em;
}
#notebook li { /* More space between bullet points */
margin-top:0.8em;
}
div.cell.code_cell { /* Areat containing both code and output */
background-color:#F1F0FF; /* light blue */
border-radius: 10px; /* rounded borders = friendlier */
padding: 1em;
}
Bonus: Motivational Penguin
I am really fond of the motivational penguin from chibird.com (thanks Jacqueline !!!).
If you want the motivational penguin to cheer you up on the side of your screen while you are coding, put the GIF file in the /css folder and add these few lines to the code above:
#notebook_panel {
background : url('motivational_penguin.gif') no-repeat left center ;
}
Theme 2: Zen of IPython
For this theme you will need to place each of these pictures in your CSS folder (I made all of them from Public Domain pictures from Wikimedia Commons and I put all of them in the Public Domain, where they belong).
The css code is surely far from optimized.
div#notebook {
padding-left:20%;
padding-right:20%;
}
div#ipython-main-app {
background: url('Shotei.jpeg') no-repeat top left;
}
body {
background : url('paper.jpeg') ;
}
div.cell {
margin-top:20px;
margin-bottom:20px;
}
h1 {
text-align:center;
}
div#notebook li {
margin-bottom:20px;
}
p,li,h1 {
line-height:120%;
}
p,ul {
padding-left:10%;
padding-right:10%;
}
.text_cell_render{
font-family: 'Palatino','Arial';
font-size:1.8em;
}
.text_cell h1 {
font-size: 2.2em;
text-align:center;
line-height:120%;
}
.text_cell h2 {
font-size: 1.8em;
margin-bottom:0;
}
div.input_area {
background: url('mountain_paper.png') ;
border-radius: 15px;
overflow:auto;
}
div.CodeMirror {
background: url('mountain.jpeg') repeat-y top right;
background-size: 20%;
padding-right:20%;
font-size: 1.3em;
}
div.CodeMirror-scroll {
padding-bottom:1.01em;
}
.output_wrapper{
background-image: url('sky.jpeg');
border-radius: 15px;
}
div.output {
border-radius: 15px;
background: url('cherryFlower.jpeg') repeat-y right;
background-size: 25%;
}
div.prompt.input_prompt{
display:none;
}
div.code_cell {
background: #e6ddce;
-moz-border-radius: 15px;
border-radius: 15px;
padding: 15px;
font-size:14px;}
Theme 3: Gameboy
For this one you will need the buttons:
.prompt {display:none;}
div.cell.code_cell {
max-width: 800px;
background-color:white;
background:url('buttons.jpeg') no-repeat center bottom;
background-size:80%;
border-color: black;
border-radius: 30px;
padding-bottom:5px;
padding: 1em 1em 200px 1em;
}
div.output_wrapper {
margin-left:0px;
padding-left:0px;
padding-top:0px;
}
div.input_area, .output_stdout {
margin-left:110px;
border-style:solid;
max-width:600px;
background-color: #626e02;
border-color: #656e7f;
border-width: 20px;
}
div.output_stdout {
border-top: none;
margin-top:-26px;
padding-top:26px;
}
div.CodeMirror-scroll {
padding-bottom:20px
}
div.CodeMirror, div.output_stdout pre {
padding: 0.5em 0.5em 0.5em 0.8em;
font-size: 1.6em;
font-family:"G.B.BOOT";
}
.cm-s-ipython { color: black; }
.cm-s-ipython span.cm-keyword {color: black;}
.cm-s-ipython span.cm-number {color: black;}
.cm-s-ipython span.cm-operator {color:black;}
.cm-s-ipython span.cm-meta {color: black;}
.cm-s-ipython span.cm-comment {color: black;}
.cm-s-ipython span.cm-string {color: black;}
.cm-s-ipython span.cm-error {color: black;}
.cm-s-ipython span.cm-builtin {color: black;}
.cm-s-ipython span.cm-variable {color: black;}
The Sugar High 