How to change the top left header logo in kibana 7.9.2

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?

Maybe @ManuelF can suggest something here? if size property doesn't work for you, maybe the problem is in SVG file itself (e.g. too much white space around main element or something)? Have you tried other SVGs, are all of them small? I'm honestly not an expert in SVG :slightly_smiling_face:

All I did was remove the frame that encloses the EuiIcon object from the code. This object restrict the size of the log you could use, so by removing that object from the code and leaving the EuiIcon object without frame, you can set the size that you want, with size:"original". In my case I was using a source image of 721x689px to generate the base64 image. Apparently it was to big, so I reduced the size of the source image to 100x96px (that's the size I need), then generated the base64 image file. That did not rise any recursive errors and my logo looks great and centered.

The above is to remove the frame object className:"loginWelcome__logo" and leave only what comes right after in the code, which is the EuiIcon object (the logo)

Result:

,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiSpacer"],{size:"xxl"}),external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … JevgsIAAAAASUVORK5CYII=",size:"original”}),

See the code before and after the edition so you can see what changed

Code before:
,external_kbnSharedDeps_React_default.a.createElement("span",{className:"loginWelcome__logo"},external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"logoElastic",size:"xxl"})),

Code after:
,external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiSpacer"],{size:"xxl"}),external_kbnSharedDeps_React_default.a.createElement(external_kbnSharedDeps_ElasticEui_["EuiIcon"],{type:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUg … JevgsIAAAAASUVORK5CYII=",size:"original”}),

Hi @azasypkin,

I was able to customize the Space Selector logo and the Exit-Full-Screen logo. Updated steps in my tutorial.

Thank you a lot!! :grin: :+1:

2 Likes

Glad to hear that and thanks for creating the tutorial!

1 Like

Thanks for all the help @azasypkin and @ManuelF :slightly_smiling_face: I am still trying to add a new line below the "Welcome to Elastic" line but it is not happening .

@witcher,

I am sorry that I can't help further, but honestly I have not tried that scenario. However, like I said before, you could try duplicating the text object in the code and see what happens.

Open file:

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

After this string:

className:"loginWelcome__title"},external_kbnSharedDeps_React_default.a.createElement("h1",null,

Duplicate this object:

(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT"})

to have this:

(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_1"}),(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_2"})

Becarefull with the parenthesis...

You could also add more spaces after your 1st string. If the string is long enough, the text will be accommodated in a second line automatically.

(external_kbnSharedDeps_KbnI18nReact_["FormattedMessage"],{id:"xpack.security.loginPage.welcomeTitle",defaultMessage:"CUSTOM_TEXT_1 [space space space] CUSTOM_TEXT2"})

Good luck!! :crossed_fingers: :four_leaf_clover:

Just my 2 cents:

I'd really encourage anyone trying to customize Kibana to use source code to experiment, it's much easier to work with (TypeScript, React, Sass etc.) and locate places you want to change. Although it's a bit heavy and slow when you run in it in the dev mode, it's super easy to get started (e.g. yarn kbn bootstrap ---> yarn es snapshot --license trial to run required version of Elasticsearch in one tab, and yarn start in another to run Kibana from source), that's it. Play, inspect, change, no need to restart Kibana anymore and use complex heuristics to find a particular place in minimized JS files :slight_smile:

Once all your changes work well in the dev mode, you can run the build (e.g. NODE_OPTIONS=--max_old_space_size=8192 yarn build --skip-archives - yeah, the build is quite heavy and requires quite a bit of time and resources to complete) and copy built artifacts that you need. Since you always know what git revision and git tag was used to build your original distributable you'll have exactly same outcome when you build it locally, so you can either use your new built version completely or just replace few files you need without a fear that something may be broken.

The commands I shared above are mentioned in our dev docs as well, code is entirely open at GitHub, at Elastic we don't use anything to build or develop Kibana that's not available to you, so if you already can change minimized versions of the files, compress them and do all that magic you certainly can work with our source code much more efficiently (not to mention that you can then make a proper git diff when new version is released to know exactly what you may need to change) :wink:

did not work mate if I tried both of the cases the first one gives a recursive error and the second case just ignores more than one space

@azasypkin Thanks for the advice appreciate it . I will surely try it out on my end :slightly_smiling_face: :+1: