Guys,
I tried changing the background by changing the image it self on the server. Unfortunately that didn’t work.
what do you suggest?
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.
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 . — — — — — — — — — — — — — — — — — — — — —
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.
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
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 !
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!