Skip to content

Cookbook Styling Notebook

Bradley M. Froehle edited this page · 1 revision
Clone this wiki locally

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:
File:themeroller-scr-1.png File:themeroller-scr-2.png
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):
: <strike>@import url("jquery-ui-1.8.21.custom.css");</strike><br/> : @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:
: ...<br /> : <strike><link rel="stylesheet" href="{{static_url("jquery/css/themes/base/jquery-ui.min.css") }}" type="text/css" /></strike><br /> : <link rel="stylesheet" href="{{static_url("jquery/css/themes/redmond/jquery-ui.min.css") }}" type="text/css" /><br /> : ...

Screenshots

Redmond Theme:

File:Chrome-theme-1.png
Hot-Sneaks Theme:
File:Chrome-theme-2.png
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.
Something went wrong with that request. Please try again.