11 Practical Tips You Need to Know to Personalize Jupyter Notebook

CUSTOMIZING JUPYTER

Are you a python programmer who is using Jupyter Notebook as your compiler? If you want to try a new taste in running your python code in Jupyter Notebook (hereafter; Jupyter), you can change and personalize it by your favorite color, font family. You can apply 11 practical tips I recommend to build your Jupyter user interface.

The default Jupyter you might see when you open it is shown in Figure 1.

At the end of this story, I will personalize my Jupyter into my themes, as shown in Figure 2.

This story is the follow-up story for applying the landing page into Jupyter. I reuse some codes in that story and give some additional CSS customization from Rodrigo Silveira‘s story. He builds unique Jupyter themes using CSS. I try to explain the meaning of each CSS code I use.

To customize it using CSS, you need to check a file named custom.css in the directory ~/.jupyter/custom. If you have it, you can add some CSS code to it. But, if you have not had it, you need to create the file in the mentioned directory. If the directory is not available, you need to create the directory. You can see the file I mentioned in Figure 3.

The directory I mean is in Linux. If you use a different OS, you need to find the directory for whom Jupyter is installed. For Windows users, I think it is in the following directory.

C:UsersYourUsernameAnaconda3Libsite-packagesnotebookstaticcustomcustom.css

But, I have not checked it.

01. Customizing title

When you open Jupyter, you will be directed to the default Jupyter home page, http://localhost:8888/tree. The interface of the default home page is shown in Figure 4.

To customize the title of the Jupyter home page, you need to add this code in custom.css file

#ipython_notebook::before{
 content:"Welcome to my Jupyter Notebook"
}

#ipython_notebook img{
 display:none;
}

After adding the code above, you need to save the file and refresh your Jupyter page. The interface after you refresh it is shown in Figure 5.

The title page is changed from the Jupyter logo to the text ‘Welcome to my Jupyter Notebook.’ You are free to change the text by writing down your desired title in the custom.css file. The update custom.css file is shown in Figure 6.

02. Customizing font

You can change the font used in Jupyter, including title font, toolbar font, and cell font. To change the title font, you need to define what font you use, as shown in the following CSS

#ipython_notebook::before{
 content:"Welcome to my Jupyter Notebook";
 font-family: Verdana;
 font-weight: 700;
 color: orange;
}

I change the title default font to Verdana with a weight of 700, and the color is orange. If you add the CSS above in custom.css, save it, and refresh the Jupyter page, you will see the updated interface of your Jupyter, as shown in Figure 7.

If you want to change the font used in the body, you can add this CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans';
   font-weight: 600;
}

I change the body font to Open Sans. Firstly, I need to import it from font.googleapis.com. You can also change the weight using a similar CSS with the previous one. The updated interface is shown in Figure 8.

If you want to import the font from a file you have, you can use this CSS

@font-face { font-family: roboto-regular; 
             src: url('../font/Roboto-Regular.ttf'); }

Here is the CSS to change the Jupyter’s interface as shown in Figure 8.

#ipython_notebook::before{
 content:"Welcome to my Jupyter Notebook";
 font-family: Verdana;
 font-weight: 700;
 color: orange;
}

#ipython_notebook img{
 display:none;
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body{
   font-family: 'Open Sans';
   font-weight: 600;
}

I love font Lato, so I use it for my Jupyter themes. I use Verdana (serif) to make it different from the default font (sans-serif).

03. Customizing logo

You can change the Jupyter’s title with your logo. In this story, I will use my favorite logo, as shown in Figure 9.

To apply it into Jupyter page, you can use this CSS

#ipython_notebook img{                                                                                        
    display:block; 
    background: url("logo.png") no-repeat;
    background-size: contain;
    width: 100px;
    height: 30px;
    padding-left: 100px;
    padding-right: 50px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

I place my logo in a similar directory of custom.css, so I declare my logo name, logo.png. You can change the width, height, and other CSS to place your logo precisely. The result is shown in Figure 10.

If you check the python page, you will see the updated interface, as shown in Figure 11.

If you change all of the fonts into Verdana with 700 values in width, you can see the difference, as shown in Figure 12.

04. Customizing header elements

Now, we are focusing on how to customize the interface of the Python page in Jupyter. I want to change all elements above the body element’s background color to have a similar color with my logo background (blue, in the hex color index of #78abd2). I use this CSS to change it

body > #header {
    background: #78abd2;
}

You can see the result in Figure 13.

Next is change the background color of the Navigation bar (File, Edit, View, etc.). To change it, you can use the following CSS.

#notebook_name {
    font-weight: 500;
    color: white;
}

With the CSS above, I change the font color into white and make it bolder. The result is shown in Figure 14.

Then, I will change the font color of Last Checkpoint using this CSS

.checkpoint_status,
.autosave_status {
    color: white;
}

The result is shown in Figure 15.

Next is change the background color of Navigation bar (File, Edit, View, etc). To change it, you can use the following CSS.

.navbar-default {
    background: none;
    border: none;
}

I remove the Navigation bar’s background color, so it has a similar color with the header background color (blue). I also remove the border of each Navigation option. The result is shown in Figure 16.

Next is change the font color in the Navigation bar and add the animation using this CSS.

.navbar-default .navbar-nav > li > a, #kernel_indicator {
    color: white;
    transition: all 0.25s;
}

The result is shown in Figure 17.

The animation I mentioned is when you move the cursor into one of the Navigation bar options, for example, file, the color of the file will change into black.

The other animation you can add is showing the underlined for a selected Navigation bar. To add it, you can use this CSS

.navbar-default .navbar-nav > li > a:hover, #kernel_indicator:hover{
    border-bottom: 2px solid #fff;
    color: white;
}

The result is shown in Figure 18.

When I move my cursor into Navigate, the animation will show the underline under the Navigate. It will disappear when you click in the other place.

05. Customizing background

After we customize the header elements, we will customize the body elements. First, I will change the background color of the body element into white color. To change it, you can use this CSS.

.notebook_app {
    background: white !important;
}

The result is shown in Figure 19.

06. Customizing cell width

To change the cell width, you can use this CSS

.container {
    width: 95% !important;
}

The result is shown in Figure 20.

07. Customizing border between cell

Next is hiding the border between cell. To hide it, you can use this CSS

div.input_area {
    border: none;
    border-radius: 0;
    background: #f7f7f7;
    line-height: 1.5em;
    margin: 0.5em 0;
    padding: 0;
}

#notebook-container{
    box-shadow: none !important;
    background-color: white;
}

The result is shown in Figure 21.

08. Adding animation to the selected cell

You can add the animation so the selected cell will be zoomed-in and have shadow effect. To apply it, you can use the following CSS

div.cell {
    transition: all 0.25s;
    border: none;
    position: relative;
    top: 0;
}

div.cell.selected, div.cell.selected.jupyter-soft-selected {
    border: none;
    background: transparent;
    box-shadow: 0 6px 18px #aaa;
    z-index: 10;
    top: -10px;
}

The result is shown in Figure 22.

09. Customizing output cell

By default, the output cell is left-aligned, as shown in Figure 23.

To change it, you can use this CSS

.output {
    align-items: center;
}

The result is shown in Figure 24.

10. Customizing data frame/table

You can customize the background, alignment, and padding of a data frame in Jupyter. The default setting is shown in Figure 25 (after centering the output).

You can use this CSS to customize it.

.dataframe { /* dataframe atau table */
    background: white;
    box-shadow: 0px 1px 2px #bbb;
}

.dataframe thead th, .dataframe tbody td {
    text-align: center;
    padding: 1em;
}

I set the background color into white, right-aligned, and adjust the box-shadow and padding. The result is shown in Figure 26.

11. Customizing line box

The last, if you want to remove the line box, you can use this CSS

div.prompt,
div.tooltiptext pre {
    display:none
}

The result is shown in Figure 27.

I did not apply this custom to my Jupyter. I let the line cell is visible. If you prefer to hide it, you can use the CSS above.

Conclusion

To conclude, I will share the CSS customization for my Jupyter in the following CSS.

Here is the captured result.

If you liked this article, here are some other articles you may enjoy:

Python Data Visualization with Matplotlib – Part 1

Python Data Visualization with Matplotlib – Part 2

5 Powerful Tricks to Visualize Your Data with Matplotlib

Customizing Multiple Subplots in Matplotlib

Introduction to Big Data with Vaex – A Simple Code to Read 1.25 Billion Rows

That’s all. Thanks for reading this story. Comment and share if you like it. I also recommend you follow my account to get a notification when I post my new story.