Inject CSS to Grafana dashboards (sadly doesn't work with single panels)

Configuration Frontend
1

Hi,

I haven’t found this hack in the forums so far, so I hope it’s worth to share. :wink:

after setting some environment variables in the Grafana addon, you’re able to embed Grafana dashboards as iframe into HA dashboards and use a more or less hidden text panel in HTML mode to inject CSS styles to the Grafana UI.

Here’s a sample screenshot where I changed the background color of the Grafana UI and the charts to match my HA theme (normally it’s a pure black).
But you can go wild and do a lot more if you want.

1
11580×1354 379 KB

In the Grafana addon config under env_vars I added the following:

- name: GF_AUTH_ANONYMOUS_ENABLED
  value: "true"
- name: GF_AUTH_ANONYMOUS_ORG_NAME
  value: Main Org.
- name: GF_AUTH_ANONYMOUS_ORG_ROLE
  value: Viewer
- name: GF_SECURITY_ALLOW_EMBEDDING
  value: "true"
- name: GF_PANELS_DISABLE_SANITIZE_HTML
  value: "true"

After that I added a a text panel at the top of each dashboard I want to embed (Panels are lazy-loaded. If you place it at the bottom, the custom CSS won’t be applied until to scroll all the way down to the bottom of the page).

Switch the text mode to HTML and enter whatever you wanna change (use Chrome dev tools to find the correct class names or what else is needed):

<style type="text/css">
  body {
    background-color: #2e2b38; 
  }

  div[class^="css-"][class$="-page-wrapper"] > div[class^="css-"] > div[class^="css-"]:first-child {
    background-color: #2e2b38;
  }

  section[class^="css-"][class$="-panel-container"] {
    background-color: #32303f;
  }
</style>

You can then resize the text panel to the minimal size and select the option to hide the background.
After that it will only appear like a little empty spacing at the top of the dashboard.
Maybe even this can be removed with some negative top-margin on the iframe using card-mod.

Will try to keep this post updated with more CSS examples in the future.

Some more info about embedding as iFrame:
I exposed port 3000 in the settings of the Grafana addon to be able to access it using http://<address-of-ha>:3000

After that open it using this address, visit a dashboard and click on the share button on the top-right.
Select if you want a fixed timerange or the relative one of the original dashbard, then copy the link.
In the iframe card add &kioskat the end of the URL to hide side- and top-bar.
You can also add &_dash.hideTimePicker=true behind that to hide the date-picker.

1 Like