Style Embeds in Multiple Hosts

AI-generated summary

Discourse now allows for style embeds in multiple hosts through the addition of a Class Name. This feature enables users to specify different CSS for each host, addressing the issue of inconsistent styling across hosts with different backgrounds. To use this feature, add a Class Name to a domain in /admin/customize/embedding, and then target the class in admin/customize/themes under Embedded CSS. This allows for specific styling per host by preceding the style with the class selector on the <html> tag. Patrick_David thanks @eviltrout and @darix for their assistance in implementing this feature.

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/HTML → Embedded 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:

9 Likes