# Customize Kibana 6.5 Login Page

**URL:** <https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153>\
**Category:** Kibana\
**Created:** [November 17, 2018, 5:40am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153 "2018-11-17T05:40:12Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [November 17, 2018, 5:40am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/1 "2018-11-17T05:40:12Z")

</div>

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](https://stackoverflow.com/questions/16956810/how-do-i-find-all-files-containing-specific-text-on-linux).  
`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.

---

<div class="post-metadata">

**Author:** ![Sjaak01](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)\
**Post date:** [November 19, 2018, 8:05am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/2 "2018-11-19T08:05:45Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Sjaak01](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)\
**Post date:** [November 21, 2018, 2:53am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/3 "2018-11-21T02:53:21Z")

</div>

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 the`height` 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.

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [November 21, 2018, 7:25am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/4 "2018-11-21T07:25:17Z")

</div>

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](https://github.com/elastic/kibana/issues/18944) 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.

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [November 21, 2018, 9:35am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/5 "2018-11-21T09:35:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sjaak01](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)\
**Post date:** [November 22, 2018, 12:16am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/6 "2018-11-22T00:16:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [November 22, 2018, 12:32am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/7 "2018-11-22T00:32:10Z")

</div>

> [@Sjaak01](#):
>
> Exactly where do you add that CSS? I added it under the .loginWelcome\_header part but it doesn't seem to work for me.

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](https://stackoverflow.com/questions/558721/css-classes-subclasses) on CSS classes & subclasses. Notice you need **a space** between class and subclass.

---

<div class="post-metadata">

**Author:** ![Sjaak01](https://avatars.discourse-cdn.com/v4/letter/s/73ab20/32.png) [@Sjaak01](https://discuss.elastic.co/u/Sjaak01)\
**Post date:** [November 22, 2018, 12:56am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/8 "2018-11-22T00:56:42Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [November 22, 2018, 1:11am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/9 "2018-11-22T01:11:30Z")

</div>

> [@Sjaak01](#):
>
> 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.

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

```auto
.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; }
  */
}

```

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [December 5, 2018, 1:15am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/10 "2018-12-05T01:15:43Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [December 18, 2018, 10:54pm UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/11 "2018-12-18T22:54:12Z")

</div>

> [@Sjaak01](#):
>
> **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.

This was straightforward, no need to delete + re-build optimization folder of kibana.

---

<div class="post-metadata">

**Author:** ![nandrik](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/nandrik/32/39951_2.png) [@nandrik](https://discuss.elastic.co/u/nandrik)\
**Post date:** [December 31, 2018, 2:54am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/12 "2018-12-31T02:54:25Z")

</div>

Building on @Sjaak01's post ... a bit more detail on how to change the loading Kibana logo and the underlying text:

- Find the `kibanaWelcomeLogo` element in the css of `ui_app.pug`  
`/usr/share/kibana/src/ui/ui_render/views/ui_app.pug`

- Change css in ui\_app.pug files to:

```auto
background-image: url(/bundles/[my-logo-file-here]);
width: 130px;
height:125px;
margin: -20px 0px 0px -20px;

```

- Same `ui_app.pug` file, search for `.kibanaWelcomeText` and change `Kibana Loading` to the text of your choice
- Restart kibana  
`systemctl restart kibana.service`

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 28, 2019, 2:54am UTC](https://discuss.elastic.co/t/customize-kibana-6-5-login-page/157153/13 "2019-01-28T02:54:32Z")

</div>

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