Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

I just realized the link I posted several post up didn’t post right. So you probably didn’t get all the directions from that post. It’s post number 1160 or there abouts in this thread.

If you read that and use the images I posted as reference you can hopefully figure it out.

2 Likes

Silly question. How did you get that toggle type switch to display?

Not who you asked, but… That is the default icon for a Switch device.

Thanks @TN_Oldman This is really helpful. I was able to get it now. I really appreciate your help. Thanks again.

I was curious for your garage door icon when it is closed is the icon’s opacity less? Above I posted at 1919 my dashboard and garage door icons I added. I was having trouble keeping both the closed icon and the open icons opacity at 100%. I want both of my icons bright and not have it dimmed down when the garage door is closed.
Do you know what I mean?

Stick opacity:1; inside the {}. On both active and active. Custom CSS replaces the standard styles by element, so if you don’t change it, you get the standard.

I tried using the opacity:1; inside of the {} and it didn’t work. Here is the CSS for the off position of my garage door switch.

.tile.switch[data-device=‘ac243a70-cad8-4ef4-9fc8-beb21482e1ae’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Garage%20Door%20Closed_zpsk9yr4axi.png); opacity:1; position: relative; left: -59px; top: 0px;}

Hi can you please share what source you are using for traffic cam and map?

For the large map showing how the traffic is for my route to work I followed the instructions posted above at 1512 by @brumster. Here is the link to take you there. https://community.smartthings.com/t/smarttiles-dashboard-theming-custom-css-and-mounting-hardware-ideas/11222/1526?u=graffix3001

For my traffic cams I found a website which is for traffic cameras in Florida and I used the search box on the top right to enter which Interstate I wanted to us. Its linked here. https://fl511.com/list/cctv?start=0&length=10&order%5Bi%5D=0&order%5Bdir%5D=asc

1 Like

Another issue I am having is after adding 2 lights into my CSS I can’t get the proper images to load up that I created. They should be like all of my other lights that have actual pictures of the lights themselves but they keep loading up as default switch icons.
For all of my icons I made two separate ones. One is the bright icon when the light or switch is on and the other is a less opaque icon. So in my CSS you will see 2 different ones for each icon. The two that I am having issues with are under the LIGHTS section and the bottom 4 CSS codes.
Here is my full CSS if anyone can figure out what I am doing wrong here.

/*** Custom CSS Start ***/

.ui-page {background-image: url(“http://i.imgur.com/WoRwTCH.jpg”); background-attachment: fixed; background-position: center; background-size: cover; background-color: #2d2d2d}

/* FONT */

  • {
    font-family: “HelveticaNeue-Light”, “Helvetica Neue Light”, “Helvetica Neue”, Helvetica, Arial, “Lucida Grande”, sans-serif;
    font-weight: 300; text-transform: uppercase;
    }

/* SLIDERS /
.music .ui-slider.ui-mini{padding:0 10px 10px 40px}
.ui-slider.ui-mini{padding:0 10px 10px 12px}
.ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: rgba(250, 180, 4, 1)} /
active left slider bar /
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#DADADA} /
inactive left slider bar /
.ui-slider-handle.ui-btn.ui-shadow {background-color: #DADADA} /
inactive slider button /
.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: #DADADA} /
active slider button /
.ui-page-theme-a .ui-bar-inherit {background-color: #DADADA} /
inactive right slider bar */
.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: #DADADA}

.footer {color: #DADADA;} /* Footer is the text at the bottom of the tiles and includes the thermometer icon for Temperature tiles /
.tile {background-color: rgba(0, 0, 0, 0.15);}
.weather {background-color: rgba(0, 0, 0, 0.15);}
.clock {background-color: rgba(0, 0, 0, 0.15);}/blue gray/
.presence {background-color: rgba(0, 0, 0, 0.15);}/indigo/
.lock {background-color: rgba(0, 0, 0, 0.15);/red/}
.hello-home {background-color: rgba(0, 0, 0, 0.15);}/purple/
.switch, .dimmer, .momentary, .light {background-color: rgba(0, 0, 0, 0.15);} /green/
.contact {background-color: rgba(0, 0, 0, 0.15);}/pink/
.refresh {background-color: rgba(0, 0, 0, 0.15);} /blue gray/
.temperature {background-color: rgba(0, 0, 0, 0.15);} /amber 900/
.mode {background-color: rgba(0, 0, 0, 0.15);}/deep purple/
.motion {background-color: rgba(0, 0, 0, 0.15);}/blue/
.humidity {background-color: rgba(0, 0, 0, 0.15);}/brown/
.link {background-color: rgba(0, 0, 0, 0.15);}
.thermostat {background-color: rgba(0, 0, 0, 0.15)} /teal/
.energy {background-color: rgba(0, 0, 0, 0.15)} /l green 800/
.power {background-color: rgba(0, 0, 0, 0.15)} /l green 900/
.water {background-color: rgba(0, 0, 0, 0.15)} /cyan a900/
.music {background-color: rgba(0, 0, 0, 0.15)} /purple a700/
.battery {background-color: rgba(0, 0, 0, 0.15)}
.camera{background-color: rgba(0, 0, 0, 0.15)} /lime/
.video {background-color:rgba(0, 0, 0, 0.15)} /dropcam grey/
.blank.tile{background:none;}
.dashboard {background-color: rgba(0, 0, 0, 0.15);} /
clear */
.switch.active .icon {color:#FFFF00}
.light.active .icon {color:#00FF00}
.dimmerLight.active .icon {color: rgba(250, 180, 4, 1)}
.lock.active .icon {color:#990000}
.dimmer.active .icon {color:#00FF00}
.motion.active .icon {color:#990000}
.contact.active .icon I {color:#990000}
.presence.active .icon {color: #ADFE33}

/* RADARTILE /
.video.tile[data-link-i=“2”] {width:240px;height:120px;} /
Video Tile 2x1 */

/* 7DAYFORECAST /
.video.tile[data-link-i=“1”] {width:240px;height:120px;} /
Video Tile 2x1 */

/* DIMMERSWITCH */
.tile.dimmer[data-device=‘63c021b1-d57e-442b-8e8e-5859b5c4dd7b’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Family%20Room%20Fan%20On_zpsoedofs3k.png); position: relative; left: -45px; top: -2px;}
.tile.dimmer[data-device=‘63c021b1-d57e-442b-8e8e-5859b5c4dd7b’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Family%20Room%20Fan%20Off_zpsrgxgunnc.png); position: relative; left: -45px; top: -2px;}

/* DIMMERLIGHTS */
.tile.dimmerLight[data-device=‘681a225c-f908-4e85-893d-9a2f1c806b2b’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Floor%20Lamp%20On_zpstigxkl94.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘681a225c-f908-4e85-893d-9a2f1c806b2b’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Floor%20Lamp%20Off_zpsmjbfkguj.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘e0237103-6ea1-4072-886d-514ce4a6089b’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/BR%20Night%20Stand%20Light%20On_zpsn4i8lqof.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘e0237103-6ea1-4072-886d-514ce4a6089b’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/BR%20Night%20Stand%20Light%20Off_zpsjjgzxlse.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘b02f5cbc-501d-4b4a-9cd7-3cee74322dcb’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/BR%20Night%20Stand%20Light%20On_zpsn4i8lqof.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘b02f5cbc-501d-4b4a-9cd7-3cee74322dcb’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/BR%20Night%20Stand%20Light%20Off_zpsjjgzxlse.png); position: relative; left: -5px; top: 25px;}
.tile.dimmerLight[data-device=‘03f0e85d-cbb9-48b6-99a9-bc3ba8cab139’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Desk%20Light%20On_zpscnse10rg.png); position: relative; left: -18px; top: 25px;}
.tile.dimmerLight[data-device=‘03f0e85d-cbb9-48b6-99a9-bc3ba8cab139’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Desk%20Light%20Off_zpsn8aj6yns.png); position: relative; left: -18px; top: 25px;}

/* SWITCHES */
.tile.switch[data-device=‘38ee1085-54e7-4d8d-b9e7-b5398fc246a9’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/OTA%20TV%20On_zpslu4lwjnw.png); position: relative; left: -48px; top: 45px;}
.tile.switch[data-device=‘38ee1085-54e7-4d8d-b9e7-b5398fc246a9’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/OTA%20TV%20Off_zpskwt0kcmv.png); position: relative; left: -48px; top: 45px;}
.tile.switch[data-device=‘01bfe67b-6818-42ab-be74-570f19b08ba8’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/HTPC%20On_zps1whe83go.png); position: relative; left: -48px; top: 50px;}
.tile.switch[data-device=‘01bfe67b-6818-42ab-be74-570f19b08ba8’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/HTPC%20Off_zpsuhmnihrb.png); position: relative; left: -48px; top: 50px;}
.tile.switch[data-device=‘e6f1b79d-d6e0-4ae1-a4c5-9f5f76c99f1d’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/xbox%20one%20s%20On_zpsd63dctzh.png); position: relative; left: -58px; top: 40px;}
.tile.switch[data-device=‘e6f1b79d-d6e0-4ae1-a4c5-9f5f76c99f1d’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/xbox%20one%20s%20Off_zpsz89pb3xy.png); position: relative; left: -58px; top: 40px;}
.tile.switch[data-device=‘a67a95de-f26f-4c1d-a863-c2f552d4a281’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Security%20Camera%20System%20On_zpsn1k2ukp1.png); position: relative; left: -45px; top: 35px;}
.tile.switch[data-device=‘a67a95de-f26f-4c1d-a863-c2f552d4a281’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Security%20Camera%20System%20Off_zpscxnrlqta.png); position: relative; left: -45px; top: 35px;}
.tile.switch[data-device=‘ac243a70-cad8-4ef4-9fc8-beb21482e1ae’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Garage%20Door%20Open_zps1raam4cl.png); position: relative; left: -59px; top: 0px;}
.tile.switch[data-device=‘ac243a70-cad8-4ef4-9fc8-beb21482e1ae’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Garage%20Door%20Closed_zpsk9yr4axi.png); position: relative; left: -59px; top: 0px;}

/* LIGHTS */
.tile.light[data-device=‘b9ccc9a0-0620-47f2-8c47-ca3ba4e9603b’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Porch%20Light%20On_zpsmchxed9n.png); position: relative; left: -5px; top: 25px;}
.tile.light[data-device=‘b9ccc9a0-0620-47f2-8c47-ca3ba4e9603b’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Porch%20Light%20Off_zpstqeireqy.png); position: relative; left: -5px; top: 25px;}
.tile.light[data-device=‘080f7d50-a6f4-486a-925a-bb939d15f35f’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Kitchen%20Light%20On_zps73vsobby.png); position: relative; left: -42px; top: 30px;}
.tile.light[data-device=‘080f7d50-a6f4-486a-925a-bb939d15f35f’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Kitchen%20Light%20Off_zpsvklytwhe.png); position: relative; left: -42px; top: 15px;}
.tile.light[data-device=‘6733ca09-ac0c-4f10-a4b7-d072744063bd’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Entry%20Light%20On_zpstlvl3gi1.png); position: relative; left: -32px; top: 15px;}
.tile.light[data-device=‘6733ca09-ac0c-4f10-a4b7-d072744063bd’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Entry%20Light%20Off_zpstiaegrks.png); position: relative; left: -32px; top: 15px;}
.tile.switch[data-device=‘e054f9bb-e252-45dd-89e2-8ecfd0f37a08’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/TV%20Lights%20On%201_zps4tjg62go.png); position: relative; left: -60px; top: 0px;}
.tile.switch[data-device=‘e054f9bb-e252-45dd-89e2-8ecfd0f37a08’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/TV%20Lights%20Off_zpshn2fdl6x.png); position: relative; left: -60px; top: 0px;}
.tile.switch[data-device=‘b6d60e0d-1522-4afc-8856-2aa4170959c4’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Ceiling%20Light_zps3ivmn6cu.png); position: relative; left: -60px; top: 0px;}
.tile.switch[data-device=‘b6d60e0d-1522-4afc-8856-2aa4170959c4’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Game%20Room%20Ceiling%20Light_zps3ivmn6cu.png); position: relative; left: -60px; top: 0px;}
.tile.switch[data-device=‘3ade100d-b992-474c-8af3-1c9b96ca6a96’] .icon i.active:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Family%20Room%20Light%20On_zpstnu3hkom.png); position: relative; left: -60px; top: 0px;}
.tile.switch[data-device=‘3ade100d-b992-474c-8af3-1c9b96ca6a96’] .icon i.inactive:before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Family%20Room%20Light%20On_zpstnu3hkom.png); position: relative; left: -60px; top: 0px;}

/* Links to Other Dashboards */

/* Weather */
.dashboard.tile[data-link-i=“1”] .icon a i::before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Weather%20Icon_zpsjlygvkp4.png); position: relative; left: -46px; top: 20px;}

/* Traffic */
.dashboard.tile[data-link-i=“2”] .icon a i::before {content: url(http://i762.photobucket.com/albums/xx268/graffix3001/Smart%20Home%20Icons/Traffic%20Icon_zpszzjkjtau.png); position: relative; left: -46px; top: 20px;}

/*** Custonm CSS End *****/

Do they give the default switch icons for both on and off states? Or only one?
Have you tried hitting Refresh on the dashboard to see if that corrects it at all?

Mine will sometimes load up without icons at all in a couple tiles (generally my GCal tiles). A refresh fixes that for me.

EDIT: Also… I see that they are listed as tile.switch
Are they switch or light tiles? If you don’t have the right tile type in the CSS, it will show up as default, even if your device ID is correct

1 Like

The default icon is being used on both on and off states. The on state is highlighted in bright green which I think reflects a color I have way at the beginning of my CSS.

refreshing doesn’t fix the icons. These were the two most recent ones I have added and I’ve never seen the correct icons for them.

In my CSS I have them listed as tile.switch because they are actually wall switches that control the lights. I will try switching them to tile .light and see if that does anything.

@diehllane that’s exactly what it was. After switching it to tile.light they are both showing now. Thanks a lot.

2 Likes

Hey @tgauchat, any updates on whether ActionTiles will support CSS from launch yet? and If not, how long?

Thanks @625alex. Any chance that’ll fall within the introductory pricing window?

No, no chance :blush:

That looks awesome, what version of smart tiles are you on? The new actionTiles version is being released soon.

1 Like

is there any way that I can add an iframe to the dashboard to show my wifi status?

Well I don’t think the people in this thread will be too pleased with ActionTiles. I just got my code, and logged in. For a basic web controlled interface it’s cool I suppose but its got no CSS currently, and customization options are very few and far between right now.

Ps here is a share of what I have setup with Smarttiles. I can’t get even close in ActionTiles.

I have a unique situation in the basement of the house we moved into. The wiring for the basement lights is in weird sections, for instance the room is long and skinny, but the lights were done in 3 sections, 1 infront of a bookcase, 1 along the outside of both walls, and 1 down the middle. Well when you divide the room into usable pieces you want half the room to light up at a time. instead of opening sheetrock and rewiring the lights correctly, I decided to put in all smart bulbs. I used GE Link lights and they work pretty well. though sometimes the brightness/dim levels get a little screwy.

So I wanted a panel to control just this room, and here is what I came up with. I was hoping actiontiles would let me do this, but right now it won’t so I will keep working around the login issue with smarttiles and continue using smarttiles.

http://www.bsbcholder.com/Panels/Basement/basedash.jpg

3 Likes

I love your setup, Brian… amazing!

Custom CSS users represent less than 4% of SmartTiles users. In order to get ActionTiles launched, usable by “the average Customer” (i.e., the 96%), we needed to defer the degree of customization that y’all have been able to accomplish with the less complex SmartTiles platform.

We’re very interested in incrementally reaching more and more customizability. The success of ActionTiles will justify resourcing this ongoing improvement effort.