Styling Discourse Embeds
Comments were something that I wanted to include on posts from the beginning for PIXLS.US. My problem was how to include comments in a way that would lessen exposing visitors to third party tracking, that would let users control and keep their comments if they wanted, and that would integrate nicely into the community in some way.
Luckily all of those requirements were nicely met by integrating the modern forum software Discourse.
Overall it’s been a fantastic success, I think.
This all works fantastic with on caveat: there is only one set of styles that could be applied to the embedded iframe. You can specify styling for the embed within Discourse, but there was no means for targeting the styling based on a different host.
This is particularly problematic when the host site designs are very different. For instance, we are using Discourse for comments on both PIXLS.US and digiKam.org, but PIXLS is a white background site while digiKam uses a dark background.
After initially reaching out, I had attempted an initial clumsy fix that worked but was a bit hack-ish, so it was rejected (rightfully so). My second attempt finally got things working correctly (disclaimer: I had never touched any Ruby code before this).
I added the ability to specify a class name for each of the embedded hosts. This class name would then be added to the
<html> element of each embedded iframe, allowing styling rules to be built that could target them.
<div id="discourse-comments"> <iframe ...> <html class='digiKam'> <head>...</head> <body>...</body>
Using this is quite simple now.
On the site under
admin/customize/themes/ a component of the
default theme is an Embed Style.
Editing this style and the Embedded CSS will allow you to target CSS styling rules based on the added class name above:
If you want to target a specific site in general, simply prefix your CSS selectors with
html.CLASSNAME (like the
digikam entries above).
This gives us a convenient base to build all descendant selectors we may need.