Style Embeds in Multiple Hosts

A while back styling for embedded discourse was added, where we could specify CSS for the embeds. The only problem was when we got the ability to embed in multiple allowed hosts - there was still only the single styling available across all of the hosts (which is painful if one host is on a light background and the other is dark).

After some back-and-forth I was finally able to submit the ability to define a Class Name that could be added to the embedded page (per host) to target CSS better.


In a nutshell, adding a Class Name to a domain (at /admin/customize/embedding):

Will add that value to the <html> tag of the embedded page. At that point, if you go to admin/custome/themes and Edit CSS/HTMLEmbedded CSS, you can target any of the defined Class Names for the specific host:

Precede your style with the class selector on the <html> tag. As in my example above, if I want to change the text color for my embed globally:

html.digikam {
    color: #9e9e9e;
}

but use a different color on a different embedded site:

html.pixls {
    color: #333333;
}

Or I can modify the button color:

html.digikam footer .button {
    background-color: #0068c6;
}

Rinse and repeat for all of the allowed hosts that you define a Class Name for…
Thank you x1000 to @eviltrout for being patient with me, and especially to @darix who guided me through actually doing it. :smiley:

More in-depth writeup on my personal blog:
https://patdavid.net/2017/05/styling-discourse-embeds/

9 Likes