Customize Kibana 6.5 Login Page

Elastic Stack Kibana
3

In case somebody else is looking into customizing Kibana 6.5 I've found the files that need to be edited for most of the basic stuff.

Browser title and loading logo (1)
kibana-6.5.0/src/ui/ui_render/views/chrome.pug

  • Look for "kibana" and change that to a different text if you want a different title displayed in the browser.
  • If you want to change the Kibana logo in the circular loading logo, look for a base64 string and replace this with a base64 of your own image. You can also change the hex code for the color of the loading circle etc.

Loading logo (2)
kibana-6.5.0/src/ui/ui_render/views/ui_app.pug

  • Apply the same changes you made for the loading logo in chrome.pug to ui_app.pug as well.

Favicons
src/ui/public/assets/favicons

  • Contains the favicons. Simply overwrite them with your own.

Login page welcom text & sub text
node_modules/x-pack/plugins/security/public/views/login/components/login_page/login_page.js

  • Search for the welcome text and sub text and replace it with your own.

Add background image to login page
node_modules/x-pack/plugins/security/public/index.css

  • Open this file and look for .loginWelcome. Add some css such as background-image: url() if you want to add a image as background.

Remove Kibana background images on login page
node_modules/x-pack/plugins/security/public/views/login.less

  • Delete everything in this file if you want the Kibana background (left bottom and top right images) to become invisible.

Remove Kibana background images on spaces page
/node_modules/x-pack/plugins/spaces/public/views/space_selector/space_selector.less

  • Same as above, simply delete all the data from the file.

Remove small Kibana logo
/node_modules/@elastic/eui/dist/eui_theme_light.css
/node_modules/@elastic/eui/dist/eui_theme_k6_light.css

  • The Kibana logo inside the small circle on the login and spaces page is generated from java or something. I'm not sure how it works but the only way I found to get rid of it is by setting theheight and width of .euiIcon--Large in both files to 0px.

Add your own logo to login page and space page
/node_modules/x-pack/plugins/spaces/public/index.css
node_modules/x-pack/plugins/security/public/index.css

  • If you followed the steps above you'll be left with an empty white circle. In my case I wanted to add my own logo so I added some background-image css to .spcSapceSelector__logo and .loginWelcome__logo.

Change side bar logo
src/ui/public/chrome/directives/global_nav/global_nav.less

  • Look for .logo-small and change the image path.

Change full screen logo
/src/core_plugins/kibana/public/index.css

  • Look for .dshExitFullScreenButton__logo and delete the image string. You can change this to your own path.

Keep in mind that some of these changes might require Kibana to re-optimize. Stop Kibana and delete the optimize folder and start Kibana again.

8 Likes