views:

128

answers:

1

I'd like to embed a few Google Calendars for my client's web site. The "Google Embeddable Calendar Helper" provides very few customization options. Updating the hex code for the background color in the generated source only works if you pick one of the ~70 standard Google Calendar bg colors. (I can tweak the "border" selector because at least it's in an actual statement.)

A "view-source" on the rendered page shows a CSS file loaded from the iframe, but I obviously can't change anything in there. And I assume I can't force an override of selectors with my own CSS file because I have no way of "injecting" it into the iframe.

Does anyone know of a (non-API) way of tweaking the colors, fonts, and other CSS thingies in an embedded Google Calendar?

Thanks in advance...

+2  A: 

You just can't modify the iframe because of same origin policy; browsers have tightened the security on Cross frame Dom scripting due to possible hacks.
Look at this example.

systempuntoout
As I said, I already know I can't inject anything into the iframe. I guess I was hoping there's some way to apply styles and/or override selector values. I understand the security risk associated with allowing changes to a "remote DOM tree", but I wonder if there's a way (Javascript?) to walk the tree, copy it locally, make some alterations, then re-render it. Thoughts?
I'm not aware of any effective workarounds.
systempuntoout