KB7 Custom Logo

[bbek (bo)]

We have multiple kibana instances between internal departments, and have branded each instance specific to each audience for easy recognition. (Red menu and logo for red team, blue for blue team, etc)

On 6.x KB versions, it was 'doable' to modify the uppermost left logo with a custom svg (and within a config few files).

With KB7, the logo rendering structure appears to have been modified in a fashion that the previous methods do not work.

Can any assistance or guidance be given in which the community can update or customize the logo and/or any other of the sidebar look and feel with Kibana 7? Or can the directories/config files be specified which need tweaking?

We'd like to move to the latest versions, but want to accommodate our target audience functionality requirements as well.

Thanks!

B

[Sjaak01 (Sjaak)]

Find the css file that contains euiIcon euIcon--large euiHeaderLogo__icon. You can probably add some css in there to load your own logo.

I think this is the same file that on the 6.x renders the Kibana logo in the circle on the login and spaces page.

edit: Don't think this will work. Looks like something is generating the logo, its not a simple image file you can edit. Maybe its generated inside ./built_assets/dlls/vendors.bundle.dll.js.

Hopefully one of the devs can comment on how to edit the icon.

[Sjaak01 (Sjaak)]

Okay I found a way to add your own logo. Probably pretty hacky but it works.

Open one of these files depending on the theme you're using:
/node_modules/@elastic/eui/dist/eui_theme_light.css
/node_modules/@elastic/eui/dist/eui_theme_dark.css

Find .euiHeaderLogo__Icon and change opacity to 0. This will hide the original logo.

Next look for euiHeaderLogo, should be right above .euiHeaderLogo__Icon. Add some css such as background-image and background-repeat to add your own logo.

Now look for .euiHeaderLogo:focus and delete the line background: #232635; } or your logo will disappear when you click it.

[samwato (Sam)]

I've used the same solution and it works fine so far.