We’re super excited to announce the next SharpTools release which brings with it Themes and Styles!
This new release checks the boxes of several of the top voted feature requests! It’s a pretty major update to how you can adjust the look and feel of your dashboards while also keeping much of the familiarity of the existing approach to customizing your dashboards and tiles.
Themes and Styles enable you to fine tune the look and feel of your dashboards. You can create a Theme which is a collection of settings for dashboards and tiles including things like background colors, foreground colors, and more.
The screenshot abovet shows the overall composition of a Theme including general dashboard settings like the background color and background image (optional). Themes are then comprised of any number of Tile Styles which let you tweak a variety of tile settings like those shown in the screenshot below:
All themes include at least a default and active style which very closely mirrors the Default/Active color setting which styles are replacing. The ‘default’ style sets the base styling that all tiles inherit. The ‘active’ style is only applied to tiles which are currently active (eg. a light being on).
You can further customize things by adding your own styles and using them in your dashboards by editing a tile. For example, you may want to create ‘warning’ and ‘alert’ styles that you can use for things that need your attention - maybe even taking advantage of the new Icon Animations !
Knowledge Base Articles
Great Addition to the product. Thank you and the team for adding capabilities and subscription value. And a big shout out to @josh on skilled support in this forum!
Quick question: Is there a way to name the styles in a manner that they apply to all tiles of that type vs. going through each tile individually and changing its style?
e.g. if at the theme I could create a style and name it: .tile.switch.active and define customizations for that type of tile, then every switch tile would inherit this style from the theme?
I understand I can force some of it through injecting custom css but wanted to know if there is a way to do it through the design of the theme. For dashboards that have a lot of tiles, this would be a huge time saver. Thanks again for this release!
Named styles must be applied via the Tile Editor to each tile. Feel free to post a Feature Request though!
As you noted, you can target specific tile types using the Custom CSS feature and the syntax you mentioned.
Done! Let the voting begin
Apply styles by tile type
Awesome, Looks great. This is a big feature update.
Glad to see the options. Not sure if just my set up (only Smtthings connected at this time) and usually use laptop for changing stuff. I am seeing issues with Amz Fire 10hd tab which is the only mount control i have right now. the style options are on windows laptop, but not on fire brwsr. also, I am seeing issues with translation on fire tab when I add new buttons via Windows. I am getting on media frame that has moved off its mooring to top right of screen over other tiles.
Welcome to the community and thanks for posting, Mark!
If you’ve had SharpTools.io open on your Fire Tablet open for a while, you’ll need to manually refresh the browser/page to pull in the newest features.
Keep in mind that tiles flow left-to-right, top-to-bottom and will reflow based on the browser width. The following topic has some tips on designing a dashboard for a tablet from a PC:
How To: Designing Dashboards for a Tablet from a Laptop / PC - #2 by josh
You might also be interested in the new Scalable Dashboards - Fixed Number of Columns feature that we’re working on. Send a note to @support and I’d be happy to get you added to the beta.
Thanks Josh. And sorry. I cant believe i fell for the old ‘is it plugged in’ or “did you reboot?” mistake. That cleared everything up. I may be interested in the new scaling features since i plan to have different sized devices eventually. Also, another idea may be grouping where like icons can be kept from separating. Not a big deal but i have a mix of blank and sensor icons with small pixel config: that to show a floorplan view of my doors open / closed staus. Occasionally i have to wrestle them all back together. Thanks again for a great solution.
This themes and styles feature is awesome! Thanks!! One question about it: I want to use the same media item for the background image of multiple dashboards. I think that means I need to create a Theme that applies to multiple dashboards, and choose a specific Media item to use as the background image. When I try to select a Media item to use as the background image of a Theme, though, I only see the option to use a specific URL for the media item. I am not presented with the option to select an existing Media item (user created) to use. Is that intentional? I could use the same URL as I do for an existing Media item, but I don’t know if that means I lose the auto refresh settings that I have configured for the media item?