Change Ambari’s topbar color

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 | 2017-07-24T21:37:13+00:00 July 9th, 2017|Categories: Hack|Tags: , |0 Comments

About the Author:

Big Data consultant @ Adaltas since 2015, Cesar enjoys discovering stuff and experimenting with new technologies in addition to his day to day work

Leave A Comment

Time limit is exhausted. Please reload the CAPTCHA.