How did you do this, are you able to share the custom code?
Sure! Which bit?
specifically how to resize video tiles, and how did you get the garage door icon to show as a garage door? I am not familiar with CSS so any help you can give would be awesome. I love the overlay of the video with the thermostat. Are you able to send me something that I can just upload and then it is done?
/*Garage icon*/
.tile.contact[data-device='71dbe181-1cbc-4492-8e58-0eccdf368a8a'] .icon i.active:before {content : url(http://192.168.1.6/garage_open.png);}
.tile.contact[data-device='71dbe181-1cbc-4492-8e58-0eccdf368a8a'] .icon i.inactive:before {content: url(http://192.168.1.6/garage_closed.png);}
.tile.contact[data-device='71dbe181-1cbc-4492-8e58-0eccdf368a8a'] .icon {top : 73px; left: -10px}
/*Increase width of video elements*/
.video.mjpeg.tile.h2.w3 { /*increase height of video elements and allow overlapping*/
width: 508px;
height: 320px;
}
to do the overlay, change the video part instead like this: (it changes the width of the video container to be larger than the video tile),
.video.mjpeg.tile.h2.w3 { /*increase height of video elements and allow overlapping*/
overflow: visible;
height: 320px;
}
.video-container { /*Increase width of video elements*/
width: 508px;
}
.tile.dimmerLight[data-device='819bcfc7-a071-4d3b-b171-56d97033f2c2'] { /*Make Tiles transparent*/
background: transparent;
}
For the Garage icon, you will need to inspect the source code of your dashboard to get the data-device code of your particular device. If it shows up rotated 45 degrees, you might need to:
.r45 {
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-o-transform:rotate(0deg);
-ms-transform:rotate(0deg);
transform:rotate(0deg)
}
How do you go back to default if I mess something up?
just delete the custom CSS and start again
thank you, will let you know if I have any other questions.
from what website did you use to get the 7 day weather forecast?
So I just take the below code and paste it in and thats it?
/Garage icon/
.tile.contact[data-device=‘71dbe181-1cbc-4492-8e58-0eccdf368a8a’] .icon i.active:before {content : url(http://192.168.1.6/garage_open.png);}
.tile.contact[data-device=‘71dbe181-1cbc-4492-8e58-0eccdf368a8a’] .icon i.inactive:before {content: url(http://192.168.1.6/garage_closed.png);}
.tile.contact[data-device=‘71dbe181-1cbc-4492-8e58-0eccdf368a8a’] .icon {top : 73px; left: -10px}
I see there is an IP address is that the address of my hub?
You need to change the data-device to be the data-device for your items.
The IP address there is likely a local storage device he has.
You can find some garage door icon options here:
Or even here:
http://scripts.3dgo.net/smartthings/icons/
They can also be found on google. You can either use them from where they are (copying the web address), or upload them to a site like tinypic and use the address it generates.
If you are unfamiliar with the process of doing the CSS, check out the CSS guide on the smarttiles page found here:
Thank you.
If I am reading that correct, I would need to use the device ID for every device on my dashboard that I want to change, is that correct?
It’s probably more sensible to do so, yes… unless you’re changing all devices of that type.
I have a url for an icon and I want to change the background color of the tile when is it active. I cant seem to get it; I can only get it to change the background behind the image not the entire tile.
Try something like this.
.tile.switch.active[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: blue;}
You may also want to specify a .tile.switch.inactive
option as well.
If it’s a different type of device other than switch, just replace switch with the appropriate device type name.
I’m trying to update the garage door icons too, but it doesn’t seem to be taking. My device-ids are 2 digits and not a standard uuid. I assume I have the correct thing?
/*Garage icon*/
.tile.contact[data-device='XX'] .icon i.active:before {content : url(https://maxcdn.icons8.com/app/uploads/2015/12/garage_open3-1.png);}
.tile.contact[data-device='XX'] .icon i.inactive:before {content: url(https://maxcdn.icons8.com/app/uploads/2015/12/garage_closed3-1.png);}
.tile.contact[data-device='XX'] .icon {top : 73px; left: -10px}
.tile.contact[data-device='XX'] .icon i.active:before {content : url(https://maxcdn.icons8.com/app/uploads/2015/12/garage_open3-1.png);}
.tile.contact[data-device='XX'] .icon i.inactive:before {content: url(https://maxcdn.icons8.com/app/uploads/2015/12/garage_closed3-1.png);}
.tile.contact[data-device='XX'] .icon {top : 73px; left: -10px}
To get the device ID, open the IDE go to that device. Look at your browser URL. The device ID is in there.
Thanks, I was using the device network Id. Got it working, but my icons are way too big
@NOITAIDAR can you share your garage icons?
So edit them down to the right size.
I think it’s like 75x100 or something like that.
It’s on the css site.