准备工作

我把logo素材通过通过nginx能够通过url进行访问。

location /logoImgs/ {
    alias /path/to/logoImgs/;
}

• 7.x修改logo和6.x变化比较大。其本质就是找到css然后改之。
• 参考到的链接
  • 第一篇
  • 第二篇
• 有三处需要修改，并且由于kibana有深色和浅色两个主题，所以基本上都需要改双份，一个light一个dark

我的操作是 tar包部署的方式。其他部署方式请自行对应目录

主页面左上角的小logo

• 进入/opt/kibana-7.2.0-linux-x86_64/node_modules/@elastic/eui/dist
• vim eui_theme_light.css找到.euiHeaderLogo__icon将其中的opacity设为0，这步实际上是将svg设为透明。
• 找到euiHeaderLogo添加background-image background-repeat:no-repeat; background-size:100% 100%;等设置就成功了。

其中background-image: url("http://x.x.x.x:80/logoImgs/logo.png");图片是通过网络访问nginx的。

登录界面的logo

• 进入kibana-7.2.0-linux-x86_64/built_assets/css/plugins/security修改index.dark.css和index.light.css

.loginWelcome__logo {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  // 添加背景图片
  background-image: url("http://x.x.x.x:80/logoImgs/logo.png");
  background-repeat:no-repeat;
  background-size:100% 100%;
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(152, 162, 179, 0.2), 0 4px 4px -1px rgba(152, 162, 179, 0.2), 0 2px 2px 0 rgba(152, 162, 179, 0.2);
          box-shadow: 0 6px 12px -1px rgba(152, 162, 179, 0.2), 0 4px 4px -1px rgba(152, 162, 179, 0.2), 0 2px 2px 0 rgba(152, 162, 179, 0.2);
  margin-bottom: 32px; }
  .loginWelcome__logo .euiIcon {
    // 是svg 透明
    opacity: 0;
    vertical-align: baseline; }

选择工作空间的logo

• 和修改登陆界面的套路一致。
• kibana-7.2.0-linux-x86_64/built_assets/css/plugins/spaces下修改index.dark.css和index.light.css

.spcSpaceSelector__logo {
  margin-bottom: 32px;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  border-radius: 100%;
  background-image: url("http://x.x.x.x:80/logoImgs/logo.png");
  background-repeat:no-repeat;
  background-size:100% 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(152, 162, 179, 0.2), 0 4px 4px -1px rgba(152, 162, 179, 0.2), 0 2px 2px 0 rgba(152, 162, 179, 0.2);
          box-shadow: 0 6px 12px -1px rgba(152, 162, 179, 0.2), 0 4px 4px -1px rgba(152, 162, 179, 0.2), 0 2px 2px 0 rgba(152, 162, 179, 0.2); }
  .spcSpaceSelector__logo .euiIcon {
    opacity: 0;
    vertical-align: baseline; }

修改 loading logo

图片的路径我放在了node_modules/@elastic/eui/dist/下，实践没问题

• /opt/kibana-7.2.0-linux-x86_64/src/legacy/ui/ui_render/views里修改chrome.pug和ui_app.pug

这两个文件都需要进行修改。
// chrome.pug
.kibanaWelcomeLogo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    /* SVG optimized according to http://codepen.io/tigt/post/optimizing-svgs-in-data-uris */
    //border-radius: 100%;
    background-image: url("http://x.x.x.x:80/logoImgs/logo.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
}
// ui_app.pug
.kibanaWelcomeLogo {
    //border-radius: 100%;
    background-image: url("http://x.x.x.x:80/logoImgs/logo.png");
    background-repeat:no-repeat;
    background-size:100% 100%;
    //width: 60px;
    //height: 60px;
    //margin: 10px 0px 10px 20px;
}