Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Has anyone been able to get a single tile that not only reports the accurate status of the garage door with a nice icon, but also allows you to push on the tile to open/close? I am using the Linear zwave modules and it seems I can use a Momentary Push Button tile to open/close, but then the status isn’t reflected OR use an open/close sensor tile to report status. I’d love to get a single tile to do both similar to how the Lock tiles work.

I have exactly the same issue with my garage door opener status showing stale in Smart Tiles. Posted details in the SmartTiles v5.8 thread.

If your using a Momentary Push Button as your device type, this is expected since it’s basically an on/off toggle.

No, I am using a toggle switch. Here are my tiles:

(the doors are closed right now, so the state looks correct).

Ok, this is a different issue than the question I have. I am trying to avoid using multiple tiles like you and have a single tile.I don’t think it’s possible.

Yes, I think we’re on the same page. I have two tiles because one of them can actually be used to open/close the doors, and the other one shows the door status accurately. Of course I’d prefer to have just one tile (switch-type) that would work properly.

Is there a way to have a custom icon for a link? I tried this CSS code but doesn’t seem to work:

.tile.link[Sonos://] .icon {content : url(http://i68.tinypic.com/263zghu.png)}

I got my link icons to work using help from other people on here, try this:

.tile.link[data-link-i=“xxxxx”] .icon a i::before {content: url(http://i68.tinypic.com/263zghu.png); position: relative; left: 0px; top: 0px;}

You need to find your data link number, either by inspecting your dashboard or by checking your link setup in the smartapp. Also, you will have to play with the positions to get it centered in the tile.

Thanks! That worked. Does anyone know how to change the entire background tile color? When I change it with the background color command, it only seems to do it for the actual .jpg’s background, and not the entire tile.

1 Like

Below is my dashboard that I have been working on feverishly the past few days. I like the Cobalt theme, but what I want some more variety in colors as all of my switches are green. The problem is if I use the color or background color attributes for some of the tiles, they don’t fill the entire tile. I am using custom avatar images I uploaded to tiny pic if that matters. Is there a way I can just make the green tile all yellow for let’s say my Housesitter mode icon?

2 Likes

I am intrigued by your Rachio and “turn off sprinklers” tiles! Are these simple links, or there is some deeper integration?

1 Like

Thanks! The Rachio link is just opening up the Rachio app on my iPad. I realized after I did this that the app only opens in Portrait mode which doesn’t help me considering I have it mounted in Landscape mode. The Stop All Sprinklers tile is a virtual switch tied to an IFTTT recipe that stops my sprinklers.

I started working on my own little device handler for Rachio, using their official API. Will share whatever progress I achieve.

You might want to hold off. @tonesto7 has been working extensively with @franzgarsombke from Rachio and it’s been submitted to Smartthings for official certification. I was involved in testing the beta and can tell you it worked extremely well. @Tyler Any update on when this will be officially published? Summer is coming to an end and you will lose a lot of valuable testers in the Northeast very soon :slight_smile:

3 Likes

I heard of that project, but as you said, our summer is coming to an end.
Plus, I just want to play with it all – Groovy, ST, and a bit custom CSS for Smart Tiles :slight_smile:

Eventually, I think Smart Tiles is how this integration will be used the most - by my wife.

1 Like

It’s funny b/c my wife was a strong opponent of the tablet on the wall but I finally convinced her. Yet, she struggles using any of the mobile apps since she never signs into them, so she is always logged out, forgets how to use them, etc. The tablet on the wall with a clean looking dashboard is great for housemates, guests to control home automation easily without fumbling around with apps, etc.

Here is how my dashboard finally came out. Unfortunately, I am waiting for a replacement iPad mini 3 since TouchID was broken on this unit. I got rid of my SimpliSafe Keypad as well. I will jailbreak the iPad and use Activator to long press home button to fire up SimpliSafe app with fingerprint security :slight_smile:

3 Likes

My wife loves the Rachio app, especially being able to kick off 5-min ad-hoc watering runs after she is done working in the garden. She is ALWAYS planting something new or moves existing stuff around, and I am always in the catch-up mode, reconfiguring the zones, and moving sprinkler heads around, changing sprinklers to drip etc.

Putting these controls on a kitchen wall (along with last watering times, and eventually, soil humidity numbers) will make me a HERO! (spoiler: (at least I hope! :slight_smile: ))

2 Likes

@Mbhforum I really admire the setup, and I’m trying to get mine there too. Can I ask what your Ring tile does, and further how you got it installed? I’ve been trying to get mine integrated into the dashboard on my SmartTiles on an Android tablet, but haven’t found anything and don’t think I have the know-how to get it there.

On a separate note, I’ve been combing through the thread, and found many useful ideas I’ve put to use so far. This is a gold mine. I’m wondering if anyone can point me to where info on changing the size of icons can be found, if that’s possible? Thanks everyone.

Thanks! The tile is simply a shortcut to the Ring app installed on my iPad.

You have to create a web link in your dashboard using the URL: “Ring://”.

The custom CSS code is: (You will have to specify the data-link # that you used to create the web link. In my case it was Link 2. (see below)

.tile.link[data-link-i=“2”] .icon a i::before {content: url(http://i67.tinypic.com/25ywtnl.png); position: relative; left: -20px; top: 30px;}

Thanks for the quick response. It looks like I did it correctly- it works on my iPhone. I think I need to do some digging in order to figure out how to get a url to call an app on an Android though, as it appears dead on my tablet.

1 Like