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”

7

Hi @Luiggi, when you say " 1. you can’t inject custom css to Metabase, no matter the licence" do you mean it is not legal to do it?
I was able to inject CSS and JS using proxies, via PHP and Python, and even using Nginx configuration. Could you give me more info about this.
Regarding of you mention " 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". I agreee, Injection of CSS and JS are pain in the back, and aberrant solution, but it looks like the only option to solve things are not packaged in any licence.

8

I might have expressed myself incorrectly: it's not illegal, my answer was geared towards the fact that there's no out of the box feature to do that.

About your question around how to do that: I would buy a Pro license of Metabase, fork the code (since a custom fork with changes to the UI are supported with a paid license) and make the changes, this ensures that you're able to do those changes in the code rather than outside of it, and also have support over those changes.

9

Thanks a lot!