Change Ambari’s topbar color

We recently had a client that has multiple environments (Production, Integration, Testing, …) running on HDP and managed using one Ambari instance per cluster.

One of the questions that came up was the folloging:

We need a way to distinguish our environment when on Ambari and the cluster name is visually not enough, how can we change the color of the topbar to, let’s say, a bright red ?

There’s no pre-made solution, however here’s a simple trick : the CSS of the UI is defined in the file /usr/lib/ambari-server/web/stylesheets/vendor.css of the Ambari server machine and the selector for the topbar’s background is #top-nav .navbar.navbar-static-top .navbar-inner.

Here’s an example, add the following line at the top of vendor.css:

and you’ll get this ugly but functional result:

ambari red barCan’t miss that red !

Now it’s up to you to make it look better !

Note: since this is a manual hack, your code is going to be overwritten when you update ambari !

By |2018-06-05T22:37:01+00:00July 9th, 2017|Categories: Hack|Tags: , |1 Comment

About the Author:

Big Data consultant @ Adaltas since 2015, I enjoy discovering stuff and experimenting with new technologies in addition to my day to day work

One Comment

  1. Tariq November 10, 2018 at 11:48 pm - Reply

    Thank you Cesar! this helped me a lot! A client wanted to change the color to differentiate between multiple environment (Dev, Prod)

Leave A Comment