# How to apply custom css in Kibana UI
**URL:** https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434
**Category:** Kibana
**Created:** [December 17, 2015, 6:14am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434 "2015-12-17T06:14:42Z")
**Posts on this page:** 12
**Page:** 1
### Author:  [@jawahar\_reddy\_bandi](https://discuss.elastic.co/u/jawahar_reddy_bandi)
#### Post date: [December 17, 2015, 6:14am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/1 "2015-12-17T06:14:42Z")
How to apply custom css in Kibana UI
---
### Author:  [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)
#### Post date: [December 17, 2015, 5:34pm UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/2 "2015-12-17T17:34:19Z")
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:
> **[elastic/generator-kibana-plugin](https://github.com/elastic/generator-kibana-plugin)**
>
> generator-kibana-plugin - DEPRECATED Yeoman Generator for Kibana Plugins, please use https://github.com/elastic/template-kibana-plugin/
And this little example might help as well:
> **[kreeware/kibana-cookbook](https://github.com/kreeware/kibana-cookbook/tree/master/asset-example)**
>
> kibana-cookbook - A collection of solutions and for creating dashboards and visualizations with Kibana
---
### Author:  [@9owe8](https://discuss.elastic.co/u/9owe8)
#### Post date: [April 6, 2017, 7:57am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/3 "2017-04-06T07:57:15Z")
Any news about customizing Kibana CSS? Is Kibana Plugin still the way to do it? I miss a Kibana Plugin API documentation.
---
### Author:  [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)
#### Post date: [April 6, 2017, 9:07pm UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/4 "2017-04-06T21:07:16Z")
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](https://www.elastic.co/guide/en/kibana/current/known-plugins.html) that you can use for reference too.
---
### Author:  [@9owe8](https://discuss.elastic.co/u/9owe8)
#### Post date: [April 21, 2017, 6:36am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/5 "2017-04-21T06:36:07Z")
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;
}
```
---
### Author:  [@epe](https://discuss.elastic.co/u/epe)
#### Post date: [June 18, 2017, 8:00pm UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/6 "2017-06-18T20:00:12Z")
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](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](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne?hl=en))
---
### Author:  [@doveStep](https://discuss.elastic.co/u/doveStep)
#### Post date: [January 19, 2018, 12:07am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/7 "2018-01-19T00:07:04Z")
@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)
---
### Author:  [@Joe\_Fleming](https://discuss.elastic.co/u/Joe_Fleming)
#### Post date: [January 19, 2018, 6:06pm UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/8 "2018-01-19T18:06:26Z")
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.
---
### Author:  [@cgiraldo](https://discuss.elastic.co/u/cgiraldo)
#### Post date: [April 24, 2018, 6:44am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/9 "2018-04-24T06:44:16Z")
We have customized kibana CSS, logo, throbber and favicons with a custom plugin and small code changes. Here you can find a tutorial:
> **[Customizing Kibana Web Application – Gradiant Talks – Medium](https://medium.com/gradiant-talks/customizing-kibana-web-application-f74c1b48ec73)**
>
> A step-by-step recipe to add your brand style to Kibana
Hope that helps
---
### Author:  [@addprs](https://discuss.elastic.co/u/addprs)
#### Post date: [October 4, 2018, 11:13pm UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/10 "2018-10-04T23:13:18Z")
Hi why is there no unique id in kibana ui ?
---
### Author:  [@HH2O77](https://discuss.elastic.co/u/HH2O77)
#### Post date: [March 9, 2020, 5:21am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/11 "2020-03-09T05:21:47Z")
The source is missing
---
### Author:  [@system](https://discuss.elastic.co/u/system)
#### Post date: [November 4, 2022, 4:11am UTC](https://discuss.elastic.co/t/how-to-apply-custom-css-in-kibana-ui/37434/12 "2022-11-04T04:11:29Z")