How to add CSS to Grafana

I have been trying to add CSS to my CSS that looks like something like this currently:

And the output i’m trying to get is following:

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 to modify it and ending up to have something like this:

SELECT *
FROM crosstab(
$$SELECT
  ((row_number() over (order by added_date desc) + 4) / 5)::int as modulo,
  ((row_number() over (order by added_date desc) + 4) % 5)::int as category,
  
  '<div class="product"><div class="product-image"><a href="' || link || '" target="_blank"><img style="background-image:url('|| COALESCE(image, 'public/img/as/no-image.png') ||');" /></a></div><div class="product-description"><h1>'|| case when name = 'Untitled' then substring(trim(both '/' from link), '[^/]*$') else name end ||'</h1><div class="brand-wrapper"><span class="brand">(' || INITCAP(store) || ')' || '</span><span class="id">ID ' || id || '</span></div></div>'
  '<a href="javascript:launch(''https://testing.com'',''popup'',''no-refresh'')"><img src="public/img/as/' || case when visible = 'no' then 'restore2.png' else 'trash.png' end || '" height=15" /></a>' || '</div>' as  Item  

  FROM store_items
  where 1=1
  and initcap(store) in ($stores)
  and name in ($products)
  and (lower(store) like lower('%$search%') or lower(name) like lower('%$search%') or id::varchar(255) like lower('%$search%') or lower(link) like lower('%$search%'))
  and visible in ('$visible')

ORDER BY 1, 2$$
   ) AS ct ("Section" int, "1" text, "2" text, "3" text, "4" text, "5" text)

as you can see I do have a CSS file ready that would make it pretty but my problem is that I do not know how I am able to import and use the needed CSS values to make my Grafana more pretty again

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:

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 feels abit too much to do it internal CSS and I dont know if Boom plugin would help me to solve my problem to add external CSS inside a panel?

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.

.product {
your css here
}
.product-image {
your css here
}

1 Like

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?

I suggest you go and try it.

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