Change laptop version Jupyter 4.x + logo

Question

In IPython 2.x notebook version, you can add a logo by setting up the .ipython/profile_name/static/base/images/logo.png folder, and it will display its own logo, which we made in the header of the notebook.

In the Jupyter 4.x laptop version, we know that instead they move the directory to .jupyter/ , i.e. .jupyter/base/ and .jupyter/custom/custom.css . However, when I try to configure the default profile in ~/.jupyter/base/images/logo.png , I can no longer customize the logo.

The question is how to make your own logo in the version for Jupyter 4.x laptop. I am wondering if there is a solution for the custom logo of the Jupyter laptop (version 4.x ) or not. The following is an example snapshot of a customized laptop logo in a previous version 2.x

Answer 1

So here is a quick fix thanks to @Eric's comment (referring to this post ). First I add logo.png to .jupyter/custom/logo.png . Then add the following lines to .jupyter/custom/custom.css to load the logo.

 #ipython_notebook img{ display:block; /* logo url here */ background: url("logo.png") no-repeat; background-size: contain; width: 233px; height: 33px; padding-left: 233px; -moz-box-sizing: border-box; box-sizing: border-box; } 

You can also add this css tag to increase the height of the logo by adding:

 #ipython_notebook { height: 40px !important; } 

Answer 2

Add logo.png to .jupyter/custom/logo.png . Then add the following lines to .jupyter/custom/custom.css to load the logo. With a square size, I saw a notebook name offset when using titipad CSS. This fixes it.

  #ipython_notebook img{ display:block; background: url(logo.png) no-repeat; background-size: contain; width: 33px; height: 33px; padding-left: 33px; -moz-box-sizing: border-box; box-sizing: border-box; } #header-container { display: flex; justify-content: space-between; } span#login_widget { flex-grow: 1; order: 4; display: flex; justify-content: flex-end; } span#save_widget { flex-grow: 40; }