Change default background color of < embed > ?

TheNetTweets

Hello! I'm using the < embed > feature on a site that has a dark background. I modified my vanilla forums theme so that that the background would black like the site it's being embedded on but there's a problem: For a split second before all the text and buttons and stuff from vanilla forums appear, the area which it's being embedded in flashes white, as if the < embed > had a white background that doesn't get overwritten until the vanilla stuff loads. Help and ideas?

P.S. if you want to see the example on the site I'm testing it on, I can message you the link.

peregrine

see the discussion flashing white - probably same issue

TheNetTweets

@peregrine said:
see the discussion flashing white - probably same issue

I enabled the plugin Minify and the issue disappeared. Thanks for setting me on the right track!

TheNetTweets

@peregrine hmm maybe not... Minify worked for the home page, but it's not working for any others. Any ideas?

peregrine

I would avoid minify like the plague.

TheNetTweets

@peregrine said:
I would avoid minify like the plague.

What should I do then?

peregrine

I don't know

change your background and theme to white instead of a dark one:) if you get white flashes.

http://vanillaforums.org/discussion/25373/performance-white-flash-when-clicking-links

TheNetTweets

@peregrine said:
I don't know

chang your backround and theme to white if you get white flashes.

http://vanillaforums.org/discussion/25373/performance-white-flash-when-clicking-links

Already there... and no! I like my background

There's no way to make the default background (for < embed > or < iframe > or however vanillaforums embeds the page) black?

hgtonight

Set the background color of the embed of the iframe through your other softwares css file.

TheNetTweets

@hgtonight said:
Set the background color of the embed of the iframe through your other softwares css file.

I don't quite think I understand you... Could you repeat that again in noobspeak?

I'm using drupal as my CMS incase that helps.

vrijvlinder

@TheNetTweets

You can try using the controllsize plugin and add background color as an attribute in the plugin's css file.

the background color of an iframe will only affect the container while the content loads, but the background of the content (the html doc) will be the color of whatever the default is of your browser.

iframe{
background:none #000;
}

The code above you need to ad it to the theme css of your drupal theme or where ever you are embedding. That is the container of the forum and what your want to change back ground while the forum loads. But the flash of white just before it loads, is the color of the about:blank initial html document page. That can only be changed if your browser has those settings.

TheNetTweets

I tried what @vrijvlinder said but either I did it wrong, or it didn't work. I found this little fix: http://css-tricks.com/snippets/html/get-rid-of-white-flash-when-iframe-loads/ and while it seems to be discouraged, I'd still like to try it. However I'm not sure how I would add it to vanillaforums. Help?

vrijvlinder

You need to cover all the aspects of the iframe for this to work. There are several options.

1.add to the iframe for the forum to be embedded allowtransparecy="true" as the article you posted explains and some of the comments too.

For this you will need to edit the the embed code or the remote.js.
If you want to use the iframe instead of the script, then you need to extract it from the script. Copy the script and paste it in the box.

http://www.webtoolhub.com/tn561363-javascript-extractor.aspx

Once you have the iframe you add allowtransparency true to it. You can also add

style="background:none transparent;"

This will make the container (iframe) of the forum background transparent. You still have to match the background to where you are going to embed.

2.Change the style of the iframe in your website style sheet.

iframe{
background:none transparent!important;
}

3.Change the color of the html body of the document in your website style sheet.

html,body{
background:none #000!important;
}

the above code will change the color of all the html bodies as the load.

You can also use javascript jquery placed inside of your master. The problem is if they have js disabled then the thing will never load. So I dislike the js approach but you can try it

< script >
    $( document ).ready(function() {

//iframe flashes white bugfix with jquery
//set visibility to ‘hidden’ in the actual page
$(“iframe”).load(function() {
$(this).css(“visibility”, “visible”);
});
$(“iframe”).ready(function() {
$(this).css(“visibility”, “hidden”);
});
< /script >

Something is wrong with this editor and can't post code anymore...so remove the spaces i added between the < >.

It makes it harder to help people when the editor does not work. This is not good when code is all we need to post... ugh!

TheNetTweets

@vrijvlinder thanks!