Change Color of Kibana Top Banner


(Michelle Foy) #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


(Jim Unger) #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!


(Michelle Foy) #3

That worked as I wanted thanks!


(Michelle Foy) #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)


(Jim Unger) #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.


(Michelle Foy) #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

(system) #7