Customising the iPython notebook UI

April 17, 2014

I spend an awful lot of time inside the IPython notebook on my Macbook Air. However in my opinion the user interface could be improved. Especially on my 13" screen the headers and toolbars take up too much of the vertical real estate.

With that in mind, I spent a few hours redesigning my own IPython. My fork is up on github at I would have preferred to only change my own custom.css in my IPython profile, but a fair amount of the notebooks view elements are contained in the javascript. So a fork seemed the best option. I tried to make the UI as minimal as possible, without losing any of the functionality of the original.

The first thing was to update Bootstrap to version 3, this made a big difference in how pretty everything was. The biggest change was making the two main toolbars into sidebars. This allowed the input/output column to stretch to 100% of the screen height, this has made a big difference on my laptop. When writing code, and definitely when simultaneously evaluating plots, vertical space is much more important than horizontal space. So I think giving the main column more vertical space is the best option for a platform like IPythons notebook.

One other small addition I made was adding tooltips to the sidebar buttons. The tooltip states what the button does, and also states the buttons keyboard shortcut. Its something small that I think will help someone get used to the shortcuts without needing to looks up and memorize the documentation.

Another addition is the readmode button, which centers the text and code cells and sets the widths to 550px. I find reading the notebooks a bit jarring currently when everything is so wide. I will probably work on a theme for nbconvert soon which will make everything a little easier to read.

Here it is with readmode on:

And here is the updated menu: