Customizing the CSS style in the notebook

In this recipe, we show how to customize the CSS in the notebook interface and in an exported HTML notebook.

Getting ready

You are expected to know a bit of CSS3 for this recipe. You can find many tutorials online (see the references at the end of this recipe).

You also need to download the Notebook dataset from the book's website (http://ipython-books.github.io), and extract it in the current directory.

How to do it...

1. First, we create a new IPython profile to avoid cluttering our default profile as follows:

   In [1]: !ipython profile create custom_css

2. In Python, we retrieve the path to this profile (~/.ipython) and to the custom.css file (empty by default).

   In [2]: dir = !ipython locate profile custom_css
           dir = dir[0]
   In [3]: import os
           csspath = os.path.realpath(os.path.join(
                       dir, 'static/custom/custom.css'))
   In [4]: csspath
   Out[4]: '~\.ipython\profile_custom_css\static\
                                          custom\custom.css'

3. We can now edit this file here. We change the background color, the font size of code cells, the border of some cells, and we highlight the selected cells in edit mode.

   In [5]: %%writefile {csspath}
           
           body {
               /* Background color for the whole notebook. */
               background-color: #f0f0f0;
           }
           
           /* Level 1 headers. */
           h1 {
               text-align: right;
               color: red;
           }
           
           /* Code cells. */
           div.input_area > div.highlight > pre {
               font-size: 10px;
           }
           
           /* Output images. */
           div.output_area img {
               border: 3px #ababab solid;
               border-radius: 8px;
           }
           
           /* Selected cells. */
           div.cell.selected {
               border: 3px #ababab solid;
               background-color: #ddd;
           }
           
           /* Code cells in edit mode. */
           div.cell.edit_mode {
               border: 3px red solid;
               background-color: #faa;
           }
   Overwriting C:\Users\Cyrille\.ipython\profile_custom_css\static\custom\custom.css

   Opening a notebook with the custom_css profile (with the ipython notebook --profile=custom_css command) leads to a custom style as follows:

   

   Custom CSS in the interactive notebook interface

4. We can also use this style sheet with nbconvert. We just have to convert a notebook to a static HTML document, and copy the custom.css file in the current directory. Here, we use a test notebook that has been downloaded from the book's website (see Getting ready):

   In [6]: !cp {csspath} custom.css
           !ipython nbconvert --to html data/test.ipynb
   [NbConvertApp] Writing 187617 bytes to test.html

5. Here is what this HTML document looks like:

   In [7]: from IPython.display import IFrame
           IFrame('test.html', 600, 650)

   

There's more...

Here are a few tutorials and references about CSS:

• CSS tutorial on w3schools, at www.w3schools.com/css/DEFAULT.asp
• CSS tutorial on Mozilla Developer Network, at https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started
• Blog post by Matthias Bussonnier about how to customize the notebook CSS, at http://nbviewer.ipython.org/github/Carreau/posts/blob/master/Blog1.ipynb

See also

• The Adding custom controls in the notebook toolbar recipe