Change Color of Kibana Top Banner

Elastic Stack Kibana
1

Hi,

I have been able to change the Kibana logo in the Kibana 4.X top banner, but what about changing the background color of the navigation banner? Is there a simple way of changing the color code from black/dark grey to something else?

All I want to change is the solid background color (not the shadowing on the buttons).

I've been looking through some of the Bootstrap .less files in /opt/kibana/node_modules/bootstrap/less but not exactly sure where I where I should make my changes (theme.less?). I have not worked much at all with Bootstrap so can anyone help me out?

Thanks,
Michelle

2

@michelle.foy I assume that you are running from a custom build of Kibana, since you mentioned that you are already modifying the logo in the corner. If that is an incorrect assumption, let me know.

If that is the case, you need to modify the kibana.js file found in /src/plugins/kibana/public/kibana.js

Find this line: .setNavBackground('#222222222') and modify that hex value to whatever you want.

Let me know if that solves your problem!

3

That worked as I wanted thanks!

4

@BigFunger Is there any way to change the text color in that same top banner? (i.e. change text color of Discover, Visualize, Settings, & Time Picker)

5

@michelle.foy, were you able to figure out how to accomplish this?

You need to tweak values in /src/ui/public/styles/variables/bootstrap-mods.less for the rest of the formatting.

6

@BigFunger Yes! Thank you, after fiddling around I was able to change the colors in the top banner by changing the following color codes:

  • ./bootstrap-mods.less:@navbar-inverse-link-color
  • ./bootstrap-mods.less:@navbar-inverse-link-hover-color
  • ./bootstrap-mods.less:@navbar-inverse-link-active-color
  • ./bootstrap-mods.less:@navbar-inverse-brand-color