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.
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 . — — — — — — — — — — — — — — — — — — — — —
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 !