How to change the top left header logo in kibana 7.9.2

Elastic Stack Kibana
1

this is where the dark theme is located.
kibana-7.9.2-windows-x86_64\node_modules\@kbn\ui-shared-deps\target

and this is the theme file exactly from inspecting the element.
http://localhost:5601/33984/bundles/kbn-ui-shared-deps/kbn-ui-shared-deps.v7.dark.css

2

Hi @witcher,

Do you really want to replace logo in just one this place? We have many places where logo shows up and unfortunately there is no easy way to replace them all at once right now unfortunately, but we want to change that. Please track progress here.

Best,
Oleg

3

Hey @azasypkin this place and the login screen thanks for your reply.
any solution to solve this problem for now will be fine Thank You :slight_smile:

4

Well, until we handle it properly in Customers/users should be able to replace Elastic logo and customize Kibana themes through advanced setting · Issue #75377 · elastic/kibana · GitHub it's all unsupported and can change from version to version, but as a temporary workaround you can try to change these places in Kibana code:

  • Top logo, you can change iconType property to something like this iconType={"https://some-host/some-picture.png"}
  • Login page, you can change type property to something like this type={"https://some-host/some-picture.png"}

Unfortunately it's not possible to do via pure CSS.

Hope that helps.

Best,
Oleg

5

Hi @azasypkin,

I tried to change the "Top Logo" and the "Login Page Logo" by following your steps, but that did not work for me.

After restarting Kibana, I see no change at all. It does not matter if I even make a mistake while editing the code. It looks like Kibana just ignores the changes I made. When I inspect the code from the browser dev tool, none of the changes I made are there, but just the original code. Maybe I am editing the wrong files or maybe there is something else double checking the code and overwriting it at execution time like boostrap. Every time I change the code, I clean the browser cache and all local stored data before testing.

I know there's an official project in progress to add a feature that will allow users like me to easily customize Kibana UI. I am very exited about it and I can't wait to see it completed, but in the meantime, I'm OK with just temporary workarounds that allow me customize the UI. So if you have any more tricks up your sleeve, I'd be happy to try them out.

Thank you

6

Hmm, I just tried it on v7.9.2 branch and it worked well for me. Do you run Kibana from source? How do you run it? The more details you can provider the better.

Best,
Oleg

7

I am running SELKS 6, which integrates ELK 7.7 by default. After that I have been applying the upgrades as they are released.

8

I haven't heard of SELKS 6 before to be honest, so I'm afraid I cannot suggest anything here since I'm not entirely sure how that integrates Kibana. But I guess it relies on the built version of it and obviously changes in the source files won't be reflected.

I'd better ask at SELKS forums to figure out how you can point it to the custom Kibana source or anything like this (you can of course try to modify built artifacts, but it's a slippery slope, really).

9

@azasypkin, Basically it is an ELK on premises installation + other apps like Suricata, etc, just configured to ship data to that ELK. The ELK installation itself does not have anything customized, but a few pre-loaded visualizations, nothing in the code is customized. I just apply ELK updates and upgrades like normally do for any other app running on Debian 10.

10

@azasypkin I tried your method but it did not work for me sorry I am new to kibana thanks for helping :slight_smile:

11

Well, it's hard to say what type of Kibana code you use. I assumed you folks have access to the source code that would allow you to tweak it. But if it's not the case, it'd be harder, and you'll need to point me to exact distributable you use and then I can try to find the right place you could tweak there.

12

@azasypkin

elasticv7.9.2 (not installed as a service)
https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.9.2.msi

Kibanav7.9.2
https://artifacts.elastic.co/downloads/kibana/kibana-7.9.2-windows-x86_64.zip

these two are the exact ones I used.

13

I use the regular on premises distro that runs in Debian 10. What you're suggesting is to edit the Kibana code BEFORE compiling or the JavaScript files AFTER compiled?

14

It depends on what you can do, there are only two ways to patch Kibana with this temporary workaround:

  1. Patch source code, build it and use it instead (Kibana code BEFORE compiling) - better option
  2. Patch already built "binary" code (the JavaScript files AFTER compiled) - the last resort option if you don't want to re-built Kibana from source

Best,
Oleg

15

@azasypkin, honestly, I prefer the second option, although most attempts have failed as of version 7.9. I am currently using version 7.9.2 and I have only been able to customize the loading logo, the text below the loading logo, the favicon and its text.

I have tried editing the files mentioned in this and other posts, then restarted Kibana, but it does not make any change.

16

Okay, I'll try to figure out the right file we can patch in the 7.9.2 distributable for the top logo and the one at the login page, should be the same for Windows/Debian.

17

@azasypkin I really appreciate your interest in helping me and the community :+1:

18

@azasypkin is there a guide for any of the two options ?

19

For the first option, yes, it's documented:

Just checkout correct Kibana branch, make your changes and build it using these instructions.

For the second, it's a hack, and it's not something I can recommend, but since you asked...:

Login logo:

  • Open ..../kibana-7.9.2-linux-x86_64/x-pack/plugins/security/target/public/4.plugin.js (or where it's installed in your case, I used linux distrib)
  • Find this string in this file className:"loginWelcome__logo", and near that place should be {type:"logoElastic",size:"xxl"}, change it something like this {type:"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png",size:"xxl"}
  • You updated source, but server is serving compressed versions (gz or br, see files 4.plugin.js.br and 4.plugin.js.gz in the same folder), so you need to update compressed version as well, I just used gzip-cli tool with command like npx gzip-cli .../kibana-7.9.2-linux-x86_64/x-pack/plugins/security/target/public/4.plugin.js, it updated gz file for me.

Similar steps for the top header logo, but the file you need to edit is .../kibana-7.9.2-linux-x86_64/src/core/target/public/core.entry.js and the piece you need to change is iconType:"logoElastic" (located near core.ui.chrome.headerGlobalNav.goHomePageIconAriaLabel string).

Best,
Oleg

2 Likes
20

@azasypkin first of all thank you. the login logo part worked but when i was trying to change the header logo after that its stuck

image