Square theme - the first theme for the Mozilla WebThings Gateway

I’ve created a theme for the Mozilla Gateway that removes the “octopus” design. It builds on the new ability to extend the user interface.

Much thanks to MrStegeman for optimising some of the javascript.

Currently not 100% of things can be re-styled, but MrStegeman has already aded changes to the gateway code so that all devices will be better stylable in the next release.

Enjoy!

3 Likes

Hi, it looks great!

Where can I get this? Will it be part of next release?

Thanks,

Tomas

It is in the “Addons” section of the UI.
Just add it :slight_smile:

Great, thanks!

It apparently needs some tunning but nice start.

1 Like

@safarik the screenshot you posted shows that the theme isn’t working for you, so I suspect you’re using Firefox. The theme currently only works in Chrome out of the box. You can also enable it to work in Firefox, but you will have to activate support for an advanced CSS feature called part.

It’s easy to do:

  • Visit about:config in Firefox.
  • Search for layout.css.shadow-parts.enabled and set it to true

It looks great :heart_eyes: a new look and can be a new way to the project to growing :smiley:

@Candle Thanks, but still nothing… (yes I did restart Firefox)

same buggy view with Edge

@safarik: but the device details page is working ok for you now?

The elongated items is a known issue. One way to solve it is to have more devices. As soon as there is a second row, everything should look more square.

@Maxim: That makes sense. As you can see here, Edge has not implemented part yet. It’s still pretty cutting edge stuff (no pun intended).

// Update: although it seems Microsoft is turning Edge into a Chromium based browser this wednesday :smiley:

Yeah, I think the detail works fine.