Inserting custom css through an iframe that captures my Vanilla forum - help please?
Gerhard
New
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:<script type="text/javascript"> jQuery(function($) { var $head = $('#frame1 head'); var url = "/wp-content/themes/layerswp/iframe.css"; $head.append('<link rel="stylesheet" type="text/css" href="' + url + '" />'); }); alert("Alert\$head function us running"); </script>
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 
Comments
I have also just tried:
<script type="text/javascript"> jQuery(document).ready(function($) { var $head = $('#frame1 head'); var url = "/wp-content/themes/layerswp/iframe.css"; $head.append('<link rel="stylesheet" type="text/css" href="' + url + '" />'); }); alert("Alert\$head function us running"); </script>If maybe the function appeared before the iframe loaded, but still not working.
I answer you original thread. it better not to throw the baby out with the bathwater. However I would use a different loading script.
The way the pluign works is it already knows it is embed though url parameter (also there are ways of detecting being in a iframe but that shouldn't be necessary), so it would be better to load this css from the embeded content not externally, it would be smother and simpler overall.
grep is your friend.
Thanks for the reply!
I'm going to try go with the iframe/no-plugin solution for now. just because I have no real idea of how to edit the plugin, and the iframe solution is so close to working I think.
I took your advice and changed the script to:
<script type="text/javascript"> jQuery(this).delay(7000).queue(function($) { alert("Alert\$head function us running"); var $head = $("#frame1").contents().find("head"); var url = "/wp-content/themes/layerswp/iframe.css"; $head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } )); }); </script>But now I'm getting the error "Uncaught TypeError: Cannot read property 'contents' of undefined" and I have no idea why
I'll keep looking for a solution, but any advice or insights are very welcome
that is a rather hacky solution anyway. Not elegant.
The thing is you don't understand the embed code int he pluign then you won't know what you are missing. that solution is more than just an iframe.
you need some knowledge of jquery/javascript.
grep is your friend.
follow my advice, insert the style from within the embedded content not externally. There are a number of ways this can be achieved so that there is knowledge of being embedded.
grep is your friend.
where are you defining the iframe?
grep is your friend.
The iframe is defined as #frame1 at the bottom of the Wordpress Content html, so directly below the text for my post, in the same editor. Is that what you meant?
The thing with this is, I want the embedded comments to not show the sidebar, top menu, etc., but I still want these to be visible when they visit the same thread within the forum.
So the CSS to remove the sidebar, top menu, etc. must only apply when it's inside the iframe. That's why I'm currently not just changing the css in custom.css within the theme.
I agree with you, the thing is I cannot get the plugin to work. Namely, the height of the comments is not correct. I can set the height of the iframe that contains it manually with WordPress CSS, but then the iframe is always too long or too short. If there is a solution to this (where the height is automatically inputted), I would love that instead - I asked about it here - it's just that I didn't get any leads to fixing it, and going through embed.js I couldn't find any solution - and the only solutions I know with jQuery won't work as pointed out there - so I'm at a loss for a solution with the plugin.
you should be able to auto height the iframe. the way you are goign is harder becuase there are a lot of details you are missing. there is a lot more than just putting it in an iframe.
Aslo there is a technique to fetch the embed pages. you don't need to add additional style sheet
the basic technique for resizing is
$('#iframeElem').height( $('#iframeElem').contents().outerHeight() );you can pit thsi on onload, but you may need to capture resize event.btw are these are the same domain? that is relevant.
grep is your friend.
Height auto does not work for Iframe or object. You must use min height or max height.
You can't add any code to the Iframe of the embedded forum because it's a source document . You either must add it to the vanilla theme template, or through a plugin.
It would be easier if you did not embed the forum. Just style it to look like your main site and put a link to it in the menu of your main site, and one on the forum menu that takes you back to the main site.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌
Thanks for your help vri, I appreciate your time.
Yeah that's unlucky there isn't a nice easy embed option - but I actually managed a pretty solid hack (without appending css though).
It's definitely not textbook and it's very crude, but it works.
I'll keep an eye out on the embed plugin in case a solution becomed available. I'd highly support a new, improved version at some stage
Heres a link to my solution - the iframe is at the bottom. If anyone has this problem in the future, they could check out the html there (Ill probably make a few adjustments in the future to further improve it)
https://www.treeofgnosis.com/faq/
It does not work on mobile , check if it works on other browsers.
❌ ✊ ♥. ¸. ••. ¸♥¸. ••. ¸♥ ✊ ❌