Ändern Sie Jupyter Notebook-Version 4.x + logo

Question

In IPython Notebook-Version können Sie Logo durch Anpassen von Ordner .ipython/profile_name/static/base/images/logo.png hinzufügen und es wird das benutzerdefinierte Logo, das wir auf der Kopfzeile des Notebooks gemacht haben angezeigt.

In Jupyter Notebook Version 4.x wissen wir, dass sie Verzeichnis .jupyter/ stattdessen das heißt .jupyter/base/ und .jupyter/custom/custom.css bewegen. Wenn ich jedoch versuche, das Standardprofil in anzupassen, konnte ich das Logo nicht mehr anpassen.

Die Frage ist: Wie benutzerdefinierte Logo in Jupyter Notebook-Version 4.x. Ich frage mich, ob es eine Lösung für benutzerdefinierte Jupyter Notebook-Logo (Version 4.x) oder nicht gibt. Ich habe Beispiel-Snapshot von benutzerdefinierten Notebook-Logo in der vorherigen Version unten.

Answer 1

So, hier ist die schnelle Lösung dank @Eric Kommentar (in Bezug auf this post). Zuerst füge ich logo.png in .jupyter/custom/logo.png hinzu. Fügen Sie dann die folgenden Zeilen zu .jupyter/custom/custom.css hinzu, um das Logo zu laden.

#ipython_notebook img{                       
    display:block; 
    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; 
} 

Sie können auch diese CSS-Tag hinzufügen logo Polsterung Höhe zu erhöhen durch Zugabe:

#ipython_notebook { 
    height: 40px !important; 
} 

Answer 2

logo.png in .jupyter/custom/logo.png hinzufügen. Fügen Sie dann die folgenden Zeilen zu .jupyter/custom/custom.css hinzu, um das Logo zu laden. Bei einer quadratischen Größe sah ich einen Offset des Notizbuchnamens, wenn ich das CSS von titipad benutzte. Dies behebt es.

#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; 
    }