Change Ambari's topbar color

Change Ambari's topbar color

By César BEREZOWSKI

Jul 9, 2017

Categories: Big Data, Hack | Tags: Ambari, Front-end

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
Canada

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.