Customizing CSS


by Brian Diehl

5dc7adddfd2daf7db7c13524fd636af854de8aef[1] 00955e6bfd5ec6615fc8aa5877ae6bb298c1162a[1]

To add or edit the Custom CSS of each of your SmartTiles Dashboards, visit your dashboard in a browser but change the letters “ui” in the URL address bar to “css“, as in:

https://graph.api.smartthings.com/ api/smartapps/installations/ 575-dashboard-unique-id-6a4/ css?access_token=6ab-your-secret-token-999

I threw this guide together fairly quickly, but it should help most people with basic CSS changes for their dashboards. It doesn’t include everything, most notably Video Tiles and Thermostats as I have neither hooked up to ST.

The purpose here is to provide working samples of CSS that can be copied, pasted, and easily updated by any user. I highly recommend completing your CSS changes in a text editor so that you can use the Find and Replace feature to change colors quickly.

This was put together with CSS snippets posted by other SmartTiles users as well as the code I put together myself for my dashboard use. Thanks to @pmjoen for contributing the Sliders, Icon Opacity, Weather, and Battery colors based on data value sections. Thanks to @darcranger for the Smart Home Monitor, Power Meter, Battery font awesome icons based on data values, and Temperature colors based on data value sections.

I’ll add snippets for both FA (Font Awesome) and URL Images as your content for different devices. Font Awesome items can be copied and pasted from the Font Awesome Cheatsheet found here: http://fontawesome.io/cheatsheet/. Make sure you are copying the icon and not the name or alias. It likely won’t show up properly for you when you’re editing, but once you save and refresh your Dashboard, it will be there.

For custom icons, I definitely recommend using TinyPic if you aren’t sure about re-sizing them. You can use the Avatar option and it will resize it to 100px x 75px, which is perfect for a standard 1×1 small tile. You can also use the SmartThings icons from here: http://scripts.3dgo.net/smartthings/icons/. For these, just copy and paste the full web address in the bottom box for each icon.

Here are some custom icons provided by @pmjoen:

garage_open garage_closed ceiling_fan

Colors can be entered either as Hex values or using color names. Here’s a link for sports fans to set up colors based on their favorite teams: http://teamcolors.arc90.com/

Everything inside of /* and */ is a comment. These are just notes that explain what different parts of CSS do.

Leave a comment