SuttaCentral

Material design theme for discourse


#1

@blake @vimala

When we launch the new SC, it would be nice to reflect that here on Discourse with a matching MD theme. Stock Discourse comes with a MD theme, which you can enable through the menu on https://meta.discourse.org/.

Unfortunately, it’s not very good. The MD elements are applied poorly; for example, there is no proper respecting of shadow levels, one of the fundamental principles of MD.

A much nicer MD theme has been developed by Daemon labs, who have experience in building MD for Bootstrap. You can see their forum here:

And the discussion of their theme here:

All we’d have to do is customize some colors and we’d be good to go.

Downside? There’s more than 7000 lines of CSS. Crikey!


#2

There are some bugs with the theme when viewed using firefox, e.g. the tag color circle, the user account icons is cropped.


#3

Thanks for the feedback! I noticed that the Discourse thread had raised some issues, but also that the theme seems to be alive on Github, so I didn’t know if the issues had been fixed on not.

Anyway, we’d need to test it before deploying. The good part is, since it is just a theme, if it didn’t work we could easily revert.

The tag color circle one is weird: when you load the pages, they are out, but if you change the zoom level, they go back in!


#4

This is how this site looks like with the material stylesheets in firefox. I replaced the two stylesheets with the stylesheets from daemon labs using the browser inspector.


#5

And this is with the material icons added. Interestingly in this site the tag circle is aligned. Also I notice that the submit button in gone when typing in the reply form.


#6

Not sure what’s going on with the sign up and log in buttons in your screenshot. For me (using Nightly), I can see the logos fine, but they are partially obscured. This can be fixed by removing margin-right: 100% from the CSS, so not such a problem.

The sample you get on here may be misleading, since we have a bunch of custom CSS that’s probably interfering.


#7

Perhaps we could serve the MD theme and use a switcher so people can revert to the plain theme if they prefer.


#8

Confirmed removing the margin-right: 100% fixes the icon alignment problem.


#9

If only everything in development was so simple!


#10

As for the circle displacement issue, it looks like the culprit is height:32px applied to .badge-category-bg. I think there are several height attributes being applied and FF is getting confused.


#11

The inner geek just refuses to die, no ? :slight_smile:


#12

Toggling width, height, or margin-right fixes the displacement temporarily. But it will be displaced again when scrolling down and up. The permanent fix is to add margin: 0. When toggling the previous values (width, etc.) it can be observed in the layout tab than the top/bottom margins change from -16px/16px to 0/0.

EDIT: apparently both are required, i.e. removing the height and adding margin: 0.


#13

I also would like to suggest removing the top shadow, the resulting effect feels more subtle & peaceful :innocent:


#14

Anyway, it looks like whatever bugs we’ve seen so far are not serious issues. We’ll how our developers go, if we have time we may try it out and see if it works for us.

And despite my concern for the size, I’ve checked the stock Discourse, and it seems like it has about the same amount of CSS, so that shouldn’t matter.