Setting to make row transparent not working after update to V11.1.0

Grafana Configuration
1

I am using the plugin “Boom Theme” to have nice background pictures in Grafana. One feature of the plugin is to customize the look and feel of rows as well.

  • What Grafana version and what operating system are you using?
    V11.1.0

  • What are you trying to achieve?
    make row transparent with plugin: “Boom Theme”

    image
    image1388×477 92.6 KB

  • How are you trying to achieve it?
    I added code:
    image

to a theme, which made the row transparent prior to V11.1.0

  • What happened?
    row is not transparent anymore

    image
    image1120×349 72.8 KB

  • What did you expect to happen?
    row should be transparent

  • Can you copy/paste the configuration(s) that you are having problems with?

  • Did you receive any errors in the Grafana UI or in related logs? If so, please tell us exactly what they were.
    no

  • Did you follow any online instructions? If so, what is the URL?

2

That’s a hacking of third party (Grafana) css code. Grafana will may change class name and what was working before won’t be working, anymore.
Is it worth it to have this hassle every Grafana upgrade eventually?

3

for sure not from a technical point of view (Grafana is working great), but from a user-friendly graphical aspect. Can I find the changes made to theses classes?
regards Peter

you agree that the rows at the bottom look ugly?

image
image1920×561 108 KB

4

This plugin is deprecated, so no changes are expected to make it compatible with Grafana V11.1.0 and later

Grafana Boom Theme Panel was created during early Grafana days to workaround theme support for Grafana dashboards. Given that Grafana have native themes now, It is time to deprecate the plugin.

5

I would recommend to learn how to use inspect in the browser to find used class names: How to use Inspect Element in Chrome, Safari, and Firefox | Zapier
You may need it after every upgrade.

1 Like
6

perfect hint - thanks a lot - I found a document and ran a short test with the Grafana Text Visualization and added below code:

<style type="text/css">
  .dashboard-row--collapsed{
    background-color: rgba(0,0,0,0);
}
    /* You can also use more advanced CSS for background patterns etc. */
  }
</style>

works perfect, but not for version 11.1.0 !!!
I guess the internal CSS has changed, maybe the naming of the “.dashboard-row–collapsed”
Anyone that can point me to a document?

7

i doubt suxh level of details about css are documented

the source code css is the documentation. so git clone grafana and look into the css-s used