Daemonite Material Theme


(Maya) #21

Unfortunately there is not an easy way to import bits and pieces of a theme. You will have to cherry pick the styles for the components/features you like from the compiled CSS or Sass and apply theme on top of the theme you are currently using.

(Cheng Trang) #22

i dont know input title layout error

(Maya) #23

Hi @trangchongcheng, thanks for the feedback, this has been fixed by the latest update.

(Cheng Trang) #24

Thank…i working…
But when i set google adsense (ads auto responsive) then forum cant responsive on mobile.

(DjCyry) #25

Thank you very much for this theme !

(Michael Howell) #26

The badges display on the User Summary page looks broken

(Patrick) #30

I have some problem with the first button:


Also the tekst below the title is not displayed ?

I have also an exclamation mark next ot the name

is this theme still being updated ? I already figured out the exclamation mark :blush:

ok, almost there…
The categorie button is not in Material Design, how can i fix this ?


(Maya) #31

Hi @notriddle, the badges section is now cleaned up in the latest version.

(Maya) #32

Hi @PatrickH,

Regarding category dropdown, it works both for us at https://labs.daemon.com.au/ and on Discourse Theme Creator.


The reason I can think of at this stage is maybe you have an older version of Discourse and the markup for the category button is somehow different.

(Patrick) #33

I have version: Discourse 1.9.5

(Eduardo Braga) #37

How do I add this menu?

(Geoff Bowers) #38

That’s the topic preview plugin…

(Angus McLeod) #41

@modius I just submitted three PRs for minor fixes to this theme. Let me know if the descriptions of what is being fixed are not clear:

(Merlls Rizzini) #42

@sesemaya see post above. :grin:

(Angus McLeod) #43

@sesemaya Thanks for merging! In the course of the modifications and other updates we seem to have ended up with two toggles in the mobile compose. I think it might be because you’ve added both .toggle-toolbar and fa-bars to the material icon :before overrides.


(Penar Musaraj) #44

This is likely because I just merged FontAwesome 5 into master and now the core icons are no longer in :befores (more here). I tried removing the :before on the browser console, and it seems to do the trick.

Material Design theme icons are missing
Material Design theme icons are missing
(Geoff Bowers) #45

@sesemaya is taking a look at what we can do to preserve Material icons in light of the FontAwesome changes tomorrow.

Material Design theme icons are missing
(Taylor) #46

@modius, at the moment it looks like using the old icon render works. Here’s the code if you want to try it out in the </head> section of a theme component:

<script type="text/discourse-plugin" version="0.8">
    const h = require("virtual-dom").h;
    // Support for font awesome icons
    function faClasses(icon, params) {
      let classNames = `fa fa-${icon.replacementId || icon.id} d-icon d-icon-${
      if (params) {
        if (params.modifier) {
          classNames += " fa-" + params.modifier;
        if (params["class"]) {
          classNames += " " + params["class"];
      return classNames;
    // default resolver is font awesome
      name: "font-awesome",
      string(icon, params) {
        let tagName = params.tagName || "i";
        let html = `<${tagName} class='${faClasses(icon, params)}'`;
        if (params.title) {
          html += ` title='${I18n.t(params.title).replace(/'/g, "&#39;")}'`;
        if (params.label) {
          html += " aria-hidden='true'";
        html += `></${tagName}>`;
        if (params.label) {
          html += `<span class='sr-only'>${params.label}</span>`;
        return html;
      node(icon, params) {
        let tagName = params.tagName || "i";
        const properties = {
          className: faClasses(icon, params),
          attributes: { "aria-hidden": true }
        if (params.title) {
          properties.attributes.title = params.title;
        if (params.label) {
          return h(tagName, properties, h("span.sr-only", I18n.t(params.label)));
        } else {
          return h(tagName, properties);

It looks like there still might be a few icons that aren’t rendering correctly (.fa-thumbtack is the notable one), but in any case, I think this might be one angle to look at.

(Merlls Rizzini) #47

For those who still wants this modification and bring back + icon, @angus made this one for me.

Thank you @modius and @sesemaya for such incredible theme. :wink:

@tshenry you’re an angel. :hugs:

(Maya) #48

Thanks @tshenry, that did the trick.

Although there are still a few icons that are not rendering correctly, they are because of naming changes in FontAwesome 5. For example, .fa-thumbtack in 5 was .fa-thumb-tack in 4. I will go through the changes and update theme CSS accordingly.

Thanks again for the workaround.