Hi, 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.
so can i have a guide to :
1- Browser title and loading logo (1)
2- Loading logo (2)
3- Favicons
4- Remove Kibana background images on login page
5- Change side bar logo
i'm with version 7.6.0 , i will appreciate any help!!
We are going to add this functionality in an upcoming version. Stay tuned https://github.com/elastic/kibana/issues/17879
There is a plugin that allows you to change Kibana logo Logo change
hi, have you any idea how to change backgroud of login page et remove the imgs?
For changing the loading logo and text, try this:
Logo:
Go at src/core/server/rendering/views/styles.js and change the following: mybase64image. I also changed the field margin below in order my logo to center properly.
.kibanaWelcomeLogo {
width: 60px;
height: 60px;
margin: 10px 0 0px 10px;
background-repeat: no-repeat;
background-size: contain;
background-image: url('data:image/svg+xml;base64, mybase64image');
}
Text:
For the text "Loading Kibana", go at src/core/server/rendering/views/template.js and search for this specific text and change it with your own.
Wish this works also for you. 
P.S.: for your logo, you should convert your logo from png to svg and then from svg to base64. (there are online photo editors for these conversions)
For the logo in the browser, you should go in the favicons folder kibana\src\legacy\ui\public\assets\favicons and replace the images there with your owns.
For the title in the browser, go at the file kibana\src\core\server\rendering\views\template.js and change the word kibana below:
line 55
}), _react.default.createElement("title", null, "kibana"), _react.default.createElement(_fonts.Fonts, {
1 Like
Go at folder kibana\src\legacy\ui\public\assets\favicons and replace the images there with your owns. (take care the types/format (.png, .ico) of the images to be the same with the ones you overwrite)
Hi, @marrel thank you so much for help, i just have two questions have you any idea how to change logo in left( header sidebar of kibana ) and how remove imgs in page of login ??
i really appreciate your help.
Hi @Emna1!
For changing the logo in 7.6 you can follow the below steps:
- go at the file
kibana\src\core\server\rendering\views\styles.tsx. - you will see the following code:
.kibanaWelcomeLogo {
width: 60px;
height: 60px;
margin: 10px 0 10px 10px;
background-repeat: no-repeat;
background-size: contain;
/* SVG optimized according to http://codepen.io/tigt/post/optimizing-svgs-in-data-uris */
background-image: url('data:image/svg+xml;base64, base64image'); }
- exactly after that code you should add:
a[data-test-subj="logo"] * {
display: none;
}
a[data-test-subj="logo"] {
background: url(url_to_my_logo) no-repeat 0 0;
background-size: auto 26px;
border-bottom: none;
background-position: 10px 10px;
}
a[data-test-subj="logo"]:focus {
background: url(url_to_my_logo) no-repeat 0 0;
background-size: auto 26px;
border-bottom: none;
background-position: 10px 10px;
}
change the above two fields url_to_my_logo with your own logo, and the logo will be changed! Regarding this change, one person from the community helped me when I had the same problem.
Regarding removing imgs in page of login, I am also working on it now. If I had something successful I will definitely share with you. If it is possible pls share also your comments if you have something from your side.
Hi, @marrel
Thank you so much you are so helpful, please i have a question when i add the url of my own logo and i run kibana, the logo is gone but it doesn't change.Is there a mistake i made here? my logo (60*60 pixel)
Blockquote
a[data-test-subj="logo"] * {
display: none;
}
a[data-test-subj="logo"] {
background: url('C:/Users/capt.png') no-repeat 0 0;
background-size: auto 26px;
border-bottom: none;
background-position: 10px 10px;
}
a[data-test-subj="logo"]:focus {
background: url('C:/Users/capt.png') no-repeat 0 0;
background-size: auto 26px;
border-bottom: none;
background-position: 10px 10px;
}
Blockquote
Your logo should be either from the internet or from favicons file (for a local image).
If you have your logo somewhere on the internet (eg. your website), use the url/link of that logo.
However, I prefer to use my local image. So in order to load your local image, add your logo in the favicons file and use img 's url when you run Kibana.
Your url would have the following path:
Use the path as above, without this '' symbol.
I think your logo should be 80x80.
Thank you so much, really i appreciate your help, it works fine now 
1 Like
Hi, @marrel, have you found a way to delete the images in the login page, I'm looking for, but no news yet 
I am working on this @Emna1, but not good news. The only difference is that I tried to change the logo from the Select Space page but kibana logo is still loaded on top of mine and now I have two logos together..
Probably kibana logo is produced from a different file. 
I already provided that.
Don't forget to delete the optimize folder in order to force Kibana to rebundle. 
Hi marrel,
You have to change two files for changing the background image :
i) /kibana/src/legacy/ui/public/styles/_mixins.scss
@mixin kibanaFullScreenGraphics($euiZLevel: $euiZLevel9) {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: $euiZLevel + 1000;
background: url(' your image') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
opacity: 0;
overflow: auto;
animation: kibanaFullScreenGraphics_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
@keyframes kibanaFullScreenGraphics_FadeIn {
from {
opacity: 0;
transform: translateY(200px), scale(.75);
}
to {
opacity: 1;
transform: translateY(0), scale(1);
}
}
}
ii) x-pack/legacy/plugins/security/public/views/login/_login.scss :
.loginWelcome__content {
position: relative;
margin: auto;
max-width: 460px;
padding-left: $euiSizeXL;
padding-right: $euiSizeXL;
z-index: 10;
background: url('your image');
&.loginWelcome__contentDisabledForm {
max-width: 700px;
}
}
Thanks
Akhil
Hi, @Akhil_Kaithoju, i try to change the background in login page and i change this two files, but there is no changes; in file _mixins.scss after this
Blockquote
animation: kibanaFullScreenGraphics_FadeIn $euiAnimSpeedExtraSlow $euiAnimSlightResistance 0s forwards;
Blockquote.
i delete this code.
Blockquote
&::before {
position: absolute;
top: 0;
right: 0;
z-index: 1;
width: 400px;
height: 370px;
content: url(lightOrDarkTheme('ui/assets/images/bg_top_branded.svg', 'ui/assets/images/bg_top_branded_dark.svg'));
}
&::after {
position: fixed;
bottom: 0;
left: 0;
z-index: 1;
width: 1170px;
height: 880px;
content: url(lightOrDarkTheme('ui/assets/images/bg_bottom_branded.svg', 'ui/assets/images/bg_bottom_branded_dark.svg'));
}
Blockquote
and my image, i put it like this
background: url(https://........................1495.jpg) no-repeat center center fixed;
is there any mistakes here??
Are you using kibana build folder or gihub source code ??
If you use Kibana build you need to remove the bundles.