Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
1115

Thanks @Stroh

I actually started customizing this myself using @diehllane’s awesome CSS guide. I’ve had some good success using the below code. I basically set the inactive states of my motion, contact, and presence sensors to black. Works well. My fingers are crossed that you can figure out how to change the color/opacity of the tile label based on state. That would pretty much make this complete! I’ll poke around myself as well.

/* Changes to Slate Theme (white on black) */
.theme-slate .ui-page.ui-page-theme-a.ui-page-active {background-color: black}
.theme-slate .tile {background-color: black;}
.theme-slate .ui-page-theme-a .tile.active .ui-slider-track .ui-btn-active {background-color: white; opacity: 1.0;}
.theme-slate .ui-page-theme-a .ui-slider-track .ui-btn-active {background-color: white; opacity: 0.3;}
.theme-slate .tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: white; opacity: 1.0;}
.theme-slate .ui-slider-handle.ui-btn.ui-shadow {background-color: white; opacity: 0.7;}
.theme-slate .ui-page-theme-a .tile.active .ui-bar-inherit {background-color: gray; opacity: 1.0;}
.theme-slate .ui-page-theme-a .ui-bar-inherit {background-color: white; opacity: 0.3;}
.theme-slate .tile.active .icon i.active {color: white;}
.presence .icon i.inactive:before {color: black;}
.motion .icon i.inactive:before {color: black;}
.contact .icon i.inactive:before {color: black;}
.tile.switch[data-device='8c89dc81-585a-4383-ba2c-b96d33fced56'] .icon i.active:before {color: white;}
.tile.switch[data-device='8c89dc81-585a-4383-ba2c-b96d33fced56'].active {background-color: red;}

I’m making the background of my siren tile turn red if it goes off.

The one thing I am struggling with is customizing the icons. Using FA icons or external URLs just doesn’t seem to be working for me. Most of the time i’m not getting a change, but when I did, I was getting multiple FA icons in there. Is there a trick to it?

Here’s an example of what i’m using. Any thoughts? Is there something wrong with this code or something within the previous theme maybe?:

.tile.switch[data-device='8c89dc81-585a-4383-ba2c-b96d33fced56'] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Health & Wellness/health9-icn@2x.png);}

Thanks for all your help!!

2 Likes