Is it possible to inject a custom CSS to change Metabase's UI?

1

Hi,

I’m trying to customize the colors and fonts of a dashboard, so it fits the website it’ll be embedded in. Is it possible? I can always inject a CSS to the iframe, but I’m curious if there’s a better/easier way to do it.

Best,
Vitor.

3 Likes
2

Yes, you just have to pay for a license: https://metabase.com/enterprise/pricing.html

:astonished:

3

Yes, I did it using a custom Python proxy, It was done for testing purposes only, It could be a great idea from Metabase team to allow adding ways to customize the dashboards UI, e.g. Allowing adding html classes and IDs and attaching css as part of a dashboard.

4

I’m going to give an official response to this since it’s a long standing request:

  1. you can’t inject custom css to Metabase, no matter the licence
  2. the Pro/Enterprise license allows you to change, on static or interactive embedding SOME aesthetics to try to make it resemble to your application
  3. the Pro/Enterprise license also allows you to use the SDK to embed Metabase which gives you almost full control on the customization of the components
  4. although injection of CSS via 3rd party components might solve a short term problem, we tested this and it makes your life miserable on the medium-long term due to the changes of the css property names and more
5

Ah, but it isn't just any paid license that gets to customize the looks of a dashboard - that is reserved for Pro and Enterprise users.

I find it quite frustrating that users that pay for a Starter license are not allowed customization of fonts/colors in a dashboard within the Metabase application. I understand why every other feature in the Pro/Enterprise license is behind a higher pay wall, but I do not understand why the basics - such as custom colors/fonts - are not included for all the paid plans.

My organization is a small nonprofit that pays attention to detail. Even though our data team creates beautiful and insightful dashboards, our internal teams often ask us to "just give them the data" so they can recreate the visuals in Canva because they wish to share externally in org-branded colors.

I know organizations like mine are not exactly Metabase's target audience but making those things accessible to all paid tiers could go a long way with this niche.

6

There was an error on my previous comment that I just corrected. “Paid” was replaced by “Pro/Enterprise”