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.
Overview
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 !
Try opening the Theme Editor in a separate window from your dashboard. That way you can tweak the theme and save and instantly see the changes reflected in your dashboard.
Ctrl+S works in the Theme Editor too!
Use the same style names across different themes. That way when you switch between themes, those unique style names can take effect.
For one-off styles that only apply to an individual tile, you can edit the tile and create an ‘inline style’ directly from the style selection screen (image below)
For styles that will be reused across multiple tiles, make sure to update your theme with a named style
For advanced users, you can flip the ‘Advanced’ toggle in the Theme Editor on and add your own Custom CSS
Note that while we don’t have any immediate plans to change the DOM structure, we may make tweaks to it over time. For example, there are ‘wrapper’ divs around some tiles that may be removed in a later update. Key elements like .tile and .tile .icon are good targets for custom CSS.
You can use fully transparent colors to hide certain tile elements (for example, the footer on certain tiles)
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!
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:
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?
