Customize CSS in Kibana 7

1.7k views Asked by At

I have a React application with an integrated iframe which loads an example Kibana dashboard. But now,I have to change the styling of this Kibana Dashboard, namely the background color of tables, button colors and font styles.

First, I tried to use a plugin, but this does only work for previous Kibana versions. Since I have to stay with v7, this is no option.

Next, I tried to modify the CSS-stylesheets in Kibana itself, for example: /usr/share/kibana/optimize/bundles/light-theme.style.css

But when I reload the application in Chrome,go "Inspect" and look at light-theme.style.css there, nothing changed in that file! What am I doing wrong? I changed this exact file in my local Kibana folder (/usr/share/kibana/optimize/bundles/light-theme.style.css) and it is saved. Why is it not applied when restarting Kibana, although my changes are saved in this file? I also deleted the Cache, with no success.

I followed the instructions over here, with no success (CSS stylings are not applied).

Does anyone have an idea and can help me?

1

There are 1 answers

1
Michael LEVY On BEST ANSWER

You will need to gzip and brotli the css file and put it back to its original location, I do it all the time in docker ELK