klab_ipython_notebook

CSS file and logo extension to customize ipython notebook style for Kording lab.

####Quick style change for default notebook

cd ~/.ipython/profile_default/static/custom
rm custom.css
wget https://raw.githubusercontent.com/titipata/klab_ipython_notebook/master/custom.css

There are a lot more custom.css file that you can download from Nikhil S's Github.

####Custom by creating new profile

This is step-by-step on how to create a new ipython profile and add logo to your own ipython. In this repository, I attached css file (adapted from HHammond ipython notebook example) and klab logo for ipython notebook. We can create new profile_klab folder in .ipython folder by typing this bash script:

ipython profile create klab

Note that klab is the profile name. Our final goal, we will add this css file and logo ipynblogo.png into the folder to custom your ipython notebook! First, we can locate .ipython location by typing

ipython locate

in bash shell. Then we can go to that directory. We will see profile_klab folder located in .ipython folder. Now, we can place given file to the directory that we have created. Suppose the .ipython is located in home directory, the location of custom.css file is located in this given location:

~/.ipython/profile_klab/static/custom/custom.css

And the location of logo is located as follow (use mkdir to create folder):

~/.ipython/profile_klab/static/base/images/ipynblogo.png

Now, you can run ipython notebook with your new created profile by typing:

ipython notebook --profile klab

Then, you will rejoice by this beautiful selected font :)

####Custom Style in IPython Notebook

You can also download style to ipython notebook by simply adding these lines to the notebook. This will work with another customize css file which will become handy if you want to change style in particular notebook:

import requests
from IPython.core.display import HTML
link = requests.get("https://raw.githubusercontent.com/titipata/klab_ipython_notebook/master/custom.css")
HTML("<style>"+link.content+"</style>")

####Example IPython Notebook on NBViewer

If you want to put code on NBViewer, we can add <style> and </style> to the beginning of custom.css file (where we have custom_nb.css file added on the repository). Then, we can attach custom_nb.css file to notebook by put few lines of code that includes the file i.e.

from IPython.core.display import HTML
HTML(open("<path_to>/custom_nb.css", "r").read())

Example is shown here in NBViewer link

Inspriation

• Subject Zero, Kording lab mascot

Reference

• HHammond ipython notebook (from nbviewer). Here is his original link

Team members

• Titipat Achakulvisut
• Daniel Acuna

Example IPython Notebook

Thai version of the k-lab logo