Material Design Stock Theme

theme-full

#1

:loudspeaker: 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


Avatar Flair (not Badges) for Groups
How to change Discourse theme?
Daemonite Material Theme
How to adjust the location of the category logo, name and description displayed on the main page?
How to contribute to Discourse
An alternate dark theme
How to use theme color scheme
Beginner's guide to using Discourse themes
Native theme support
Is discourse presence plugin compatible with ember 2.4?
Floating "New topic" button
CSS Theme Contest (with Prizes!)
Babble - A Chat Plugin
Where to hire a Discourse guru?
Babble - A Chat Plugin [ARCHIVE]
How do I get this design?
Bublle box in message?
Adding "+ New Topic" button on every page
How can change theme like this
(Hexa) #203

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?


#206

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 Saffron) #207

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

Can you update the OP with some screenshots etc?


#208

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


(Hexa) #209

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


(Joshua Rosenfeld) #210

Related:


(Hexa) #211

What code do you change?


(Edison) #212

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


(Daniela) #213

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.


(Daniela) #214

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?


(Edison) #215

THX pal this prob fixed! nice day!


(Gareth Williams) #216

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 Taylor) #217

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) #218

Hey @david

Thanks mate - ill give it a crack now!


(Gareth Williams) #219

Hey @david

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

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


(James North) #220

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 Sogge Heggen) #221

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.


(James North) #222

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);
}

(James North) #223

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 :slight_smile: