My Custom SmartTiles Dashboard

SmartApps & Automations
1

Hey all,

New to SmartThings, just bought it a week ago. I wasn’t a fan of the original app design and wanted something more convenient that required less clicks to accomplish a task. After going through this community I found SmartTiles and thought it was the perfect solution for me. After getting it setup I modified the CSS a bit and came up with this:

Image and video hosting by TinyPic

I went through some SmartTile themes shared and didn’t see anything like this so I thought I’d share mine to show the possibilities. The images used are not mine, they are just images found using google images so I can’t take credit for them. Enjoy!

13 Likes
2

:clap: Nice Work @krisco

Would you mind sharing your modified CSS ?

Some other themes I have seen that are worth a look at:

3 Likes
3

Would love to know if what you did for CSS was just attach an image type to a device type in the CSS. It looks like you can read it, but curious if you dimmed photo for off and full color for on. (that was what I had been thinking about doing)

VERY COOL implementation.

2 Likes
4

@ehoffman73 that’s correct, I assigned an image to each device and then used CSS to overlay a black tint.

Here is a sample of my css:

.tile.light[data-device=‘PASTE DEVICE ID HERE’] {background-image: url(“URL OF IMAGE HERE”); background-size:cover; box-shadow: 0px 375px rgba(0, 0, 0, 0.4) inset;}

The last part with the rgba is the black overlay with an opacity of 0.4 … 1 is all black and 0 is fully transparent, just keep changing the number until it’s to your liking.

4 Likes
5

Hi @krisco,

Would you mind sharing what CSS you used to get the 3x width tile at the top. I’m assuming it’s a blank tile which doesn’t appear to have a “data-type” property

Thanks in advance

Ade

1 Like
6

@adeparker sure, no prob. It’s actually my routines tile. I use it as a shortcut to my routines. Here is the css for it:

/Routines tile/
.tile.hello-home {width:375px; height:300px; background-image: url(“URL HERE”); background-size:cover;}

/hide the icon on the tile/
.hello-home .icon {visibility: hidden;}

/hide the text on the tile/
.hello-home .title {visibility: hidden;}

If you want the tile to span only 2 tiles wide you change the width from 375px to 300px. If you want it to be only 1 row high, remove “height: 300px;” from the code.

4 Likes
7

Thanks @krisco, legend!

2 Likes
8

@krisco,

This is fantastic and unexpected! Thank you for sharing this!

2 Likes
9

Hi,

I am a complete noob to SmartTiles and I LOVE what your dashboard looks like. Would you be kind enough to share the entire CSS you’re using here?

I’d really appreciate that!

1 Like
10

How do you change that line to change the overlay based on active/inactive status? For example, if active, change overlay to 0 but if inactive, change overlay to 0.5.

11

@sweeep11 For active you just add “.active” after the CSS name and “.inactive” for inactive. Here’s an example:

.tile.light.active[data-device=‘DATA DEVICE ID’] {background-image: url(“IMAGE URL”); background-size:cover; box-shadow: 0px 300px rgba(0, 0, 0, 0) inset;}

.tile.light.inactive[data-device=‘DATA DEVICE ID’] {background-image: url(“IMAGE URL”); background-size:cover; box-shadow: 0px 300px rgba(0, 0, 0, 0.3) inset;}

My CSS is just a repetition of this code for each device, just changing the “data-device” id and background-image URL. Then I arrange everything using the Arrange Tiles option that SmartTiles comes with.

2 Likes
12

Sweet! That worked :smiley:

And that makes sense. Would’ve been nice to just get your pictures then because I really like them :slight_smile: For your first big tile, how did you change the font? It looks cool.

13

@sweeep11 great!

The pictures were found using google image search. I have them uploaded to a private server for personal use. Since these aren’t my photos I do not want to get in trouble for redistributing them. This is one of the reasons why I’m avoiding sharing my entire CSS code, I’d like to keep my device IDs and URLs private.

As for the big tile, I made the photo myself using Photoshop. The dimensions are 600x375 px.

1 Like
14

Got it. I figured it was for that reason but thought I’d ask anyways. I’m also uploading pics to my personal server haha.

Btw, when I overlay my image using ‘background-image’, it seems to also show the original tile icon that used to be there. How do I hide that icon?

15

To hide the tile icon:

.light .icon {visibility:hidden;}

To hide the text title:

.light .title {visibility:hidden;}

If you want to do it based on inactive/active you do something like this:

.light .icon .inactive {visibility:hidden;}
.light .icon .active {visibility:visible;}

2 Likes
16

You are REALLY saving my butt here. Thanks a lot for all your help!

2 Likes
17

@krisco If you don’t mind would it be ok to feature this on the official SmartTiles.click Custom CSS Theme page?

If so do you have any other screen shots, maybe like a tablet view or browser view, as well as the CSS code you used that you can share? If you do, please PM me with that info.

Thank you! It looks AMAZING!

1 Like
18

how do you theme the app for android?

19

Hi, @ssshake. This customization is not done to the app itself, but to the SmartTiles (www.smarttiles.click) SmartApp.

Hope that helps!

1 Like