Mozilla's Discourse customizations

almereyda · November 28, 2014, 4:19am

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 · November 28, 2014, 3:11pm

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.

almereyda · June 9, 2015, 1:51am

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 · June 10, 2015, 10:05pm

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 · June 11, 2015, 10:45am

Fixed in our GitHub repo.

almereyda · June 11, 2015, 1:05pm

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

almereyda · October 23, 2015, 2:26am

@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 · October 23, 2015, 2:31am

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.

almereyda · October 28, 2015, 10:31pm

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.

downey · September 21, 2017, 7:56pm

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 · September 22, 2017, 1:17pm

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:

github.com

mozilla/discourse-mozilla-theme/blob/master/desktop/desktop.scss#L124-L161


/* Move category badges to banner below header */


.d-header .contents {
margin-bottom: 0;
}


.d-header .extra-info-wrapper {
overflow: visible;
margin-top: -15px;


.title-wrapper {


    .badge-wrapper {
        margin: 0;


        .badge-category {
            margin-top: 0px;
            padding: 5px;
        }

This file has been truncated. show original

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.

downey · September 28, 2017, 4:07pm

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 · October 20, 2017, 6:19am

¡Hola!

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

If so, pretty please =)

¡Gracias!

leo · October 23, 2017, 8:21pm

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.

fstdesk.com · January 5, 2019, 8:00pm

hi,

thanks for this great theme.

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