I’m using @eviltrout’s script to display comments on my blog. Everything works fine, but I’d like to tweak the styling a little. As I wasn’t able to find a setting in the admin for the embed css, I was wondering how to best approach this? Any tips?

Is it anywhere on the roadmap? Just being able to add a URL for my own CSS would already be great.

Good question. I wonder if this is something we should squeeze into 1.3 @codinghorror?

I think it’s a great idea. I shared that question (and some round-trip notes) at EvilTrout’s site, here. I tried a number of methods, and it seems like it might make sense to add something in the embed.js that reads from a local css file or the discourse settings/db and embeds a element in the . +1 for this, and thanks! m

Thanks for the support Mark! Yes I’m really hoping for some css support as comments on my site look a little off now.

Bart, everyone In case you need to style your embedded discourse comments in a blog, here’s what i found/achieved at words.mal you can add style to the embed.js (look in /var/lib/docker/aufs/mnt/ and do a find from there) the css is like this: iframe.style.color = ‘#ffffff’; iframe.style.borderRadius = ‘5px’; /* <<–note the camelCase for hypenated styles */ Make sure to add it before: comments.appendChild(iframe); or, you can add css to the embed-49394etc…css file; this is harder. Either add it to the html element, or add to the very end and overwrite with a new style your css. The obvious downsides of this is it will probably get over written next time you rebuild, but it does work. For my project of round-trip comment creation and display in an embedded blog, i’m next working on: auto-refresh after submitting making people have accounts first. Hope this is useful. Thanks m

Thanks Mark! I’m a little reluctant to ‘hack’ a solution like that - it getting lost each time I upgrade is a bit of a show stopper. Still hoping for an easy solution in Discourse itself :slight_smile:

hi Bart, i’m quite reluctant to ‘hack’ a solution either (and that’s the right word) but i figured it was good to at least have an option on the table for anyone who really needs it. Take care, m

So, it turns out, the simplest way would be to add this to the headers of the discourse instance that show up on the embedded code: window.document.domain = "the.domain.name.of.the.blog.com"; This would then allow javascript on the blog page to alter the css for the iFrame, b/c it gets around cross-domain restrictions. But, I customized the Header, Footer and every section of the Admin > Customize > CSS/HTML with that bit of code, and it does show up when i look at the site itself, but when i view the source of the embedded comments, that bit of javascript is gone, hence i can’t change look and feel. It seems to me that the customized attributes should also flow forward to whatever code gets embedded elsewhere. Thoughts? Thanks as always. m

I don’t know if all of the customized attributes should carry forward to embed code, but I could see adding a section for customizing/injecting css for the embed page. This would likely go a long way towards allowing some nice theming and more seamless integration to the embedding site.

How to style embedded comments?

Product Support

eviltrout (Robin Ward) February 18, 2015, 6:03pm 2

We unfortunately don’t have a way to customize the style right now.

Topic		Replies	Views
How to customize appearance of discourse embeds? Product Support	4	1372	October 6, 2022
Styling of Embedded Discourse Feature feedback	1	2408	August 13, 2015
What CSS was used for Comments here? Product Support	15	664	September 12, 2024
Change color in embed posts links? Product Support	3	774	May 21, 2020
CSS no longer applied to embedded topics Bug	3	905	June 12, 2018

How to style embedded comments?

Related topics