Change Grafana login background

Guys,

I tried changing the background by changing the image it self on the server. Unfortunately that didn’t work.

what do you suggest?

Hello osam!

Here are couple relevant threads at community site:

I hope it helps!

Ivana

Hello Ivana,

Thank you for your reply.

I actually been reading these topics before asking but unfortunately they did not work for me. :joy:

Osama

Hello Osam, I tried the same but it dint work . So the best part is to keep your url on cloud and make it public and then use that public url and keep it here on Grafana to fetch the image directly from ur public url.

Thinking how to do that ! Here is my complete blog to customize everything in login screen, please check in my blog what you want I hope it will answer you everything

Customizing complete login screen step by step

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 !

1 Like

Hello Mohit,
I want to change the background of the grafana. I followed the steps given by you but the background is not changed. I’m using grafana version 7.3.5. Could you please tell me an other way to change the background.

Thank You

How to remove forgot password from login page?

Hi,
I have followed some of your steps, thanks!
I run Grafana on Ubuntu and let apt handle package upgrades. I have noticed that all the changes you propose are lost every time I upgrade Grafana.
Is there a way to preserve changes across upgrades other than a script that restores backed up files?

Thanks!