Inserting custom css through an iframe that captures my Vanilla forum - help please?
Hi everyone, so I'm trying to use a vanilla forum thread as my comment system for my Wordpress blog. I tried using the Vanilla plugin, but I can't get it work for reasons not important here.
But I have managed to find another solution, I only have one issue remaining - adding custom CSS to the iframe which captures the Vanilla thread. This solution is just manually adding a
iframe> element pointing to a corresponding thread, and then to remove the header, sidebar, etc. with CSS.
I have looked at many resources, but I just cannot find why appending of css into the iframe's head is not working. I was thinking maybe the error is related to Vanilla forums in some way, and I was hoping someone here could maybe help me.
So what I did was add an iframe into my html like so:
<iframe name="frame1" id="frame1" scrolling="auto" frameborder="no" onload="resizeIframe(this)" style="width:100%; height:1000px;" src="https://www.treeofgnosis.com/community/discussion/151/faq"></iframe>
Then right below, I attempt to append css to the head of the iframe's content like so:
The iframe shows up fine, the Alert shows up fine (so the script is running), and I get no errors in the Console log. When I look at the DOM, the does NOT insert into the iframe's content's head, but if I add it manually after the page load then the desired CSS does apply (which is removing the header, sidebar, etc.)
Here is a link to the page I'm working on, the iframe is right at the bottom of the screen: https://www.treeofgnosis.com/faq/
Any help would be appreciated, I have no idea why things aren't working. I have also tried some other code variations - but the situation remains pretty much the same. So really, I am really looking for WHY things aren't working. I have absolutely no idea atm. Is it maybe Vanilla related?? Like maybe there is a setting to disallow external CSS??
Thanks for any replies