Kibana 7.8.0 ( xpack login page customization )

Has anybody tried to customize the login page? I tried pretty much everything imaginable, I did rm optimize/bundles but any changes I make doesn't seem to reflect when I restart kibana...

I tried to change the login text "Welcome to Kibana" via

/usr/share/kibana/x-pack/plugins/security/public/authentication/login/login_page.js

}, /*#__PURE__*/_react.default.createElement("h1", null, /*#__PURE__*/_react.default.createElement(_react2.FormattedMessage, {
id: "xpack.security.loginPage.welcomeTitle",
defaultMessage: "Server 1" <-- instead of "Welcome to Kibana"

It doesn't seem to have any effect, I tried the russian approach on the login page background color, I couldn't track down the source so I got irritated and grep + sed and replaced every single instance of #fafbfd. I grep the entire kibana folder and #fafbfd cannot be found nowhere anymore yet the background-color still is untouched...

Then deleted optimize/bundle restarted kibana and still nothing, I tried the same with the rbg equivalent, still the same...

What am I missing, is there somewhere kibana builds/cache its UI other than optimize/bundle that I'm not aware of?

Its been 3 days, 8hrs a day I'm trying to figure it out and I can't figure it out, I'm losing my sanity here lol!

I had no problem modifying the previous versions of Kibana to look and feel like the rest of my page since I'm iframing it into another page I have that regroups the things I use together at one place... But this version has been kicking my a$$...

Anyone? Help please...

What command are you using to run kibana?

For your usecase maybe creating a custom plugin then overriding the css and i18n message seems like a good approach here as well.

Hi Bamieh thanks for the reply, right now simply starting it off service in debian.

@ Archangel

Has anybody tried to customize the login page? I tried pretty much everything imaginable, I did rm optimize/bundles but any changes I make doesn't seem to reflect when I restart kibana...

With the new Kibana plugin architecture, the Security plugin isn't compiled with optimizer anymore. You would have to change the plugin source and re-build the plugin or the whole Kibana.

There is an issue to support Customisation out of the box. https://github.com/elastic/kibana/issues/17879
Meanwhile, the only way to customize the UI is to override CSS manually and it could be a problem because we've never stated them as Kibana public API that follows semver.

Thank you very much Mikhail, very valuable information. I thought it was getting compiled along with the optimizer too, I'm fairly new to elastic stack and its quite a bit of stuff to wrap your head around for a new comer.

Especially me in my case I'm starting a startup company and marketing is all about image, I need to be able to have tools and everything following my branding to promote a certain image to investors and such...

My field of competence is around cyber security and penetration testing, I was not expecting to have to become a web engineer to change background colors and logos lol... Its great that its a feature being looked into.

I do no care really that my investors/clients are aware that I use elastic search I'm not trying to camouflage it in any ways, I really just need my elastic search to comply with my branding really... I did it easily in 7.5 but 7.8 is a whole different animal...

Thanks alot for the info again, very appreciated!

So I managed to change the look and feel of 7.8 to suit my needs, I didn't need logos because I IFRAME kibana into my other page that I use as "main hub" for everything if you will. But I hope this can help someone from passing 2 weeks pulling your hair trying to figure it out like I did...

Being a backend/server/security guy, I'm not well versed in web stuff so it was quite challenging to figure where I could use as an injection point to add modifications without writing plugins and such...

Here's how it looks now and how to do it...



First don't make the mistake I did and try to search through the source codes to figure it out, use the browsers developer tool is far more efficient...


Once you found the element you want to change as below.

Go and edit the file [ /usr/share/kibana/src/core/server/rendering/views/styles.js ] and add the codes as such.

1 Like