How To Customize Login Screen for Grafana

Hello,

I am a rather new developer and I am struggling to see how to customize the login title and logo. I saw here that I would need to fork, edit, and build with the changes. Where do these changes need to be made and what languages must I know to do so?

You would need to know some HTML, CSS and maybe some JavaScript/TypeScript and a bit of AngularJS. You will also need to know some Git to keep your fork up to date with new changes and be handle to any merge conflicts if new changes conflict with your changes.

The instructions for building Grafana are here: http://docs.grafana.org/project/building_from_source/

The frontend files are located in the public subdirectory and when you run the Grunt build script, the CSS and Javascript files are generated in the public_gen directory. So do not make your changes in the public_gen directory as they will get overwritten.

1 Like

Thank you so much @daniellee I will look into that.

Hi Danielle,

i dont find public_gen directory anymore. whats the process of customising frontend ? i m using latest source code 5.3.0…

To everyone seeking answers , here is my blog on the same !
Gathered information from multiple sources and here you go

IMPORTANT POINT:

β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” Location /usr/share/grafana/public/img contains all the images including our {Favicon , grafana logo , background image,grafana-logo-wordmark} by the names {fav32.png , grafana_icon.svg , heatmap_bg_test.svg,grafana_typelogo.svg } respectively. You can directly drop your own images here and make the login page look yours. But I got a no. of complaints from the users that the changes took place properly in their localhost /server but when a remote user tried to access the same Grafana page, they can’t see these changes happening. So to avoid these bugs follow me in this blog . β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€” β€”

HERE WE GO STEP BY STEP :

  1. First save all your images (Favicon , grafana logo , background image, Logo wordmark ) at a remote location in the cloud , in my case I am saving it on AWS S3 and being public ally accessible .
  2. Once I saved it on AWS S3 , all my images will generate a unique url to access it anywhere on the internet , please keep all those urls handy .
  3. Changing Favicon and Title :

Go to /usr/share/grafana/public/views/index.html and search for and for favicon

Change title by replacing [[.AppTitle]] and Paste your Favicon public url , in my case its aws s3 public url which I pasted here in place of [[.Favicon]] and after the change it looks like

Replaced Title by our company name and replcaed favicon by our favicon public url, In our case its aws s3 public url

So by now our Favicon and Title is successfully changed.

  1. Changing Grafana-Logo and Background image :

Go to /usr/share/grafana/public/build/ and search for the file app.****.js

ls|grep app.****.js

and then search for the keyword β€œheatmap_bg_test.svg” and β€œgrafana_icon.svg” in this file, whatever places you find this keyword in the file replace the complete β€œsrc” & β€œurl” with your own β€œpublic url” of your background image and the grafana_icon. The file looks quite messy if you open it with vim editor !

grafana_icon.svg might be at several places in this file , dont forget to replace your url at every place

  1. Changing Grafana-Logo-Wordmark :

Go to /usr/share/grafana/public/build/ and search for the file grafana.dark.****.css

ls|grep grafana.dark.****.css

and then search for the keyword β€œgrafana_typelogo.svg” and replace the complete url by your own aws s3 logo word mark url ! Then restart your docker /server and kaboom ! The customized results looks awesome!

Grafana login screen looks like ours ! Favicon , title , logos , background everything changes and customized just like the way we want !

BONUS CUSTOMIZATION :

If you want to change the title in every screen , after you login to Grafana as well. Then go to /usr/share/grafana/public/build/DashboardPage.****.js and search for the keyword β€œdocument.title” and then change it like this document.title=r.title+” β€” ”.

Hope you liked this blog ! Follow me on this Grafana series to explore more about the service and if you are unaware about my last two blogs in this series then here are the links ! FYI , the next blog in the series will be on β€œAuthProxy” so stay tuned for that and many more awesome blogs !