How to customize kibana appearance?

Elastic Stack Kibana
1

Hi, is it possible to customize kibana?
I would like to change the appearance a bit which means I want to change the following:

  • font
  • text foreground color
  • background color
  • maybe changing / replacing the kibana logo.

Is that possible?

How?

Thanks, Andreas

2

Hi Andreas,

right now you unfortunately have to modify the CSS of Kibana, i.e. provide a modified Kibana version to change styling. Please follow https://github.com/elastic/kibana/issues/17879 for more updates onto themability of Kibana.

Cheers,
Tim

3

Hi Tim,

thanks for the reply. I am not familiar with css yet. A quick glimpse into the kibana directories shows a lot of css files. Is there any documentation or tutorial or design guide?

A little push in the direction to get the needed files identified would be appreciated.

Greetings, Andreas

4

Hi,

sorry there is no tutorial or guideline for that, since we are not documenting how to modify Kibana, since that's basically not an API or something that's stable, so you would need to touch your modified version most likely every minor version to keep it up to date, why we are not trying to advertise that in general. Also the CSS/LESS/SASS is spread all over the place close to the feature it's for, so you would need to look through the repository to find the corresponding files. Usually you can just inspect elements in your dev tools and search for the class names you are looking for.

Cheers,
Tim

5

Thanks, I will have a look.

6

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