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:

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. [image] Custom css inside a post / adding custom classes Development Is it possible to give a 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: 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. [image] What are the different ways to customize content inside a post (custom attributes and such) Support 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…

Background color of iFrame not working

Product Support

lyt July 15, 2022, 6:30pm 3

Thanks so much, that worked!

Topic		Replies	Views
How to switch between dark mode and bright white mode in embedded Discourse Product Support	5	1264	February 9, 2023
Automatic dark mode for embedded comments as well? Feature embedding	17	2596	November 6, 2024
Styling of Embedded Discourse Feature feedback	1	2410	August 13, 2015
How to customize appearance of discourse embeds? Product Support	4	1378	October 6, 2022
Whitelist, allowed iframe Feature	11	7116	September 27, 2018

Background color of iFrame not working

Related topics