lyt
July 14, 2022, 9:48pm
1
I recently embedded some visualizations into a forum (powered by discourse) post and they look unfortunately terrible in dark mode because the iframes have transparent backgrounds.
So I tried to change the background color of the iframes. I found how and tested it on hackmd; it worked well. But when I submit it on the discourse forum, it doesn’t work! Dark mode prevails.
Here is the structure of code I am using:
<iframe width="100%" height="300" style="background-color: #FFFFFF" src="https://dune.com/embeds/1002945/1734962/fe28df65-99a3-4b98-8cb4-e97f132c8165" frameborder="0"></iframe>
1 Like
SaraDev
(Sara Devlaeminck)
July 14, 2022, 11:03pm
2
You’ll likely need to use custom CSS to set a custom background color for your iframe, as styles/classes are stripped out of all posts on Discourse by default.
Is it possible to give a <div> inside a post some custom styling?
I’ve seen that any non-whitelisted classes are stripped out, and I’ve tried addingstyle= to my divs and spans to no avail , so does anyone know if there’s a way to do that?
Basically I have a bot that posts from an internal tool and I’d like to have it post with something that looks like the tool to make it obvious that it’s not a regular disourse post, something like this:
[image]
It’s got a couple of nested divs/spans to ma…
For example, within a topic you could use:
<div data-theme-1>
<iframe width="100%" height="300" src="https://dune.com/embeds/1002945/1734962/fe28df65-99a3-4b98-8cb4-e97f132c8165" frameborder="0"></iframe>
</div>
And then in the custom CSS for the theme you’re using add:
div[data-theme-1] {
background-color: #FFFFFF;
}
If you’re interested in whitelisting styles/classes on your site, this must be done with a plugin.
It is possible to uses some HTML classes in Discourse, however, most HTML in a post is sanitized for security reasons, and only very strict whitelisted HTML is allowed in markdown. To add classes to the white-list you must use a plugin, the sanitization happens server side as well as client side. Check out
Whitelisting HTML tags / attributes for some details on where to add the whitelisted attributes, and I believe it would look similar to something like this: Discourse HTML Whitelist . and a…
4 Likes
lyt
July 15, 2022, 6:30pm
3
Thanks so much, that worked!
2 Likes
system
(system)
Closed
August 14, 2022, 6:31pm
4
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.