Mozilla's Discourse customizations

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!

The theme is located at https://github.com/Mozilla-cIT/discourse-mozilla-extras/blob/master/public/assets/sandstone.css. It’s licensed under the MPLv2.

1 Like

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

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.

Fixed in our GitHub repo.

2 Likes

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

@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?

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.

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.

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!)

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.

1 Like

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.
1 Like

¡Hola!

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

If so, pretty please =)

¡Gracias!

1 Like

It is: https://github.com/mozilla/discourse/issues/116!

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

1 Like

hi,

thanks for this great theme.

How can i move main logo a little right by editing common css in admin panel.