Edit: This does not work cross domain unless the appropriate CORS header is set.
There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:
The style of the page embedded in the iframe must be either set by including it in the child page:
Or it can be loaded from the parent page with Javascript:
var cssLink = document.createElement(“link”);
cssLink.href = “style.css”;
cssLink.rel = “stylesheet”;
cssLink.type = “text/css”;
frames[‘iframe1’].document.head.appendChild(cssLink);
I met this issue with Google Calendar. I wanted to style it on a darker background and change font.
Luckily, the URL from the embed code had no restriction on direct access, so by using PHP function file_get_contents it is possible to get the
entire content from the page. Instead of calling the Google URL, it is possible to call a php file located on your server, ex. google.php, which will contain the original content with modifications:
$content = file_get_contents(‘https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal’);
Adding the path to your stylesheet:
$content = str_replace(‘‘,’‘, $content);
(This will place your stylesheet last just before the head end tag.)
Specify the base url form the original url in case css and js are called relatively:
$content = str_replace(‘‘,’
The final google.php file should look like this:
‘,’
$content = str_replace(‘‘,’‘, $content);
echo $content;
Then you change the iframe embed code to:
Good luck!