How to change the top left header logo in kibana 7.9.2

Also if you temporarily remove .gz and .br files Kibana should serve you original non-compressed JS file - just to reduce a number of "variables" while you're debugging.

@azasypkin I did check the URL it's the same in my case
http://localhost:5601/33984/bundles/core/core.entry.js

but for some reason this property is same in here it has not changed.

iconType:"logoElastic"

That's weird and I'm wondering if your Kibana is running from a different place or something.

@azasypkin I don't think so because the login page is changed .

@azasypkin no it is not i installed kibana again too the login page although does update the logo however the header does not change and in the URL

http://localhost:5601/33984/bundles/core/core.entry.js

iconType:"logoElastic"

and not the svg image :frowning:

Hi @azasypkin and @witcher,

I have created and shared a guide, showing the steps for customizing the Kibana UI components, that I have been able to apply thus far. I was able to customize the Login logo just the way I was looking for. Now I will deal with the top left header logo.

2 Likes

@ManuelF Wow thanks.

quick question
how do you put the svg because in my case the svg file is big which causes a recursive error?

and how to put text below "Welcome toElastic"?

Well, I haven't try with SVG files, but perhaps what you need to do is to reduce the size of the source image file. This will generate a smaller SVG file.

I also had the recursive error, but I was generating a base64 file from an original image that was 721x689px. I recommend to use a source image with size between 90px and 100x, but can try a different size. Just try to reduce the source image.

And for the text do the following:

  • Open file
    $ sudo nano /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js

  • Search for the welcome text and replace it with your own
    {id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"Welcome to Elastic"} Result:
    {id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text"}

  • Save changes to JavaScript file and generate the compressed files. Update files permissions. Then restart Kibana.
    $ npx gzip-cli /usr/share/kibana/x-pack/plugins/security/target/public/4.plugin.js -e=gz -e=br

    $ sudo chmod 664 /usr/share/kibana/x-pack/plugins/security/target/public/*.*

    $ sudo systemctl restart kibana

@ManuelF I will try reducing the source file.

what I am saying is i want to add text below the "Welcome to Elastic" statement

Oh, I get it now. You can try adding a new line with <br> or \n inside the text object string, like in html:

external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_KbnI18nRReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text <br>new_text_line"}))

Or adding a new text object to the code right after the welcomeTitle text object (duplicate the text object):

external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_KbnI18nRReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"custom_text"}))

I have not tried any of these. It could be tricky dealing with the parenthesis...

@ManuelF thanks i will try it and revert.

Hi @azasypkin,

I am very glad to let you know that thanks to your help, I was able to successfully customize the login logo and the navbar logo. Also shared the steps so other users in need may benefit from it.

Would you help me to do the same with the Space Selector and the Exit Full Screen logos?

Thank you in advance

@ManuelF I followed your guide its not clear to me how to resize the login logo?

Sorry about that.

If your logo is not too big, just change the size option of the object and you don't have to remove any frame. You can choose any of these: s, m, l, xl, xxl and original
{type:"logoElastic",size:"xxl"}

If your logo does not fit in the frame, it will move out and won't look good. To prevent that from happening and you can also set a custom size beyond the options above, you need to remove the logo frame object from the code and leave only the logo object.

Remove this block:
,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},

and the last parenthesis from here:
… {type:"logoElastic",size:"xxl"})),…

Once done, you can use size:"original” and the logo will take the same size of the source image where the SVG or base64 came from.

@ManuelF is it possible for you to share your files because when i make these changes the login page disappears

  • Spaces Selector: "logoElastic" near/before xpack.spaces.spaceSelector.selectSpacesTitle string in ..../kibana-7.9.2-linux-x86_64/x-pack/plugins/spaces/target/public/1.plugin.js

  • Exit Full Screen: "logoElastic" near/before kibana-react.exitFullScreenButton string in ..../kibana-7.9.2-linux-x86_64/src/plugins/kibana_react/target/public/kibanaReact.plugin.js (there is a chance you'll need to update this one in other files, but the idea is the same).

Best,
Oleg

1 Like

@azasypkin hey mate can you tell me how should I load an svg file in the logo because whenever the svg gets too big it throws a reccursive error.

Hmm, this recursive error is weird, it'd be great if anyone can investigate that. But can't you just put your SVG file to, let's say, ..../kibana-7.9.2-linux-x86_64/src/core/server/core_app/assets/my_svg.svg and reference it from the bundle like type:"/ui/my_svg.svg?

I also had the recursive error at startup, but it was fixed when I reduced the size of the image.

well tbh I did not know that thank you.

is it possible to increase the size of the header logo?