Inject stylesheet into Looker IFrame

done
low_priority
dashboards
reply

(Terry Smith) #1

We greatly need to style embedded Looker content in our application, and I’m trying to use jQuery to inject a stylesheet into the IFrame.

Our looker server and our application server are on the same base domain name:
https://looker.our-company.com
https://our-app.our-company.com

Considering the issues with cross-site security, is it still not possible to dynamically inject the CSS into the iFrame like this?

$(document.getElementById('lookerIFrame').contentWindow.document).ready(function () 
{
	$('lookerIFrame').contents().find('head').append('<link rel="stylesheet" href="https://our-app.our-company.com/ ... /looker.min.csss" type="text/css" />');
});

Note that we have https://*.our-company.com in the embed domain whitelist.

If this is not possible, is there another way?

Thanks,
Terry


(Izzy) #2

Direct quote from Looker’s internal stylesheet:
tenor-6

You’re right that it’s not possible to dynamically inject CSS into our iFrame. For security reasons, I think it’s really hard/impossible to set it up in a way that both keeps things safe & gives customization access.

Have you checked out our new Embed Themes?


You can do a pretty solid amount of customization right there in the product, with no Javascript hackery. That’s my #1 recommendation!

If those don’t give you the customization you need and you’re committed to doing some really wide-sweeping stuff, you could set up a proxy in front of your Looker that would do the injection. It’s not supported, but I know that customers have done it in the past (cc @alerch the wise).

Basically, if you set up an nginx proxy that takes /embed url paths and uses sub_filter to inject the customizations into the <head>, I bet you could get something going. If you do have questions about that, I can try and help answer— But, definitely see if Embed Themes get you what you need. They’re supported, simple, and sleek :slight_smile:


(Terry Smith) #3

Thanks for your reply, but that’s very disappointing.

The custom themes as they exist today customize very little. You can’t even change the extremely tiny 11px font size for data tables. Also, if you allow people to change the font then you have to allow the font size to be customized as well. The perceptual size of fonts of the same pixel size is not necessarily the same due to x-height and cap height variances.

Please consider adding a CSS box to themes soon.

Thanks,
Terry


(Izzy) #4

Thanks for the feedback, Terry. Themes are still in beta so now is the best time to let us know what you’d like to see and make a difference! The best way to get that tracked would be to open a new topic in the Feature Requests section so that others can vote on it & contribute their stories/context.

Since you’re interested in doing customizations that the themes don’t offer, it might be worth a shot to try setting up that proxy to inject your custom css. Let me know if you run into any questions along the way.


(Fabio) #5

Within individual visualization tiles, you can directly control CSS by using custom visualizations. You could take one of our table examples and just add some styles to it, or even some user-selectable options to control those styles.

(And of course, on a field-by-field basis, you can do some styling using the html parameter in your fields in LookML)


(Alexandru Batrinu) #6

How would one go about replacing the looker logo with a custom one?


(Izzy) #7

If you want to replace your logo with a custom one, you’ll need to reach out to your Looker account team to chat about turning on that customization.