I have been trying to add CSS to my CSS that looks like something like this currently: [image] And the output i’m trying to get is following: [image] I managed to get help from a good friend of mine with the following code: https://codepen.io/versaceLORD/pen/bGwjaNV however with Grafana I had t…

One way to do it without messing with Grafana config files is by using the Boom Theme Plugin to add custom CSS to a single dashboard. See my previous post here: [image] Change Grafana Theme Color Dashboards Firstly, you have not said what platform or what version of Grafa…

Hi Codlord! :slight_smile: I do believe that the Boom plugin is more supported for just the dashboard and not a panel itself if I read it correctly? basically the pictures I have above is from Dashbaord -> Panel where I edit the Panel through a HTML code and I would like to add CSS inside it but it…

Any CSS classes you add to the Dashboard via Boom Theme Plugin will be available to all panels within that dashboard. So you use the method to either alter existing Grafana or panel CSS classes or add new CSS classes and then reference those CSS classes within your panel/s.

Oh I see! I will try give it a go. Do you by any chances have an example how I can use a css value from my css into the Grafana “html” code I have posted at the very top? Basically an example how I can import from Boom plugin my external CSS to my Panel code?

You have to add a Boom Theme panel somewhere to your dashboard which is sort of hidden (it’s just a black top bar) then edit that panel - choose your theme or add a custom theme and then click the Add Custom CSS button and then cut paste any CSS into the Custom Style / CSS Override section. e.g. .…

It sounds almost too good to be true! But will it automatically understand that the CSS is “connected” to <div class="product-image> or do I need to add something in the HTML to be able to connect it togeter with the imported CSS through Bolm plugin?

Will do so! thank you very much! Will come back with update!

If I am using the Boom theme my other panels know the classes I defined in the CSS, but only the Grafana Default Panels. I am using the HTML Panl Plugin and for me the class selectors are not working with this. Did anyone encounter the same problem or has a solution for it?

Yet today I do not have any solution for newer Grafana than 6 :frowning:

How to add CSS to Grafana

codlord January 9, 2021, 11:55am 2

One way to do it without messing with Grafana config files is by using the Boom Theme Plugin to add custom CSS to a single dashboard. See my previous post here:

Topic		Replies	Views
Custom Themes / Styles - The Final Frontier? Dashboards theme	2	15088	March 1, 2024
How to use a customized theme Dashboards	0	2590	February 6, 2024
Can we change our plugin css, on change of grafana theme?	1	652	February 22, 2021
Edit css panel code	1	6802	December 1, 2020
Looking for an Alternative to Boom Theme Panel in Grafana 11.6 Grafana plugins	2	630	May 21, 2025

How to add CSS to Grafana

Related topics