Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
#1981

How did you do this, are you able to share the custom code?

#1982

Sure! Which bit?

#1983

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?

#1984 
/*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)
}
#1985

How do you go back to default if I mess something up?

#1986

just delete the custom CSS and start again

#1987

thank you, will let you know if I have any other questions.

#1988

from what website did you use to get the 7 day weather forecast?

1 Like
#1989

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?

#1990

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:

2 Likes
#1991

Thank you.

#1992

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?

#1993

It’s probably more sensible to do so, yes… unless you’re changing all devices of that type.

1 Like
#1994

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.

#1995

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.

1 Like
#1996

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}

#1997

To get the device ID, open the IDE go to that device. Look at your browser URL. The device ID is in there.

#1998

Thanks, I was using the device network Id. Got it working, but my icons are way too big :frowning:

@NOITAIDAR can you share your garage icons?

#1999
2 Likes
#2000

So edit them down to the right size.
I think it’s like 75x100 or something like that.

It’s on the css site.

1 Like