There is a chance you've accidentally made a syntax error while editing or something, take a look at the browser console and check if there are any errors there. If yes, then try to revert core.entry.js and try to change it again.
@azasypkin Its running again I have set the property to
iconType:{"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"}
but the logo is not changing in the header
It should be iconType:"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png", the value of iconType should be a string, not an object. The only change is "logoElastic" to "https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png" the rest should stay the same.
iconType={"https://some-host/some-picture.png"}
I think you're confused by this. This is from one of my previous posts, such format only works when you edit source code/JSX, but you're editing compiled JavaScript, so the format should be iconType:"https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png"
I am out of ideas to be honest. If you edited the right file, the right place in this file and regenerated gz/br files then it should work, like it works for the login page. I can share my edited file tomorrow so that you can compare.
@azasypkin Thank you so much mate, really thanks for your effort, patience , time & dedication. You have helped me and have been patient with me throughout you even cleared some of my concepts in the process.
Cheers🙂
@azasypkin, I still don't give up. Like I said before, I successfully changed the following components:
- Loading logo
- Loading text
- Favicon
- Tab tex
Now I am trying to change the Login logo, and I am very excited, because for the very first time someone mentioned the compressed versions of the files. Of course. This is why, when I edited the files, even after restarting Kibana, I didn't see any changes and it seemed that the new code was being ignored. This time I modified both, the .js and the .gz file. Still did not see the result I was expecting, but at least something happened. I got a redundancy error, but perhaps I introduced errors in the code. I can confirm that the remote image works https://upload.wikimedia.org/wikipedia/commons/1/1e/RPC-JP_Logo.png, but I am trying to use a base64 image instead of a remote image.
Can you help me a little bit more and let me know which of the following options is correct?:
"img", {src:'data:image/png;base64,iVBORw0K ... '}url('data:image/png;base64,iVBORw0KGgo...')-
"data:image/png;base64,iVBORw0K ..."?
Thank you
I am very close to my goal. Now I can upload my custom images with format like "data:image/png;base64,iVBORw0K ...", but image appears too small, it does not matter if I change the size in the source and recompile the base64 image. Is there way to increase the size to make it bigger? The default for that field is xxl, which is very small. I tried original, but I may have to reduce my image, because it went out from the right place were it should stay.
Have you tried SVGs (data:image/svg+xml;base64, compressed files contain a bunch of them as well)? The components we use are optimized to work with SVGs.
Also once you figure this out, can you share your modified files with @witcher (just to do a diff and see where the difference between your and their changes)?
You can also take a look at mine (uses SVG-data URIs for login logo and top header, source and compressed versions, but please just use it for diff, never ever run anything that a random person on the internet shares with you).
@azasypkin tried it mate did not work
Make sure you clear browser cache, because it's supposed to cache assets pretty aggressively. E.g. if you refresh page with browser dev tools open usually it doesn't respect cache or depending on the browser you may have to turn that option on.
Best,
Oleg
@azasypkin I did change the core.entry.js file set the property to this just as it was in your changed files.
iconType:"data:image/svg+xml;charset=utf-8,%3Csvg%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20class%3D%22euiIcon%20euiIcon--medium%20euiIcon-isLoaded%22%20focusable%3D%22false%22%20role%3D%22img%22%20aria-hidden%3D%22true%22%3E%3Cg%20fill%3D%22none%22%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M16%2032L0%2011.454l6.931-10.38L16%200l9.069%201.074L32%2011.454z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23EC6C00%22%20d%3D%22M16%2032L0%2011.454h32z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M16%2032L6.477%2011.454h19.045z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFEFB4%22%20d%3D%22M16%200L6.477%2011.454h19.045z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FFAE00%22%20d%3D%22M6.932%201.074L3.369%206.3.001%2011.454h6.542zM25.069%201.074L28.632%206.3%2032%2011.454h-6.542z%22%3E%3C%2Fpath%3E%3Cpath%20fill%3D%22%23FED305%22%20d%3D%22M6.931%201.074l-.453%2010.38L16%200zM25.069%201.074l.453%2010.38L16%200z%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E"
then I used this command to generate the zip file and the br file note that this command worked with the login page.
npx gzip-cli ..kibana-7.9.2-windows-x86_64\src\core\target\public\core.entry.js -o ..kibana-7.9.2-windows-x86_64\src\core\target\public --extension=gz --extension=br
I always clear the cache after every change I make.
I literally don't have a clue about where I am going wrong.
Hmm, do you see any difference between your core.entry.js and mine? Also check in network tab the actual content of the file that server returns to you, e.g. in my case it's http://localhost:5601/33984/bundles/core/core.entry.js.
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 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 
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