Material Design Stock Theme

[rewphus]

To get this theme, pull it from github.com/discourse/material-design-stock-theme

The Discourse Team was kind enough to host this theme for me at http://newmaterial.trydiscourse.com/, so feel free to take it for a spin.

I would appreciate any input you have, but just remember the intention is for this to be a stock theme, while making it simple enough for any user to easily customize.

Topic List

Posts

Categories

Search

Colors

Indigo/Orange

Red/Blue

Teal/Amber

Dark

Install guide

How to install a theme or theme component

[hexa_tech (Hexa)]

Hello!

I have applied this theme, but I noticed that the styling is off for the login button in the Create an Account popup box. I have attached a screenshot of the issue below. Can this be fixed by modifying the CSS?

[rewphus]

Yeah, it’s probably a good idea to remove all of the posts that reference the CSS, as I obviously haven’t been keeping that up to date. Go ahead and delete what you have to in order to keep things less confusing.

[sam (Sam Saffron)]

@rewphus a big purge was done. Sorry for all the missing but it is for the greater good.

Can you update the OP with some screenshots etc?

[rewphus]

Done, I also updated http://newmaterial.trydiscourse.com/ to use the github repo so that it could reflect the latest changes.

[hexa_tech (Hexa)]

Yeah. Your install has the same issue also. What can be edited to fix that?

[jomaxro (Joshua Rosenfeld)]

Related:

Fix the padding on the login and register buttons.

[hexa_tech (Hexa)]

What code do you change?

[kudouyuzi (Edison)]

‘New Topic’ button does not display in ‘Categories’ page

[Dax (Daniela)]

You need to add another target for categories page (it’s a recent change)

Something like .docked.navigation-categories.categories-list #create-topic should work.

[Dax (Daniela)]

I opened an issue on github with a potential solution to display the reply fab in the categories page

https://github.com/discourse/material-design-stock-theme/issues/8

@rewphus can you check and review it, please?

[kudouyuzi (Edison)]

THX pal this prob fixed! nice day!

[Gareth_Williams]

I wonder if anyone else is having this issue but I have just added this theme (I was using the old way of adding it before) and I now cant see any output from the Who’s Online plugin.

Its all setup as before and has a minimum of 1 so when im online it should show - am I going mad or is there a potential issue?

This is what I see now:

URL is here: https://forum.adorebeauty.com.au/

[david (David Taylor)]

Hi @Gareth_Williams,

I have whos-online running with the material design theme and it seems to to work fine. Your site shows a plugin-related error in the javascript console, so I suspect one of your other plugins is broken, which is then breaking the who’s online plugin. What other plugins do you have installed? Can you try disabling them one by one?

(I’m the author of the who’s online plugin)

Edit: think it might be the discourse-bbcode-color plugin. Try updating it as I see @tgxworld made some changes a few hours ago

[Gareth_Williams]

I have whos-online running with the material design theme and it seems to to work fine. Your site shows a plugin-related error in the javascript console, so I suspect one of your other plugins is broken, which is then breaking the who’s online plugin. What other plugins do you have installed? Can you try disabling them one by one?
(I’m the author of the who’s online plugin)
Edit: think it might be the discourse-bbcode-color plugin. Try updating it as I see @tgxworld made some changes a few hours ago

Hey @david

Thanks mate - ill give it a crack now!

[Gareth_Williams]

Hey @david

Looks like that worked - slightly off with padding on mine now but it worked

Nice work on the plugin btw - really like how it works

[JamesNorth]

Categories and Latest View

On latest, I’ve had to put this into the custom css to get the right hand column with the ‘latest’ list to have the cards/raised effect.

.latest-topic-list {
  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
  background-color: lighten($secondary, 10%);
  border-collapse: collapse;
}

Edit: this is for desktop view obviously.

[erlend_sh (Erlend Sogge Heggen)]

Are you comfortable making pull requests on GitHub? Sounds like this is a fix that ought to be patched in, so if you could submit a PR for @rewphus to review that’d be ideal.

[JamesNorth]

For cards in mobile view, I did this:

//create conversation cards
.topic-body{
  -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
  background-color: lighten($secondary, 10%);
  margin-top: 10px;
  padding-left: 20px;
  border-radius: 2px;
  padding-right: 20px;
}
//improve format of embedded posts

.embedded-posts .topic-avatar{
    padding-left: 0px;
}
.embedded-posts.top.topic-body {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
    -moz-box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0),0 2px 10px 0 rgba(0,0,0,0);
    background-color: $secondary;
}
.small-action {
    border: none;
}
#topic-closing-info {
    border: none;
}
//remove lines between cards
.topic-post article {
    border: none;
}
//put shadow on quotes as well
aside.quote {
    -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

[JamesNorth]

I’ve certainly got a Git account, but I’ve never done anything like that before.

Happy to do it, but don’t want to stuff anything up