How to style embedded comments?

Support
1

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?

2

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

3

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

4

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

2 Likes
5

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 <style> element in the <iframe>.

+1 for this,
and thanks!
m

6

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

7

Bart, everyone

In case you need to style your embedded discourse comments in a blog, here’s what i found/achieved at words.mal

  1. you can add style to the embed.js (look in /var/lib/docker/aufs/mnt/ and do a find from there)
  2. 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

2 Likes
8

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:

9

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

10

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:

<script>
window.document.domain = "the.domain.name.of.the.blog.com";
</script>

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

11

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.

12

@eviltrout, @codinghorror any chance you can help us out here and sneak this in as a feature?

Thanks!

13

I think this will have to wait until 1.4, as the Ember upgrade and other sysadmin related stuff is much higher priority.

1 Like
14

Fair enough :slight_smile: Thanks for the reply!

15

I’d very much like to be able to style comments too. Our forum and blog have very different themes, so embedding looks odd. I’m toying with the idea of using Disqus as a temporary solution, but this is far from ideal

16

After the switch to rounded avatars in the default theme, there is a mismatch to the embedded comments with the old square avatars even without applying custom styles.

17

Just checking in if there was any update here? We’re currently using Disqus due to the lack of support for styling, but would love to move back to Discourse if possible.

18

Yes, actually our latest betas include the ability to style embedded comments in the Admin > Customize > CSS/HTML > Embedding panel.

4 Likes
19

We use the comments on our blog, and they work so well. (Including the custom Embedding CSS!)

I’d like to be able to style one particular topic/blog post’s comments slightly differently, but the only unique attribute I can find in the comment elements is each individual comment’s ID. Unfortunately these won’t do the trick, as I can’t maintain a CSS file for updating the styles for each new individual comment! I’ve also looked into using JavaScript to add the topic ID to list, but as none of the Customisable HTML gets embedded with the comments, no such luck.

Is there a unique attribute I’ve missed that I can use to hook CSS for one topic’s comments? Or any way that the topic ID can be added to the embedded HTML element in a future release? E.g.

<html data-topic-id="topic-1208">

3 Likes