How to Customize Kibana 7.6.0 Login Page?

Elastic Stack Kibana
21

Have you edit this file too x-pack/legacy/plugins/security/public/views/login/_login.scss ??

22

I'm using kibana build folder and yes i change this file _login.scss
i add background: url(https://........................1495.jpg) ;

23

Are you using kibana build folder or gihub source code ??

24

I'm using kibana build folder.

25

before you start the kibana you have to remove the bundles
cmd : rm -rf optimize/bundles

Have you done before ?

26

Try this way background: url('https://........................1495.jpg') ;

27

i try it background: url('https://........................1495.jpg') ; but it doesn't work . In order to trigger a rebuild i must have to delete the optimize/bundles/ directory in the kibana install. Then the build system will realize there is no build and recreate it. but i didn't do that when i installed kibana.

28

I am not saying building. So when you edit any file you have to remove the bundles and restart it. Basically it will optimize the new bundles and update latest code.

29

Thank you , i understand now , i will try again.

30

Hi @Akhil_Kaithoju , i tried this command rm -rf optimize/bundles, so this folder is deleted . and then i run kibana from git bash, but there is no changes in login page of kibana.
i hope @marrel try these changes and share with us the results.

31

It should be work. It works for me.

32

Hello everyone, I want to know if someone could change or delete this logo
when you create a dashbord and when you click on full screen , you can visualise this logo of kibana. Someone can help me in this please!!
Capture

33

I managed to change the logo from login/logout page and from space selector logo:

For changing logo from space selector page:

  1. go at kibana\built_assets\css\plugins\spaces\index.dark.css and kibana\built_assets\css\plugins\spaces\index.light.css

  2. add some css (the following code lines)
    requirement: the image should be inside favicons folder and the size 48x48 pixel

background: url(http://xxxxxxx.xxxx/ui/favicons/your_image.png);
background-position: center;
background-repeat: no-repeat;

... inside the .spcSpaceSelector__logo {...here..}

  1. go at kibana/node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.dark.css and kibana/node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.light.css
    change from 40px to 0px the following:
    .euiIcon--xxLarge {
    width: 0px;
    height: 0px; }

For changing logo from login/logout page:

  1. go at kibana\built_assets\css\plugins\security\index.dark.css and kibana\built_assets\css\plugins\security\index.light.css

  2. add some css (the following code lines)
    requirement: the image should be inside favicons folder and the size 48x48 pixel

background: url(http://xxxxxxx.xxxx/ui/favicons/your_image.png);
background-position: center;
background-repeat: no-repeat;

... inside the .loginWelcome__logo {.....here......}
(if you want you can delete the line with the background-color or change it to your favourite.)

  1. go at kibana/node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.dark.css and kibana/node_modules/@kbn/ui-shared-deps/target/kbn-ui-shared-deps.light.css
    change from 40px to 0px the following:
    .euiIcon--xxLarge {
    width: 0px;
    height: 0px; }
    (if you have done it in the previous change: For changing logo from space selector page:, just skip it)
34

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