Replace the kibana logo?

Elastic Stack Kibana
21

I just tested this in the 5.0.0 release and was able to change the kibana.svg logo file and see the results in Kibana. Here's what I did;

I used InkScape to edit src/ui/public/images/kibana.svg and saved it.
I copied that modified file to optimize/bundles/src/ui/public/images on top of the kibana.svg that was there.
I refresh my browser and saw the modified image.

Then, just to be sure, I stopped Kibana, started Kibana, refreshed my browser, and saw the modified image.

Then I stopped Kibana again, deleted everything from the optimize directory, started Kibana, waited for Optimizing to finish, refreshed my browser, and saw the modified image.

Lee

2 Likes
22

@LeeDr We're talking about the icon that shows up in your tab. It's named 'elk.ico'

23

I just completed a similar set of steps to change elk.ico in Kibana 4.6.1 on Ubuntu (installed from .deb package);

I edited the icon at /opt/kibana/src/ui/public/images/elk.ico
(if you're on a different platform or just un-tarred the tar.gz your path may be different)

I saved my edit on top of that same elk.ico file.

I copied that file to /opt/kibana/optimize/bundles/src/ui/public/images/elk.ico

I restarted Kibana service (not sure if this was necessary).

I opened Chromium browser and cleared all my cache and history.

I opened Kibana in that browser, and it shows the modified icon on the tab and on bookmarks bar where I just saved it to.

Now I refreshed Kibana in Firefox without closing the tab or clearing history. I see the old tab icon.

I closed that Firefox tab and reopened Kibana and I see the modified icon.

Lee

1 Like
24

Thanks @LeeDr that did work for me, I may have had the incorrect elk.ico file saved locally. Thanks for the help.

25

Any One tried in Kibana 5.0.2

I don't see any src/ folder exists in Centos 7.1 installed with rpm package

26

Hi

This is the path for Kibana 5: /usr/share/kibana/optimize/bundles/src/ui/public/images

You should convert the .png file to .svg

Greetings

27

Thanks very much just change file but Kibana shows just pink tab with no name giving it reboot to see if it will change anything

should the name of new image should stay kibana.svg only ?

28

Yup, only kibana.svg.

You can convert it with inkscape. :slight_smile:

29

Did the kibana.svg size requirement change in Kibana 5.x version?
I changed it as suggested to 252x45 px and it looks half of the logo place in the top left corner.

Thanks

30

The logo is scaled to 140x50px:

31

Hi all,

Has anyone been able to change the logo image on the top left hand corner in Kibana 5.4.0 yet?

I haven't had any success by following the instructions mentioned above.

Thanks

32

You can change it by replacing the file "0cebf3d61338c454670b1c5bdf5d6d8d.svg" present under the directory "/usr/share/kibana/optimize/bundles/".Images with png extension works as well.Refreshing the browser alone is sufficient. Tested on ESv5.4

2 Likes
33

Thanks mate... worked like a charm!

1 Like
34

i prefer change in source, becasue if u replace logon in optimize bundles, when u install or remove, i need replace logo again.

If u want change logo from source, u need edit file

[kibana directory]/src/ui/views/chrome.jade

Find class

.kibanaWelcomeLogo

u can see this line

background-image: url("here_is_image_base_64.");

U need convert ur logo to base 64 and rplace content

2 Likes
35

Like as the solution from Tat Dat Pham,

you can also modify [kibana directory]/src/ui/views/ ui_app.jade

At the line 96: | Loading MY fancy statistics
for edditing you own loading dashboard text

At line 107: include your own style file bundleFile('MY.style.css');

it would look like this:
var files = [ bundleFile('commons.style.css'),
bundleFile('MY.style.css'),
bundleFile('#{app.id}.style.css'), bundleFile('commons.bundle.js'), bundleFile('#{app.id}.bundle.js') ];

and in the path Daya mentioned

"/usr/share/kibana/optimize/bundles/"

include your MY.style.css file.

In your own CSS file you can override every Style you want like

.global-nav .logo-small.kibana, .global-nav .logo.kibana { background-color:#333333; /* override the pink background */ background-image: url(MY_Logo.svg); /* replace kibana Logo */ }
So there is no need to remove any kibana's original files, for your content.

When you modified the .jade files you need to restart Elasticsearch.

After that you can edit your MY.style.css file and simply reload your browser window for styling changes.

3 Likes
36

Thanks for all reponses. I appreciated:)

37

I like this technique, but when kibana re-optimizes for whatever reason, the new files go away. Where should the My.style.css and MY_Logo.svg files be put in the kibana/src folder so that they get copied into optimize/bundles during the bundle process?

1 Like
38

Speaking of color changes, where should I look to change the color of the pink loading bar that appears at the top of the page?

pink_loading_bar
pink_loading_bar.png1660×114 10.9 KB

39

28 AM

Able change logo and colour

1 Like
40

vi /usr/share/kibana/optimize/bundles/commons.style.css

1 Like