How to Hijack Power BI Styles to Apply Your Own

In a previous entry we saw how to use Cascading Style Sheets with Power BI’s HTML Content visual do apply dynamic visual effects outside what’s commonly expected within the platform. Why isn’t Microsoft giving us direct control over the stylesheets applied to a report? Your guess is as good as mine, but I believe they’ve made the deliberate choice to make Power BI Desktop look and feel more like an Office app and less like a development or design tool. I’m personally not convinced self-service BI authoring will ever catch up nearly to the same extent as ubiquitous spreadsheets, but I can see why they’re pursuing this goal.

What if I told you could still apply your own CSS to reports rendered in the Power BI service?

1. Restyle app.powerbi.com – Or Any Website Really – with Amino

Control over look-and-feel details in Power BI is not only limited but also inconsistent among the first-party visuals shipped by default with Power BI Desktop. It only gets worse once you start adding custom visuals.

Case in point, in some cases you have control over background transparency, in other cases you don’t, like with the Decomposition Tree’s header.

A blatant case of transparentophobia
This Is the Header You’re Looking For (jedi hand wave)

But with a third-party tool, a bit of elbow mouse grease, and a fearless pursuit of harmless hacks that are more fun than useful, you can still force this header to be semi-transparent. Here’s a quick walkthrough to get up and running:

  • Install Amino‘s Chrome extension.
  • Go to your favorite Power BI report in the service.
  • Load your browser’s developer tools (Ctrl-Shift-I)
  • Use the inspect feature (Ctrl+Shift+C) and mouse over the elements in your report to find out how they’re named.
  • Select the element of your choosing and apply your own CSS to it.
  • Profit???
Select an element to inspect it, then style it

Here we are, with a translucid decomposition tree, including its header. Obviously the stubbornly opaque header is just an example of something you might want to restyle to your liking. In particular, look into pseudo classes and pseudo elements to do things such as adding effets on hover.

2. Limitations & Considerations

Let’s be real, again this is a hack for a bunch of reasons:

  • You need to be able to run the Amino Chrome extension, limiting you to that browser and its derivatives such as Edge Chromium. This excludes the Power BI mobile app, other browsers, and buttoned-up corporate environments that prevent you from installing browser extensions. Alternatively you can install the Progressive Web App (PWA) version, but most of the aforementioned restrictions continue to apply.
  • You need to know enough HTML/CSS to identify the right item within the page then style it. It’s not rocket surgery but like everything there’s a learning curve.
  • Your users need to run Amino.
  • If/when Microsoft changes the structure of its reports’ Document Object Model, you’re likely to have to rewrite your CSS hacks.

All considered, is this something I’m going to recommend to my consulting clients? In most instances, no, this is too cutting edge for most users, for too little benefit. But it’s an approach worth keeping in the back of your pocket when you cannot otherwise meet a very specific requirement without taking over the default CSS.

Leave a Reply

Your email address will not be published. Required fields are marked *