Cookbook: Styling Notebook

If you want to add a bit of color to IPython Notebook appearance, it can be done easily in couple of simple steps:

• Visit ThemeRoller gallery and either roll your own theme by adjusting available elements or download ready made theme:

then copy just the theme folder (it's subfolder in css folder in downloaded theme archive), and put it in your ..\IPython\frontend\html\notebook\static\jquery\css\themes local folder. Following the screenshots we have created ..\IPython\frontend\html\notebook\static\jquery\css\themes\redmond folder.

• In this newly created theme folder (..\redmond) copy this file: jquery-ui.min.css ^[1]
• Now edit the first line in jquery-ui.min.css to match the release of the downloaded theme (current release 1.8.22):

@import url("jquery-ui-1.8.21.custom.css");
@import url("jquery-ui-1.8.22.custom.css");
...

• Finally edit line 9 in ..\IPython\frontend\html\notebook\templates\page.html and set new theme for IPython Notebook:

...
<link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" />
<link rel="stylesheet" href="{{static_url("jquery/css/themes/redmond/jquery-ui.min.css") }}" type="text/css" />
...

Screenshots

Redmond Theme:

Hot-Sneaks Theme:

Voila!

Notes

[1] - This CSS file includes custom theme's CSS file and tries to provide missing elements which are IPython specific styles. It has been tested on IPython 0.13, and it may not work properly on other version.