Change Login Page Logo - Kibana 7.9.1 Docker

Hi threre,

i am on Version 7.9.1 and want to change the login page logo. I found this thread: Custom Logo Kibana 7.9.2 (guide)

All is working fine in docker-container, but i cannot use this command in the kibana docker:
npx gzip-cli /usr/share/kibana/src/core/target/public/core.entry.js -e=gz -e=br

Does anyone have a solution how to get it working? :slight_smile:
Or any other way to change the logo of login page?

Thank you!

Best Regards
Ayakashi97

Hey @Ayakashi97,
I'm not 100% sure but I suspect that npx isn't actually shipped inside of the kibana docker.
What you could do is install npx locally on your machine, clone the Kibana code locally as well, and then use gzip-cli to compress the kibana/src/core/target/public/core.entry.js locally.

Once you've done that you can replace the /usr/share/kibana/src/core/target/public/core.entry.js file inside of docker with your local compressed one.

1 Like

Thank you for the fast reploy. :slight_smile:

Will try it, just one more question:
Do i have to upload all inside the kibana container or only the core.entry.js?

1 Like

You're welcome. :slight_smile:

I'll be honest- I don't know. I've never tried to do what you're doing :laughing: but looking at the guide you linked I'd suggest replacing the entire contents once you've run the command locally. That way, if it does modify any other files, the changes to them will be copied over as well.

Good luck!

1 Like

So i pulled the whole kibana folder - modified the file and executed the command.
After that i uploaded the whole folder and restarted kibana. But now i get a blank page instead of login screen.. :frowning:

Log of kibana says nothing about errors..
{"type":"response","@timestamp":"2020-12-04T11:46:21Z","tags":[],"pid":7,"method":"get","statusCode":200,"req":{"url":"/login?next=%2F","method":"get","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","cache-control":"max-age=0","upgrade-insecure-requests":"1","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9"},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1"},"res":{"statusCode":200,"responseTime":22,"contentLength":9},"message":"GET /login?next=%2F 200 22ms - 9.0B"} {"type":"response","@timestamp":"2020-12-04T11:46:21Z","tags":["api"],"pid":7,"method":"get","statusCode":304,"req":{"url":"/bundles/app/core/bootstrap.js","method":"get","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","accept":"*/*","referer":"http://192.168.112.130:5601/login?next=%2F","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9","if-none-match":"\"b251efe001d3df53d98e9f8d18f8817b8abbd9be-gzip\""},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1","referer":"http://192.168.112.130:5601/login?next=%2F"},"res":{"statusCode":304,"responseTime":11,"contentLength":9},"message":"GET /bundles/app/core/bootstrap.js 304 11ms - 9.0B"} {"type":"response","@timestamp":"2020-12-04T11:46:22Z","tags":[],"pid":7,"method":"get","statusCode":304,"req":{"url":"/translations/en.json","method":"get","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","accept":"*/*","referer":"http://192.168.112.130:5601/login?next=%2F","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9","if-none-match":"\"37992637719f97813c3068cfbf877b2d3bb43b97\""},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1","referer":"http://192.168.112.130:5601/login?next=%2F"},"res":{"statusCode":304,"responseTime":2,"contentLength":9},"message":"GET /translations/en.json 304 2ms - 9.0B"} {"type":"response","@timestamp":"2020-12-04T11:46:22Z","tags":[],"pid":7,"method":"get","statusCode":200,"req":{"url":"/node_modules/@kbn/ui-framework/dist/kui_light.css","method":"get","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","accept":"text/css,*/*;q=0.1","referer":"http://192.168.112.130:5601/login?next=%2F","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9"},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1","referer":"http://192.168.112.130:5601/login?next=%2F"},"res":{"statusCode":200,"responseTime":4,"contentLength":9},"message":"GET /node_modules/@kbn/ui-framework/dist/kui_light.css 200 4ms - 9.0B"} {"type":"response","@timestamp":"2020-12-04T11:46:23Z","tags":[],"pid":7,"method":"post","statusCode":200,"req":{"url":"/api/core/capabilities","method":"post","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","content-length":"687","kbn-version":"7.9.1","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","content-type":"application/json","accept":"*/*","origin":"http://192.168.112.130:5601","referer":"http://192.168.112.130:5601/login?next=%2F","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9"},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1","referer":"http://192.168.112.130:5601/login?next=%2F"},"res":{"statusCode":200,"responseTime":10,"contentLength":9},"message":"POST /api/core/capabilities 200 10ms - 9.0B"} {"type":"response","@timestamp":"2020-12-04T11:46:23Z","tags":[],"pid":7,"method":"get","statusCode":200,"req":{"url":"/ui/fonts/inter_ui/Inter-UI-Regular.woff2","method":"get","headers":{"host":"192.168.112.130:5601","connection":"keep-alive","origin":"http://192.168.112.130:5601","user-agent":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36","accept":"*/*","referer":"http://192.168.112.130:5601/login?next=%2F","accept-encoding":"gzip, deflate","accept-language":"en-DE,en;q=0.9"},"remoteAddress":"192.168.112.1","userAgent":"192.168.112.1","referer":"http://192.168.112.130:5601/login?next=%2F"},"res":{"statusCode":200,"responseTime":1,"contentLength":9},"message":"GET /ui/fonts/inter_ui/Inter-UI-Regular.woff2 200 1ms - 9.0B"}

oh no, sorry about that :grimacing:

Is there any client side error in the browser?

Broadly speaking this isn't something we support, so I don't know much about it.
I'd suggest describing what you've done in the original guide as that person has clearly dug deeper into this than I have.
They might have come across this before and could probably help you better than I can.

By the way, looks like we are aiming to have official support for doing this (no hacks required) some time in the 7.x release cycle.

You can track that issue here: https://github.com/elastic/kibana/issues/75377

Allright thank you! :slight_smile:

Got it working, just tried some other base64 encodings... looks like this was the problem.

Have a nice day and stay healthy! :slight_smile:

1 Like

Amazing!
Well done. :slight_smile:

You too! Stay Safe. :elasticheart:

1 Like

Hi @Ayakashi97 I probably forgot to include in my Guide, that the smaller the base64 image file, the easier it will be for Kibana to process the file you are modifying. I recommend a size no larger than 100px. So first, reduce the original image file to 100px, then convert it to base64 and you will see that the generated code is much smaller. Pay special attention to the portion of code you need to remove from file kibana/src/core/target/public/core.entry.js, as if is not done right, it might cause to load a blank page.

And for the command npx, just install package npm first, as npx is part of it :wink:

I am also waiting for the official way to customize the interface, so we do not have the need of these hacky solutions :sweat_smile:

Cheers!

1 Like

Hi @ManuelF,

thank you for the info. :slight_smile: Already recognized that is loading very slow since i've changed it in core.entry.js and kibanaReact.plugin.js.

100px shoud be enough? :slight_smile:

It's working fine now. Thank you!

Also waiting for the feature, for now we have to find a way for nearly every new version.

Have a nice weekend! :slight_smile:

1 Like

Yes, 100px should be enough, or even smaller if you like.

As a side note, I confirm the same Guide works for ELK 7.10.0, although some files changed its name and/or location. I'll probably update my post or add a new one.

Cheers!

1 Like

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