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?
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.
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).
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?
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
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)
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.
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"})
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
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)
Apache, Apache Lucene, Apache Hadoop, Hadoop, HDFS and the yellow elephant
logo are trademarks of the
Apache Software Foundation
in the United States and/or other countries.
I am still trying to add a new line below the "Welcome to Elastic" line but it is not happening .
