# Daemonite Material Theme
**URL:** https://meta.discourse.org/t/daemonite-material-theme/64521
**Category:** Theme
**Created:** [June 15, 2017, 3:30am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521 "2017-06-15T03:30:03Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@modius](https://meta.discourse.org/u/modius)
#### Post date: [June 15, 2017, 3:30am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/1 "2017-06-15T03:30:03Z")
The Daemonites have released a brand new, native theme for the Discourse forum based on the Google Material design guidelines.
[https://github.com/Daemonite/discourse-material-theme](https://github.com/Daemonite/discourse-material-theme)
## As Flash as a Rat with a Gold Tooth
There’s a lot of effort in Materializing a design that didn’t start out that way. We’re happy with the result.
**Topic Preview Plugin Support**
**Colourful Sub-Categories**
**New Topic; with Inbox inspiration**
**Menus, Buttons and Material Icons**
## Why build “another” Material based theme?
Yep. There’s already a really cool Material Stock theme for Discourse available. It’s a bit different in places, and even includes a DARK mode.
> [@Material Design Theme](https://meta.discourse.org/t/material-design-stock-theme/47142):
>
> discourse2Summary Material Design has been created to be easily customizable.eyeglassesPreview [Preview on Discourse Theme Creator](https://discourse.theme-creator.io/theme/Discourse/material-design-theme)hammer_and_wrenchRepository Link [https://github.com/discourse/material-design-stock-theme](https://github.com/discourse/material-design-stock-theme)open_bookNew to Discourse Themes? [Beginner’s guide to using Discourse Themes](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) Install this theme Features Color Options
Our forum has been running it’s own Material theme for some time. We’ve finally wrapped this up into the new Discourse Theme format for distribution. Plus as we use the theme as the foundation for some other Discourse related projects we need something within our immediate control.
Overall i think the only way we can describe the visual differences is that ours is **more Material** ; covers more elements in the style guide, more accurately. That said, whether you like one or the other will probably boil down to personal preference – we make a few _opinionated choices_ with respect to certain elements.
For reference, the theme is similar in approach to the Daemonite Material for Bootstrap 4 project:
[https://github.com/Daemonite/material](https://github.com/Daemonite/material)
While Discourse is not Bootstrap-based, we do adhere to the same Material principals advocated in that design project.
You can see the theme running live at our Labs forum:
> **[Daemon | Serious web solutions](https://www.daemon.com.au)**
>
> We create strategies for succeeding online. Design and technical services for education, enterprise and government since 1995.
Enjoy!
---
### Author:  [@sesemaya](https://meta.discourse.org/u/sesemaya)
#### Post date: [June 15, 2017, 3:41am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/2 "2017-06-15T03:41:50Z")
The new Material theme also works well with another theme we released earlier: the [`discourse-clipboard`](https://github.com/Daemonite/discourse-clipboard) theme which adds a COPY TO CLIPBOARD feature for code blocks.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [June 15, 2017, 6:38pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/3 "2017-06-15T18:38:26Z")
Awesome work!
Two things:
- You can now [include assets like fonts](https://meta.discourse.org/t/include-images-and-fonts-in-themes/62459), so no need to use Google Fonts.
- The horizontal scroll bar on code blocks is too prominent, maybe some `::-webkit-scrollbar` CSS can help.
---
### Author:  [@dax](https://meta.discourse.org/u/dax)
#### Post date: [June 15, 2017, 8:22pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/4 "2017-06-15T20:22:48Z")
I’ve tried this theme with Firefox 54.0.
This is how it looks:
I think the problem is the `height: 32px` you set for `.badge-wrapper.box span.badge-category-bg, .badge-wrapper.bullet span.badge-category-bg`.
Removing the height should fix the problem.
Great theme anyway @modius! 👍
---
### Author:  [@cpradio](https://meta.discourse.org/u/cpradio)
#### Post date: [June 15, 2017, 8:29pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/5 "2017-06-15T20:29:46Z")
If I had to guess, you may need to try a different tag style.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 15, 2017, 11:47pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/6 "2017-06-15T23:47:08Z")
🙋🏽♂️If you can fix, submit a pr to the theme repo
---
### Author:  [@sesemaya](https://meta.discourse.org/u/sesemaya)
#### Post date: [June 16, 2017, 12:17am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/7 "2017-06-16T00:17:44Z")
> [@Falco](#):
>
> You can now include assets like fonts, so no need to use Google Fonts.
Thanks for pointing out the including assets feature, I’m just a bit afraid that we will need to manually track when new icons have been added to Material Icons or Roboto has been updated and then update the theme accordingly if we go for this option. Although neither are updated frequently, using Google Fonts just seems to have one fewer thing to worry about.
> [@Falco](#):
>
> The horizontal scroll bar on code blocks is too prominent, maybe some ::-webkit-scrollbar CSS can help.
We will have a crack at this. 🤞
---
### Author:  [@sesemaya](https://meta.discourse.org/u/sesemaya)
#### Post date: [June 16, 2017, 12:28am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/8 "2017-06-16T00:28:18Z")
Thanks for the feedback.
I had a look of this in Firefox. In fact, if you make any changes that has something to do with the box model (height, margin, width, etc.) in the Inspector, it seems to fix the problem.
Since badges are now `display: inline-flex;`, maybe we don’t need to `absolute` position `badge-category-bg` or `badge-category-parent-bg` anymore.
---
### Author:  [@Alankrit\_Choudh](https://meta.discourse.org/u/Alankrit_Choudh)
#### Post date: [June 17, 2017, 10:00am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/9 "2017-06-17T10:00:18Z")
getting this bug when i have discourse formatting toolbar installed
---
### Author:  [@Nick\_Research](https://meta.discourse.org/u/Nick_Research)
#### Post date: [October 13, 2017, 3:23am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/10 "2017-10-13T03:23:49Z")
Apologies if this is a ridiculous question, but I really cannot figure out how to get the images showing on the front page when using this theme. As in, on the first screenshot shown, every topic has an image associated with it. I’m trying to make this happen on my install of Discourse and testing by creating posts with images - but no image comes through to the front page.
Is there some setting that makes that work?
Many thanks.
---
### Author:  [@schungx](https://meta.discourse.org/u/schungx)
#### Post date: [October 13, 2017, 3:28am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/11 "2017-10-13T03:28:07Z")
I think you’re looking at the `topic preview` plugin…
---
### Author:  [@Nick\_Research](https://meta.discourse.org/u/Nick_Research)
#### Post date: [October 13, 2017, 6:21am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/12 "2017-10-13T06:21:40Z")
Thanks so much! That’s exactly what I was after. And in case anybody is following this thread later the link to installing a plugin is here: [Install plugins on a self-hosted site](https://meta.discourse.org/t/install-a-plugin/19157/) and the github url for topic preview to show thumbnails of images to go with a topic is here: [GitHub - merefield/discourse-topic-previews-sidecar: A Discourse plugin that complements the Topic Previews Theme Component to add features · GitHub](https://github.com/angusmcleod/discourse-topic-previews)
---
### Author:  [@kuyashi](https://meta.discourse.org/u/kuyashi)
#### Post date: [October 22, 2017, 11:15am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/13 "2017-10-22T11:15:44Z")
Hi, I am seeing issues on mobile where some buttons and text not reaponivw. See the “Unpinned” button and adjacent text causing horizontal scrolling and messing with the responsiveness.
 
---
### Author:  [@modius](https://meta.discourse.org/u/modius)
#### Post date: [March 7, 2018, 6:24am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/14 "2018-03-07T06:24:15Z")
**Incredible news!** The Daemonite Material Discourse theme has been overhauled for use with Discourse v2 BETA!
[https://github.com/Daemonite/discourse-material-theme](https://github.com/Daemonite/discourse-material-theme)
You can see it in action here:
> **[Daemon | Serious web solutions](https://www.daemon.com.au)**
>
> We create strategies for succeeding online. Design and technical services for education, enterprise and government since 1995.
Enjoy!
---
### Author:  [@Pad\_Pors](https://meta.discourse.org/u/Pad_Pors)
#### Post date: [March 7, 2018, 8:40am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/15 "2018-03-07T08:40:06Z")
thanks for the update, the theme doesn’t work properly for rtl direction. is it easy to adopt it for rtl?
---
### Author:  [@notriddle](https://meta.discourse.org/u/notriddle)
#### Post date: [March 7, 2018, 5:29pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/16 "2018-03-07T17:29:25Z")
The log in and sign up buttons are messed up in Firefox
Other than that, it looks really good!
---
### Author:  [@sesemaya](https://meta.discourse.org/u/sesemaya)
#### Post date: [March 8, 2018, 12:07am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/17 "2018-03-08T00:07:06Z")
Hi @notriddle, thanks for the bug report, this should have been fixed by the latest update.
---
### Author:  [@Timothy\_Vail](https://meta.discourse.org/u/Timothy_Vail)
#### Post date: [March 8, 2018, 2:02am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/18 "2018-03-08T02:02:18Z")
@modius , @sesemaya I am running the Material Design Stock Theme, I like the layout of that theme, but like elements of your theme as well, especially the log in and sign up buttons, and category “pill” buttons. Is there a way to add those in to my current theme?
I tried via css with variations on &.sign-up-button {
@include material-icons(‘person\_add’);
but that didn’t work. Any ideas?
So, the category buttons, and making login and signup buttons font awesome…
The biggest thing I want to keep is the + button for new topics on the bottom right.
---
### Author:  [@modius](https://meta.discourse.org/u/modius)
#### Post date: [March 8, 2018, 5:39am UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/19 "2018-03-08T05:39:28Z")
> [@Timothy\_Vail](#):
>
> The biggest thing I want to keep is the + button for new topics on the bottom right.
Funnily enough we removed the `+` on account of it being awkward to get it “right” in all the places it would sit. And while it works in a mobile view it looks a little odd in the desktop view; or at least it takes a bit of getting used to.
@sesemaya what’s the chances of getting a `+` back as an optional child theme? Is this something we could support?
---
### Author:  [@Timothy\_Vail](https://meta.discourse.org/u/Timothy_Vail)
#### Post date: [March 8, 2018, 4:31pm UTC](https://meta.discourse.org/t/daemonite-material-theme/64521/20 "2018-03-08T16:31:16Z")
Anyhow, how would I import some of the features of your theme into the material design theme?
[Next page](https://meta.discourse.org/t/daemonite-material-theme/64521.md?page=2)