Customize Kibana 6.5 Login Page


#1

I've read a few posts around how to customize the login page of Kibana but all seem obsolete since from version to version, the code gets changed and so do the mods.

I managed to replace the "Welcome to Kibana" and the "Your window into the elastic stack" phrases.

There are 2-3 places where these words get mentioned and by experimenting around, I found the one that worked. You basically need to modify this file:
/optimize/bundles/login.bundle.js

To find this, I ran the following Linux command per this post.
grep -Ril "Welcome to Kibana" /usr/share/kibana

I wonder if someone has done the same for:

  1. the login page logo

  2. the logo on top of the left-side navigation bar

Many thanks.

PS. Looking back, whatever is in the optimize folder is not a permanent solution since this folder gets created when kibana first starts.


(Sjaak) #2

I have the same question. I had a pretty nice looking custom login page but in 6.5.0 the whole structure changed (thanks for the heads up...) and nothing is in the same place.

Looking for:

  • Loading circle image location
  • Kibana circle logo on login page
  • css/html that sets the background size/location properties
  • Navbar left top logo

(Sjaak) #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.


#4

Thank you, this is very helpful.

Only add-on comment on your last sentence ... I deleted the "optimize" folder but then Kibana would not start giving me the following (main) error:

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory

I managed to deal with it by following this post and by increasing the heap memory:

NODE_OPTIONS="--max-old-space-size=4096" /usr/share/kibana/bin/kibana

This way it managed to get through the optimizations and rebuild the 'optimize' directory.


#5

One more comment ... by setting the .euiIcon--Large to zero width, the icons from the different visualization types inside Kibana, also shrink.

I think a better approach is adding css in node_modules/x-pack/plugins/security/public/index.css specific to the login page and which overrides the original styling.

.loginWelcome__header .euiIcon--xxLarge { display:none !important;} 

This should hide the Kibana logo while preserving the other icons' styling within Kibana.


(Sjaak) #6

I noticed the same issue.

Exactly where do you add that CSS? I added it under the .loginWelcome_header part but it doesn't seem to work for me.

Edit:
You need to add display:none !important; below .loginWelcom__logo .euiIcon. Same for the spaces index.css if you want to hide the logo there as well.


#7

I added it right after the closing bracket of the .loginWelcome__header. It needs to be outside since it references the outside element's css class , i.e. .loginWelcome__header .euiIcon--xxLarge. This is a relevant Stackoverflow post on CSS classes & subclasses. Notice you need a space between class and subclass.


(Sjaak) #8

Strange. That is what I did put it doesn't work for me. However I can achieve the same result by doing it as per my previous' post edit.


#9

I think it might also be that I commented out some lines.
Here's how the critical part of index.css looks like:

.loginWelcome__header {
  position: relative;
  padding: 22px;
  z-index: 10;
  /* These are  additions */
  background-image:url("/bundles/[my logo picture].png");
  background-size: 250px;
  background-repeat: no-repeat;
  background-position:center;
}

/*  addition to get rid of the icon on the first page */
.loginWelcome__header .euiIcon--xxLarge { display:none !important;}


.loginWelcome__logo {
	
  margin-bottom: 240px;
  display: inline-block;
  /*
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: #FFF;
  border-radius: 100%;
  padding: 16px;
  -webkit-box-shadow: 0 6px 12px -1px rgba(153, 153, 153, 0.2), 0 4px 4px -1px rgba(153, 153, 153, 0.2), 0 2px 2px 0 rgba(153, 153, 153, 0.2);
          box-shadow: 0 6px 12px -1px rgba(153, 153, 153, 0.2), 0 4px 4px -1px rgba(153, 153, 153, 0.2), 0 2px 2px 0 rgba(153, 153, 153, 0.2); }
  
  .loginWelcome__logo .euiIcon {
    vertical-align: baseline; }
  */
}

#10

In general, I've been hesitant to rebuild the optimize directory inside Kibana and have been tweaking parameters inside the optimize folder, knowing that I would need to repeat those edits after any future upgrades. But it's a semi-permanent solution and the changes are not hard to repeat if properly documented.

So, for the top left navigation bar, I found it extremely easy to modify .global-nav .logo.kibana in
/usr/share/kibana/optimize/bundles/commons.style.css by editing the following lines, replacing the default logo with mine and adjusting the styling sizes/position:

background-image: url(/bundles/[my logo].png);
background-position: 30px 10px;
background-size: 110px 55px;