I just want change login page.
for example I just want replace background image from default image to my house image.
Is there a way to easy?
my version is v6.01.
I there is no setting for this
I finally learned how to change the image on the login page by changing the grafana_icon.svg.
But I do not know how to make the icon look bigger.
is it possible ?
Thanks & Regards,
jingyu
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 :
- 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 .
- 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 .
- 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.
- 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
- 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 !
Any solutions for this version ?
- v8.1.2 (103f8fa094)
I just managed to change the favicon.
For Grafana v8 I’ve been able to change the favicon, title, logo, logo-wordmark (“Welcome to Grafana” message in v8) and footer. I’m reusing the image provided by @mohit3 as a visual aid. The image is of an older Grafana version (v6), but it’s similar enough to the current version.
To change the favicon:
- Go to /usr/share/grafana/public/img/
- Name the .png you want to be your favicon “fav32.png” and effectively replace Grafana’s fav32.png in the directory
To change the title:
- Go to /usr/share/grafana/public/views/
- Open index.html with an editor
- Replace
<title>[[.AppTitle]]</title>with<title>YOUR_TITLE</title>
To change the logo:
- Go to /usr/share/grafana/public/img/
- Name the .svg you want to be your logo “grafana_icon.svg” and effectively replace Grafana’s grafana_icon.svg in the directory
To change the logo-wordmark (“Welcome to Grafana”):
- Go to /usr/share/grafana/public/build/
- Open 8966.***.js with an editor (Might be a different .js file in your case. I’m guessing it will be the .js file with the largest number starting with 8)
- Search for “Welcome to Grafana” to find the line of code to edit
- Replace the parts marked in bold o(l,“AppTitle”,“Grafana”),o(l,“LoginTitle”,“Welcome to Grafana”) with o(l,“AppTitle”,“YOUR_TITLE”),o(l,“LoginTitle”,“Welcome to YOUR_COMPANY_NAME”)
To change/ hide the footer:
- Go to /usr/share/grafana/public/build/
- Open 8966.***.js with an editor (Might be a different .js file in your case. I’m guessing it will be the .js file with the largest number starting with 8)
- Search for “Community” to find the line of code to edit
- Replace or comment out the parts I’ve marked in bold:
let o=()=>[{text:"Documentation",icon:"document-info",url:"https://grafana.com/docs/grafana/latest/?utm_source=grafana_footer",target:"_blank"},{text:"Support",icon:"question-circle",url:"https://grafana.com/products/enterprise/?utm_source=grafana_footer",target:"_blank"},{text:"Community",icon:"comments-alt",url:"https://community.grafana.com/?utm_source=grafana_footer",target:"_blank"}],l=()=>{const{buildInfo:e,licenseInfo:t}=n.ZP,s=,a=t.stateInfo?(${t.stateInfo}):“”;return s.push({text:${e.edition}${a},url:t.licenseUrl}),e.hideVersion||(s.push({text:v${e.version} (${e.commit})}),e.hasUpdate&&s.push({text:"New version available!",icon:"download-alt",url:"https://grafana.com/grafana/download?utm_source=grafana_footer",target:"_blank"})),s};
5 Likes
I removed the image fav32.png , and i no longer see the favison in my browser.
With respect to changing the title , as you had mentioned i had changed my title to something else and when i login i can see that the new title is shown up but this happens only for a few seconds and after a while it changes back to showing up as: “Grafana”
Then i went on to changing the logo-wordmark. The .js file that you have mentioned , i dont see any string “Welcome” in it.
Let me know if i am missing anything here.
I am using grafana OSS version 8.4.2
I just deployed grafana and wanted to do a proof of concept with my peers to adopt grafana henceforth. Appreciate any help in this regard.
Thanks
Jatin
Hello, @jatindavey . How are you?
I´m facing some problems on customizing my OSS Grafana 8.4.2 too. One of them is the Title, the behaviour was the same as described.
Here are some tips:
- to discover what´s the name of the file and the path of the image/icon/background, you can use the inspect tool of your browser (F12);
- to change some name of the desired image, you can do it manually on Ubuntu using the command line, but I recommend to do a SSH connection to the VM using the Visual Code Studio and there you can find all the places that you have to replace the image name;
- I´ve realized that the Chrome/Edge browsers don´t accept some *.svg images, so I´ve changed to *.jpg and it worked.
The tutorial of @mohit3 is very usefull but I think that´s time for updating because some paths changed since the v6.
Best regards!
Thank you very much @dtorobay
Your direction did the trick. I inspected the calls being made when we access the login page and figured out the .js files to modify and everything i was looking for worked the way i wanted.
On another node , is there a way to remove the help link that is available after we login to Grafana. Appreciate any pointers in this regard.
Thanks
Jatin
Hi, @jatindavey . I´m into this problem to seek for solutions. Besides the footer on the login page, I wanna remove the “Latest from the blog” and “Need help?” links.
I´ve searched quickly and I saw a module called “gettingStartedPanel” and I belive that if you hide this module, the “Need help?” will desapeard. I´ve attached the image with the paths that use this module.
ps: I´ve found a tip about the permission to edit on Visual Code.
Best regards,
Davi Torobay.
I found this tutorial. easy to change with this methode.
3 Likes
Have made changes in /usr/share/grafana/public/build/2352.d7c14cbd3dbda648a17f.js for login title of login page but whenever we restart container the changes are getting vanished…how to save the changes in particular js file when we restart the container? Have anyone solved this issue?
are these changes going to cause any conflicts with future upgrades or updates ? Do those files got overwritten when the software get updated ?