How to add CSS classes to an iFrame.

I am trying to over ride the default styles of an iFrame. Does anyone know how to add/inject custom CSS classes? I think it can be done using jQuery I just do not know how this is done. I have search the web high and low without finding anything.

Here is the link to the iFrame
http://ayurvedaseattle.com/dev/appointments/

Thanks,
Shaun.

  • Adam Czajczyk

    Hello Shaun,

    I hope you're well today and thank you for your question!

    An "iframe" element is like a "browser within a browser" and the point of it is to load the target page "as it". It's not allowed to style element within "iframe" directly from the "embedding" site and even if there'd be some jQuery code for this it should be blocked by most of modern browsers as "malicious".

    The only way to do it is if you do have access to the page that's fetched within an iframe. If the site is not "dynamic" (so it doesn't require interaction from user) you could though go in a bit different way and setup a sort of "proxy":

    - a simple PHP function (unless blocked in PHP configuration) would fetch the target site, e.g.

    <?php
    $thepage = file_get_contents('http://www.example.com/');
    echo $thepage;
    ?>

    - above could be wrapped in a shortcode so it would then output the code of the page directly to your site

    - you could easily style it then

    Alternatively, above code could work just as a "standalone site" on your server and this site would be embeded in an iframe. This would also let it style it as you would have access to it. This will however work for simple static pages only.

    Kind regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.