Kibana Logo and background colour Change

Elastic Stack Kibana
1

Hello Guys,

Good day!

I just want to create a customized view of Kibana. I need to understand the method of changing the Kibana UI logo and its background colour. I have got multiple topics regarding the same but nothing is clear and changes are not reflecting...Can you guys please tell me the ways to change the kibana logo and background colour in a step by step manner?

Appreciate your help!

Thanks

2

Hello!

It is possible. I was able to modify the background style directly on a docker container running 6.6.0. You can likely ignore the docker portion, but here are the steps I took if it helps:

  • Pull docker kibana 6.6.0
  • Run the kibana docker container
  • Inspect the logo to determine the css class applied to the logo, in my case: .kbnGlobalNav__logoBrand
  • I looked at the top of the source index.html and found a stylesheet I could modify: commons.style.css
  • I then did a bash search for that file in my docker container, yours would be on your local system: find / -name commons.style.css, which on my docker system located it here: /usr/share/kibana/optimize/bundles/commons.style.css
  • I added a css background property of black towards the top of that file:
.kbnGlobalNav__logoBrand {
  background: black;
}

And voila, black background logo! You could override any number of things in here. You could also potentially just find the index.html file, add a custom css file of your choosing and do all of your overrides there. Hopefully this is enough to get you on your way though!

Regards,
Aaron

3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.