Daemonite Material Theme

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.

i dont know input title layout error

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

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

Thank you very much for this theme !

The badges display on the User Summary page looks broken

1 Like

I have some problem with the first button:

image

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 ?

image

1 Like

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

1 Like

Hi @PatrickH,

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

37%20am

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.

3 Likes

I have version: Discourse 1.9.5

How do I add this menu?

That’s the topic preview plugin…

https://meta.discourse.org/t/topic-list-previews/41630

4 Likes

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

https://github.com/Daemonite/discourse-material-theme/pull/6

https://github.com/Daemonite/discourse-material-theme/pull/5

https://github.com/Daemonite/discourse-material-theme/pull/4

8 Likes

@sesemaya see post above. :grin:

@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.

Screenshot%20at%20Nov%2027%2010-32-35

1 Like

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.

6 Likes

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

7 Likes

@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-${
        icon.id
      }`;
    
      if (params) {
        if (params.modifier) {
          classNames += " fa-" + params.modifier;
        }
        if (params["class"]) {
          classNames += " " + params["class"];
        }
      }
      return classNames;
    }
    
    // default resolver is font awesome
    api.registerIconRenderer({
      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);
        }
      }
    });
</script>

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.

7 Likes

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:

4 Likes

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.

2 Likes