Customize logo in Kibana 7.6

[marrel]

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.

[majagrubic (Maja)]

Hi,

could you just clarify which logo exactly are you trying to change under 1.? Is it the header logo in the navbar?

[majagrubic (Maja)]

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.

[marrel]

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

[chbas (Bassem Chagra)]

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!

[marrel]

@chbas

Apply the changes mentioned here by adding these rules:

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!

[chbas (Bassem Chagra)]

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

[marrel]

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>');  }

[chbas (Bassem Chagra)]

just after that rule.

[marrel]

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?

[chbas (Bassem Chagra)]

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

[marrel]

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!

[marrel]

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

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

[chbas (Bassem Chagra)]

Hi @marrel,
Please take a look here.

[marrel]

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.

[chbas (Bassem Chagra)]

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.