Search code examples
jquerycssiframeembedgcal

Modifying gcal embed CSS with Jquery?

So I've got an issue with google calendar embedding. I hate the white border and I'm trying to get rid of it but I can't modify the css inside the iframe. I'm wondering if there's a way to do it with jquery? Maybe using .ready() or something? I've tried selecting the child of the iFrame with jquery but it doesn't work.

The part I need is in inline css on the body tag in the iframe, like this:

<iframe>
    <html>
         <body style="background-color:#FFF">

Any ideas?

enter image description here

Solution

  • You can't (see same origin policy, the same goes with the Facebook widgets, btw).

    That said, you should have some control over the colors in the tool to generate the embed code, as well as the embed code itself. Other than that, though, you can't change anything else. I share your pain, though, and wish we could customize the gcal stuff more.