更改 Jupyter notebook 版本 4.x+ 徽标答案

【问题标题】：Change Jupyter notebook version 4.x+ logo更改 Jupyter notebook 版本 4.x+ 徽标
【发布时间】：2016-02-17 22:49:20
【问题描述】：

在IPython notebook版本2.x中，你可以通过自定义文件夹.ipython/profile_name/static/base/images/logo.png来添加logo，它会在notebook的头部显示我们制作的自定义logo。

在 Jupyter notebook 版本4.x 中，我们知道他们将目录移动到.jupyter/，而不是.jupyter/base/ 和.jupyter/custom/custom.css。但是，当我尝试在 ~/.jupyter/base/images/logo.png 中自定义默认配置文件时，我无法再自定义徽标。

问题是：如何在 Jupyter notebook 版本4.x 中自定义 logo。我想知道是否有自定义 Jupyter 笔记本徽标（版本 4.x）的解决方案。我在下面放了以前版本2.x中自定义笔记本徽标的示例快照。

【问题讨论】：

嗨@titipat，您是否尝试过Customize welcome page of ipython notebook 的解决方案？我尝试了这个解决方案，它对我有用。
哦，太好了。谢谢@Eric！它几乎对我有用。我把logo.png 和css 添加到custom.css。但是，我的图像太大了。可能我必须更改 css 文件才能使徽标正确显示。

标签： python customization ipython-notebook jupyter jupyter-notebook

【解决方案1】：

感谢@Eric 评论（参考this post），这是快速解决方案。首先，我将logo.png 添加到.jupyter/custom/logo.png 中。然后将以下行添加到.jupyter/custom/custom.css 以加载徽标。

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

您还可以添加此 css 标签以增加徽标的填充高度：

#ipython_notebook {
    height: 40px !important;
}

【讨论】：

感谢您的回答。注意：我相信语法应该在文件周围加上引号： background: url("logo.png") no-repeat;

【解决方案2】：

将logo.png 添加到.jupyter/custom/logo.png。然后将以下行添加到.jupyter/custom/custom.css 以加载徽标。当使用titipad 的CSS 时，我看到了一个正方形的笔记本名称的偏移量。这解决了它。

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

【讨论】：