Support Ukrain
Adaltas logoAdaltasAdaltas logoAdaltas
Change Ambari's topbar color

Change Ambari's topbar color



Jul 9, 2017

Big Data

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:

#top-nav .navbar.navbar-static-top .navbar-inner { 
  background-image: linear-gradient(to bottom, #aa0000, #ff0000) !important; 

and you’ll get this ugly but functional result:

ambari red bar

Can’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!

Canada - Morocco - France

International locations

10 rue de la Kasbah
2393 Rabbat

We are a team of Open Source enthusiasts doing consulting in Big Data, Cloud, DevOps, Data Engineering, Data Science…

We provide our customers with accurate insights on how to leverage technologies to convert their use cases to projects in production, how to reduce their costs and increase the time to market.

If you enjoy reading our publications and have an interest in what we do, contact us and we will be thrilled to cooperate with you.