[Guide] Customize logo, text screen and loading in Kibana 7.x

Elastic Stack Kibana
1

STATUS: Updating ...
Hi everyone, i believe that have many people want to change logo kibana to owner company logo, like with me. After time for searching and reading source code i found solution to change Logo, Favicon, Welcome logo login, Header logo, SelectSpace logo and Loading image

  1. Login logo (welcome screen)
  2. Change login in Select Space
  3. Change login in Header
  4. Change loading screen
  5. Change favicon

1. Login logo (welcome screen)
Require : Logo must have size 80*80 pixel
Open file login_page.js and remove original svg logo

/usr/share/kibana/node_modules/x-pack/plugins/security/public/views/login/components/login_page/login_page.js

Inline remove line 54 change line 53 to

react_1.default.createElement("span", { className: "loginWelcome__logo" }),

It look like

react_1.default.createElement("span", { className: "loginWelcome__logo" }),
      react_1.default.createElement(eui_1.EuiTitle, { size: "l", className: "loginWelcome__title" },

Next, we need edit css. Open file index.dark.css and index.light.css. Find class .loginWelcome__logo {}
Remove background and add background-image

background-image: url(url_your_logo_company);

It look like

.loginWelcome__logo {
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-image: url(https://i.imgur.com/OJVk1hn.png);
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
  margin-bottom: 32px; }
  .loginWelcome__logo .euiIcon {
    vertical-align: baseline; }

Note: Resize your logo to size 80*80 pixel.

Make change
To make change, i need install or remove 1 plugin, to get kibana rebuild.
You can try with :
Install any plugin :

/usr/share/kibana/bin/kibana-plugin install https://github.com/wtakase/kibana-own-home/releases/download/v7.1.0/own_home-7.1.0.zip
systemctl restart kibana

Wait in 10s, and type :

/usr/share/kibana/bin/kibana-plugin remove own_home
systemctl restart kibana

2. Change login in Select Space
Require : Logo must have size 80*80 pixel
Open file space_selector.js and remove original svg logo

vim /usr/share/kibana/node_modules/x-pack/plugins/spaces/public/views/space_selector/space_selector.js

Remove line 82 and add ")" to end of line 81, before comma. It look like

react_2.default.createElement("span", { className: "spcSpaceSelector__logo" }),
react_2.default.createElement(eui_1.EuiTitle, { size: "l" },
    react_2.default.createElement("h1", { tabIndex: 0, ref: this.setHeaderRef },

Next, we need edit css. Open file index.dark.css and index.light.css . Find class .spcSpaceSelector__logo {} (line 127)

vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css
vim /usr/share/kibana/built_assets/css/plugins/spaces/index.dark.css

Remove background-color and add background-image

.spcSpaceSelector__logo {
  margin-bottom: 32px;
  display: inline-block;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-image: url("https://i.imgur.com/OJVk1hn.png");
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2);
          box-shadow: 0 6px 12px -1px rgba(0, 0, 0, 0.2), 0 4px 4px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.2); }
  .spcSpaceSelector__logo .euiIcon {
    vertical-align: baseline; }

Note : Resize your logo to size 80*80 pixel.
After that, you can make change (look in #1)

3. Change login in Header
Require : Logo must have size 48*48 pixel
Open file eui_theme_light.css and eui_theme_dark.css

vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_light.css

And

vim /usr/share/kibana/node_modules/@elastic/eui/dist/eui_theme_darkcss

In class .euiHeaderLogo__icon, change opacity to 0 (line 6248)

.euiHeaderLogo__icon {
  opacity: 0;
  position: relative;
  top: -2px; }

In class .euiHeaderLogo, add background-image. (change url_your_logo to your url)

.euiHeaderLogo {
  text-align: left;
  position: relative;
  height: 48px;
  line-height: 48px;
  min-width: 49px;
  padding: 0 13px 0 12px;
  display: inline-block;
  vertical-align: middle;
  background-image: url("url_your_logo");
  white-space: nowrap; }

In class .euiHeaderLogo:focus, remove background

.euiHeaderLogo:focus {
    text-decoration: underline; }

4. Change loading screen
writing ......

5. Change favicon
writing ......

4 Likes
2

Thanks for this guide, @tatdat !

However, when using this be aware that the way of changing this might break with every release of Kibana. Official support for this is tracked here: https://github.com/elastic/kibana/issues/17879

3

Thanks for the tutorial.
Are you planning to finish the article?

4

would you recommend PNG files or SVG files for replacing the logo?

5

First I thought about changing Logo. But I don't see a use case here. rather I just put markdown and add logo there as link.
Why change logo. all my user knows they are on kibana dashboard. Plus next release will overwrite all of that and I have to redo this.

But @tatdat it is very good artical. it must be hard to test this out. Good job

6

I will finish in this week. :star_struck:

You can use both of them.

7

We are agree about that. Before i have plan write plugin to do this but Elastic team is preparing to support change logo. You can track in here https://github.com/elastic/kibana/issues/17879

8

you use kibana development mode or kibana production mode?

9

Somebody know how to customize different logos according to the space?

11

I think that is impossible, because space is dynamic. Maybe we need to wait support from Elastic team for this feature.

Im using Kibana in Prouction, bro

12

I updated the tatdat's post. This is the method for 3, 4 and 5.

I'm based on a Kivana 7.x environment. The logo to be applied needs to be prepared in SVG format. There are many websites where Google converts image files to SVG format.

4. Change loading screen
The loading screen has a base64 image path. Just convert the svg format to base64 and modify the code. For a site that converts SVG format to base64, see below.

You need to modify both files in the path below.

Logo image:

kibana \ src \ legacy \ ui \ ui_render \ views \ chrome.pug

Logo image and content at the bottom of the logo:

kibana \ src \ legacy \ ui \ ui_render \ views \ ui.app.pug

chrome.pug
By modifying line 9 in the chrome.pug file, you can modify the title of the kibana web page.

title Kibana

To change the loading logo, modify the

.kibanaWelcomeLogo {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        background-image: url("base64 information in SVG file");
      }

ui_app.pug
The background-image: url of kibanaWelcomeLogo in the ui_app.pug file should also be changed to the base64 information of the SVG file above.

.kibanaWelcomeLogo {
       background-image: url("base64 information in SVG file");
       background-repeat: no-repeat;
       background-size: contain;
       width: 60px;
       height: 60px;
       margin: 10px 0px 10px 20px;
     }

The text that appears at the bottom of the loading logo can be changed by modifying the code below.

.kibanaWelcomeView(id="kbn_loading_message", style="display: none;")
    .kibanaLoaderWrap
      .kibanaLoader
      .kibanaWelcomeLogoCircle
        .kibanaWelcomeLogo
    .kibanaWelcomeText(data-error-message=i18n('common.ui.welcomeErrorMessage', { defaultMessage: 'Kibana did not load properly. Check the server output for more information.' }))
      | #{i18n('common.ui.welcomeMessage', { defaultMessage: 'Your Message' })}

5.Change favicon
The favicon.ico file is in the following path:
Overwrite the favicon.ico you want to change.

kibana \ src \ legacy \ ui \ public \ assets \ favicons

The image files in the folder are also created according to the size, and overwriting seems to be no problem. Clear your browser's cache and run it to reflect the favicon.

3. Left Menu Header Logo
For me, modifying the home button logo on the left menu did not work with tatdat's suggested method.

Finally, we found the js path where the kibana logo was defined and solved it by modifying it. The kibana logo is defined in a file at the following path: It was very hard to find.

kibana\built_assets\dlls\icon.logo_kibana-js.bundle.dll.js

Just insert the code from the SVG file into the js code, but it's a little bit easier to apply.

2 Likes
13

Thank for your help @yhy900211, i merged your content to my post.
Thank you again!

14

It seems in version 7.3.2 and 7.4.0, the files has been moved around and content of the files has changed. I was wondering if anyone played around with these version to correctly customized Kibana with their logos?

15

Hello , i tried your way but i'm facing a problem with the left menu Header logo , can you explain it a little bit more .

thank you in advance

Kibana version 7.4.0

1 Like
17

I installed and tested kibana version 7.4.2. The left menu header logo is still available in version 7.4.2 by modifying the source code of
kibana \ built_assets \ dlls \ icon.logo_kibana-js.bundle.dll.js.

Modify the svg file format to base64 format and insert it into your source code. For a site that converts SVG format to base64, see below.
https://base64.guru/converter/encode/image/svg

Give it a try and send me an email if you can't find a way.

2 Likes
18

Thanks that worked

1 Like
19

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.