The preparatory work

I put the logo material through nginx can be accessed through the URL.

location /logoImgs/ {
    alias /path/to/logoImgs/;
}
Copy the code
  • 7. X Changes the logo and 6.x greatly. The essence is to find CSS and change it.
  • Refer to the link to
    • The first paper
    • The second article
  • There are three things that need to be modified, and since Kibana has two themes of dark and light, they basically need to be changed in two copies, one light and one dark

My operation is tar package deployment mode. For other deployment modes, use the corresponding directory

The small logo in the upper left corner of the main page

  • Enter the/ opt/kibana 7.2.0 - Linux - x86_64 / node_modules / @ elastic/eui/dist
  • vim eui_theme_light.cssfind.euiHeaderLogo__iconWill be one of theopacitySet to 0, this step actually makes SVG transparent.
  • findeuiHeaderLogoaddbackground-image background-repeat:no-repeat; background-size:100% 100%;And then the setup is done.

Background – image: url (” http://x.x.x.x:80/logoImgs/logo.png “); Image is through the network access to nginx.

The logo of the login page

  • Enter theKibana 7.2.0 - Linux - x86_64 / built_assets/CSS/plugins/securityModify theindex.dark.cssandindex.light.css
.loginWelcome__logo { display: inline-block; width: 80px; height: 80px; line-height: 80px; text-align: center; // Add 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 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 rgba(152, 162, 179, 0.2);  margin-bottom: 32px; }.loginwelcome__logo. euiIcon {// Is SVG transparent: 0; vertical-align: baseline; }Copy the code

Select the logo for your workspace

  • And modify the login interface routine consistent.
  • Kibana - 7.2.0 - Linux - x86_64 / built_assets/CSS/plugins/SpacesModify theindex.dark.cssandindex.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 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 rgba(152, 162, 179, 0.2);  } .spcSpaceSelector__logo .euiIcon { opacity: 0; vertical-align: baseline; }Copy the code

Modify the loading logo

I put the path of the image under node_modules/@elastic/eui/dist/

  • / opt/kibana - 7.2.0 - Linux - x86_64 / SRC/legacy/UI/ui_render/viewsChanges in thechrome.pugandui_app.pug
Both files need to be modified. // 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;
}
Copy the code