Community Theme Sharing

This beautiful design by @Tim spurred some discussion about Community Theme Sharing, so I wanted to create a topic dedicated to it (and so we don’t derail his other thread). :slight_smile:

7 Likes

Impressive design work @Tim! I’d love to see the rest of your tabs/dashboards. Would you be willing to share the css when youre done?

@josh Is there a repo for user css themes? Have you thought of bringing in a few of these “refined templates” as options all users can choose from in settings?

There’s a Community Wiki for Custom CSS Snippets and there’s the Show off Your Dashboards thread for sharing cool designs. We could certainly create a category for sharing themes if there’s enough interest.

We had a variety of discussions around sharing themes during the development of the feature. I think the first step would be to get a proper Theme Export/Import feature in place so it’s easy to share cool Themes like this.

Then the next step would be for people to share their themes! If there’s enough interest and the theme author is willing to have their theme included, I would be open to including popular community themes.

Edit: @Justin1 I moved our posts into a new thread with a more relevant title so hopefully other people can see it and join in on the discussion!

3 Likes

I would love something like this. Being a product designer I’m always looking for ways to make my interface look nice but also function well from a UX perspective. The one thing I do feel is that its difficult to get a we’ll designed, highly polished UI for the interface. Things like rounded corners, drop shadows, gradients and transparency goes a long way to modernize an interface. While I am a designer and can use the tools available to customize the UI I lack the knowledge on how to override those attributes through css to make those changes. Even a small guide on how to manually change the style sheet would be helpful.

3 Likes

Hi Tim. This is by far the cleanest dashboard I’ve seen. I would love to see the .css code that you used to get the indicator to the left of the rooms and the corner indicator on the room tiles. Thanks for sharing.

1 Like

Tile CSS
Corner Indicator:
background-image: url(); background-position: right top; background-repeat: no-repeat;

Border:
border-left: 5px solid #999999 !important;

Outstanding. Thank you Michael.

Gary, I just created some examples you might be interested in!
Dashboard Menus and Tile (Things) Examples - CSS

This is great information. I really appreciate you sharing this will all of us. Although, I do know some coding it is more in the VBA and Powershell world. Very helpful. Thank you.

I currently have one theme tied to two groups of touchscreens with very different layouts. I was struggling with trying to make the theme work for both and finally realized it is easier to create a second theme and manage them separately. Having an import/export theme would certainly improve this process as well as allow sharing of themes as mentioned above.

1 Like