Mozilla's Discourse customizations

(Jon Richter) #1

I am puzzled about this sites theme. I’ve read about it earlier but am not sure to be on the right track to implement something similiar myself.

@tanner @jan Do you have a thorough documentation or even a freely licenced release of your customizations available? It’s just so much more readable than the common Discourse White that I’m remembered of how opaque it used to be.

You’d do a favour to the community of always-the-same-white instances a lot!

(Tanner Filip) #2

The theme is located at It’s licensed under the MPLv2.

(Jon Richter) #3

We’re currently experiencing

interesting side effects of this stylesheet. Since updating from 1.3 to 1.4, the .topic-list backgrounds disappeared.

If you have any modifications for this, I’d love to see them commited to the GitHub repo, so I can apply them, too!

Now it seems we also have to run testing cycles before upgrading.
It used to be so easy with just click-click-click

(Yousef Alam) #4

Yeah, we get the same issue on our staging server, we haven’t updated to 1.4beta1 in production yet. Should be fixed in the next couple of days.

(Yousef Alam) #5

Fixed in our GitHub repo.

(Jon Richter) #6

Wow, so it was really only this .topic-list line which I’ve had also identified. Haha! Well then, well played and thanks.

(Jon Richter) #7

@tanner @yousef As you may have noticed, Discourse v1.5.0 introduced some new CSS quirks, at least for the floating links next to topics. Anything else which you would be aware of?

(Tanner Filip) #8

I’m not really sure, to be honest. Our CSS really needs some loving, but there’s a very good reason I don’t touch it too much. I think @yousef mentioned a few things, but all I recall is the links.

(Jon Richter) #9

I mean that’s why we call it cooperation within the Commons:

We have an interest in serving and supporting this very small, particular one: a set of CSS instructions.
Please go ahead and help out with finding these current issues.

@yousef What else comes to your mind?

  • top-right buttons flicker
  • inline informations which are not part of the conversation are misplaced
  • no visible staff colour
  • user pages and top-right button layout, colouring, new message button
  • admin is kind of distorted
  • images break out

to be continued

I should start filing well documented issues.

(Michael Downey) #10

There have been some really lovely Discourse theme/CSS customizations since this topic was last updated. It also appears that the repo mentioned above hasn’t been updated with the customizations either.

If these are available for public consumption, it’d be a great learning opportunity for folks – especially those running other Discourse sites elsewhere to adapt some elements! (e.g. I really like what’s been done with the colored category “bar” across the entire width of the screen!)

(Leo McArdle) #11

Yeah, we moved to using Discourse’s inbuilt theme support. You can find the repo driving it here:

I’ve tried to keep commits as atomic as possible, and there’s a number of comments dotted throughout the CSS to describe what the styles below are doing - like with the category bar you describe:

Currently we’ve got all the site customizations we use in this one repo - everything from these CSS changes, to our DNT-respecting GA snippet. That makes it really easy to update, deploy, etc. for us, but it doesn’t make it great for anyone wanting to apply some of the same customizations.

I’d be interested if you have any ideas how we could make that easier for others. I’m not sure just splitting between Mozilla-specific and non-Mozilla specific snippets would work (where’s the line? and it assumes other people will want to use all of the non-specific stuff…), but there might be some other way.

(Michael Downey) #12

Hey @leo. This is great! I haven’t spent an awful lot of time looking at this, but a few thoughts.

Discourse supports “theme parts”, or what I’d call (from the WordPress world) the idea of “parent and child” themes.

I haven’t built up any from the ground, up but I think the following could happen:

  • Generic “Mozilla Design” theme that has basic design elements, no custom content stuff. This repo/theme would be available for anyone to import via their own Discourse site admin UI.
    • A “Mozilla Discourse” theme, with an upstream “Theme Component” of the above “Mozilla Design” theme. This “child theme” would be where all the content-specific stuff, only for this specific site, would go.
    • Other Discourse sites could similarly create their own downstream themes in the same way, such as changing fonts, colors, etc., perhaps? I’m not sure how updates to the upstream “parent” would be handled, though.

(alex_mayorga) #13


Is this the right place to beg for a dark theme?

If so, pretty please =)


(Leo McArdle) #14

It is:!

I don’t have the bandwidth to work on it at the moment, but I’d be happy to mentor anyone who does.