IPython is an awesome tool, but I've found that figuring out how to customize the look and feel of the notebook isn't easy. My goal here is to demonstrate how you can customize the look of your notebooks using a single .css file and use that theme wherever your notebooks go.

Next, I wanted to flatten out the look of the interface. Knowing that IPython uses Bootstrap makes modifying things easier, and the rest can be done just using the Google Chrome developer tools.

Here are the tweaks that I thought were important for making my notebook mine:

Flatten the toolbar at the top

Flatten buttons

Remove gradients

Make fonts less distracting

Mute cells visually

Reduce border

Reduce colours (use drop shadow for selected cell

Mute input prompt

Here's the remainder of my customization code:

.prompt.input_prompt{color:rgba(0,0,0,0.5);}.cell.command_mode.selected{border-color:rgba(0,0,0,0.1);}.cell.edit_mode.selected{border-color:rgba(0,0,0,0.15);box-shadow:0px0px5px#f0f0f0;-webkit-box-shadow:0px0px5px#f0f0f0;}div.output_scroll{-webkit-box-shadow:inset02px8pxrgba(0,0,0,0.1);box-shadow:inset02px8pxrgba(0,0,0,0.1);border-radious:2px;}#menubar.navbar-inner{background:#fff;-webkit-box-shadow:none;box-shadow:none;border-radius:0;border:none;font-family:lato;font-weight:400;}.navbar-fixed-top.navbar-inner,.navbar-static-top.navbar-inner{box-shadow:none;-webkit-box-shadow:none;border:none;}div#notebook_panel{box-shadow:none;-webkit-box-shadow:none;border-top:none;}div#notebook{border-top:1pxsolidrgba(0,0,0,0.15);}#menubar.navbar.navbar-inner,.toolbar-inner{padding-left:0;padding-right:0;}#checkpoint_status,#autosave_status{color:rgba(0,0,0,0.5);}#header{font-family:lato;}#notebook_name{font-weight:200;}/* This is a lazy fix, we *should* fix the background for each Bootstrap button type*/#site*.btn{background:#fafafa;-webkit-box-shadow:none;box-shadow:none;}

In NBViewer (and notebooks) I haven't yet found an elegent way to customize CSS. There is a popular but ugly/dangerous way which involves injecting custom css into each cell. Even the solution I'm posting here I think is poor for the reasons given here; it's likely to break on future versions and is tedious to insert.

My current working solution was borrwed from Cam DP and his book Bayesian Methods for Hackers. The idea is that if there is a <style> tag in IPython, the notebook renders it and NBViewer also renders it. I modified Cam's code to use the default IPython profile's custom.css file.

Just run the following code snippet in the bottom of any IPython notebook:

There is one curious feature in the code for NBVeiwer. This code actually checks the notebook metadata (which is nice and clean) and looks for a css theme (a specified css file, but only in the servers /static/css/theme/ directory. The unfortunate part of this is that you can only use Cam's theme from Bayesian Methods or one other linear algebra notebook theme (cdp_1.css or css_linalg.css respectively, and you need to remove the .css bit when specifying a theme).

Making NBConvert do what you want is one of the trickiest bits about theming IPython. Again, the above code snippet makes NBConvert do exactly what we wanted. You can also specify a custom.css file in the directory that you export your notebooks in and that file will automatically overwrite default styles.

Creating an NBConvert theme is a little bit more involved. NBConvert uses Jinja2 for templates. I'm not going to get into creating NBConvert templates right now because I think the default battery is pretty good for most cases. Minrk has some great examples of how to create a template here. When creating a template you don't always need the config file each time, just the .tpl file and specifying the output format.

The command needed to generate from a custom NBConvert is (from the directory containing custom_template):

ipython nbconvert --template custom_template.tpl <notebook>

followed by:

ln .ipython/profile_default/static/custom/custom.css ./custom.css

This will convert your notebook and create a symbolic link (again, unix-based only) so that your nbconverted notebooks will change when you modify your profile's custom.css file.

This website does not host notebooks, it only renders notebooks
available on other websites.