How to apply custom css in Kibana UI

Elastic Stack Kibana
1

How to apply custom css in Kibana UI

2 Likes
2

There's not yet an official way to do this, but you could probably pull it off via the plugin system. Basically just ship your css as a plugin and define your own overriding rules there.

Unfortunately, the plugin stuff isn't really well documented yet. We have a yeoman generator to get you started though:

And this little example might help as well:

1 Like
3

Any news about customizing Kibana CSS? Is Kibana Plugin still the way to do it? I miss a Kibana Plugin API documentation.

4

Plugins are still your best option. Sadly, they aren't really any better documented. It's not hard to figure out though, especially looking at the plugin generator. The "hacks" section in the plugin definition is simply a way to inject whatever you want, CSS included.

There's a slew of known plugins that you can use for reference too.

1 Like
5

Hi Joe, thanks for clarification.

some code snippets for kibana 5 plugin, which change CSS:

index.js

export default function (kibana) {
return new kibana.Plugin({
id: 'hugo_kibana_plugin',
require: ['kibana', 'elasticsearch'],
uiExports: {
  hacks: [
    'plugins/hugo_kibana_plugin/hack'
  ]
}
});
};

public/hack.js

import 'plugins/hugo_kibana_plugin/less/main.less';

public/less/main.less

.global-nav {
  background-color: yellow;
}
6

If you are running dashboards internally/at a customer where you control the browser running the Kibana, you can also use browser injected css. In firefox you can use the userContent.css (http://kb.mozillazine.org/index.php?title=UserChrome.css&printable=yes) or install a plugin in chrome like stylus or similar (https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en)

7

@Joe_Fleming, is there a way for a hack to be run for each kibana application (discover, dashboards, timelion, etc)? Whenever I click between discover and visualization the background color reverts. (my hack is very similar to 9owe8's above but its styling kuiLocalMenuItem)

8

There's not, hacks don't have an API, they just inject some script into the page. If you wanted to execute code conditionally as you navigate the app, you'd have to implement that yourself. You could, as one solution, watch for changes in the URL and react accordingly.

Another way to do this is to write a plugin that simply imports your styles, and use specific CSS selectors to override colors. I believe, though have not tested this, that plugin assets get injects after the core Kibana assets, which means your CSS rules should be able to override the rules that ship with Kibana.

9

We have customized kibana CSS, logo, throbber and favicons with a custom plugin and small code changes. Here you can find a tutorial:

Hope that helps

10

Hi why is there no unique id in kibana ui ?

11

The source is missing