The CSS for embedding Discourse does not respect the color scheme

(DoubleMalt) #1

Well, the topic says it pretty much. I would like my embedded Discourse frame to conform to the same color scheme I set up for the main forum.

(Robin Ward) #2

We can’t assume that the site you’re embedding on has the same color scheme as your site.

Instead we provide the ability to edit the Embedded CSS in the customize menu. You can add any CSS you want to customize the look of the frame.

(DoubleMalt) #3

In the spirit of sane defaults, I’d assume that if I change the color scheme of my base install I want a similar color scheme for the embedding.
So I would still pose that is preferable in the vast majority of times (also it could be setting ind embed … Use Custom Color Scheme).

Is there a documentation for the embed CSS somewhere?

(Jeff Atwood) #4

Admin, customize, embed.

(DoubleMalt) #5

No, there isn’t any documentation on stylling the embedded content. There isn’t even a mention of the possibility to do this. Only in Embedding Discourse Comments via Javascript is it mentioned.

Reading the code, embed.scss imports colors.scss, where the defaults are set. How does a color scheme work? Are the assets recompiled on color scheme activation?

Would it be possible to choose a color scheme for the embedding?

(Robin Ward) #6

Actually you’re right, it does look like we mix in some colours there from the main template. It is just a few styles though that were copied and pasted over so they could be formatted properly in embedding.

Overall you will have to customize the CSS yourself based on the site you are embedding it in. There isn’t any specific documentation about the classes or anything – the best way to do it is have your designer look at the formatting and add the styles accordingly.

At some point in the future we could consider making a colour scheme for it too, but that is a fair bit of work.

(DoubleMalt) #7

Wrote a little howto here.