May 13, 2017 2 min read

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.

Mechanics

The way this works is to specify what domains you want to embed on and include a snippet of JavaScript on each page. This is visible at the bottom of any blog or article page on PIXLS.US. Then an embedded iframe gets loaded with the page that includes a topic from the forum (the entire conversation).

Discourse Admin View Embedding — The Discourse Admin view for embedding.

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.

The Fix

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>

In Use

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.