[Resolved] modify background for single embedded post

[Susan]

I am hoping you can point me in the right direction. I would like to embed several posts in my blog from Facebook pages (other than my own FB Page) that have supported my work. However, if I embed any of the Facebook code from the page, and place the embedded code in my blog post, the image comes through but the text is all shown in black. I tried using different sections of within a single post and change the background and/or the font color (i.e. for the one section), but this did not make a difference for the embedded part of FB post. I embedded the post on one of my other websites with a lighter background, and it embedded without issues – so it seems to be how I have set up the darker colors on my site. However, if I embed from my own FB page, it comes through perfectly on my WordPress site. Do you have any input of how I might fix this situation in this theme for just a single post where I would embed (as in this example)? Thanks in advance for any assistance!! Below is the FB embedded code (recommended default):

<iframe src=”https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FAARPWA%2Fposts%2F10160507512785160%3A0&width=500&#8243; width=”500″ height=”539″ style=”border:none;overflow:hidden” scrolling=”no” frameborder=”0″ allowTransparency=”true” allow=”encrypted-media”></iframe>

[Tom]

Hi there,

You could try this CSS on the dark background:

html#facebook {
    background: #fff;
}

Let me know 🙂

[Susan]

Thank you. I placed the above in appearance/customize/additional css – is that the correct location? And I cleared my cached. If so, it made no difference (text is still black, background is still black).

In my beginner’s attempt to try CSS, I tried:

html#facebook {
color: #fff;
}

But that didn’t work either. 🙂 Any thoughts? Thank you again.

[David]

Hi there,

you cannot manipulate the CSS of content within the iframe, unless the source of it is from the same domain, so edit your iframe code and add a class to it, so the first part reads like so:

<iframe class="myframe"

The rest of the code remains intact.

Then this CSS:

iframe.myframe {
    background: #fff;
}

[Susan]

You ROCK!!! That fixed it!! Thank you so much, and also for the explanation of why – very helpful and appreciated.

[David]

you’re welcome, glad we could be of help

[Author]

Posts