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 !