Replace the kibana logo?

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