Customize logo in Kibana 7.6

Elastic Stack Kibana
1

Hello to everyone!

I am trying to customize kibana 7.6. I have successfully changed the logo in Header ( the logo in the tab), the logo in loading screen, and I have replaced the favicons folder.
I have used this topic to do the above.

However, I am facing problem in changing logo in

  1. left menu next to Select Space
  2. Login page
  3. Select Space page

I have read several topics here such as 1, 2, 3 and many others in the last 4 days but without success.

Taking into consideration that for every version in Kibana, the directories and files change, have anyone tried to change the above in Kibana 7.6. ?
Any help would be greatly appreciated.

2

Hi,

could you just clarify which logo exactly are you trying to change under 1.? Is it the header logo in the navbar?
Screenshot 2020-05-28 at 17.59.52

3

Also, just a sidenote that Elastic doesn't officially support whitelabeling Kibana. Since it's open source, we won't stop you, but any help with this is purely on a best-effort basis.

4

Yes this is the logo I want to replace, as per your first comment.
Any help or advice would be greatly appreciated.

5

Hi,
as long as there is no official way to do it, you can try using this hacky-way:

  • First, go to :

src/core/server/rendering/views/styles.tsx

you will find some css rules defined in 'dangerouslySetInnerHTML'.

  • Apply the changes mentioned here by adding these rules:

a[data-test-subj="logo"] * {
display: none;
}
a[data-test-subj="logo"] {
background: url(URL TO YOUR LOGO) no-repeat 0 0;
background-size: auto 26px;
border-bottom: none;
background-position: 10px 10px;
}

and the logo should be changed!

6

Thank you very much for your detailed reply @chbas! One question only, where to save the custom plugin folder in kibana's directory?
C:\.......\kibana-7.6.0\built_assets\css\plugins or
C:\......\kibana-7.6.0\plugins

Thank you in advance!

7

Neither!
I was just referring to the place where I've found how to replace the logo.
For my adaptation, just add the css rules inside src/core/server/rendering/views/styles.tsx

8

Where exactly should add the css rules insidesrc/core/server/rendering/views/styles.tsx?
Below I share a part of the styles.tsx in which there is a line with background-image in base24 format:

  .kibanaWelcomeLogo {
    width: 60px;
    height: 60px;
    margin: 10px 0 10px 10px;
    background-repeat: no-repeat;
    background-size: contain;
    /* SVG optimized according to http://codepen.io/tigt/post/optimizing-svgs-in-data-uris */
	background-image: url('data:image/svg+xml;base64, <the-base24-format-logo>');  }
9

just after that rule.

1 Like
10

Thank you very much @chbas. It works.
But one comment, when I click on my logo (which returns my on Home page), my logo just disappears and when I click anywhere in kibana my logo comes back. Do you know why this is happening?

11

Hi @marrel,
well that can be easily fixed by adding the same css rules when the logo is clicked, something like this:

a[data-test-subj="logo"]:focus {
... // same css rules

I hope this is clear now :slight_smile:

2 Likes
12

Dear @chbas I cannot describe how happy I am! I am really new in working with CSS so I want to thank you very much both for your time and for your prompt replies.
It works! you made my day! :slight_smile:

1 Like
13

I am wondering @chbas if you have any idea regarding the other two issues:

  1. logo from Login page
  2. logo from Select Space page

I tried to change the logo from the Select Space page but I cannot remove the kibana logo, and from my last attempt I have two logos together, one on top of the other :laughing:

Do you have any idea for these? thank you in advance!!!

14

Hi @marrel,
Please take a look here.

15

Hi @chbas, thank you for the link.
I have managed to change the logo/text when Kibana first loads, browser logo/title and with your valuable advices the side bar logo.

From the link I did not see details about changing logo from Login page and logo from Select Space page.
Have you found a way to do these two changes? Thank you in advance for any help.

16

For the login logo, I already replied to that.
For the second one, go to :
x-pack/legacy/plugins/spaces/public/space_selector/space_selector.tsx
and change 'logoKibana' to the url of your svg logo, as explained here.

17

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