Customizing CSS

by Brian Diehl

To add or edit the Custom CSS of each of your SmartTiles Dashboards, visit your dashboard in a browser but change the letters “ui” in the URL address bar to “css“, as in:

https://graph.api.smartthings.com/ api/smartapps/installations/ 575-dashboard-unique-id-6a4/ css?access_token=6ab-your-secret-token-999

I threw this guide together fairly quickly, but it should help most people with basic CSS changes for their dashboards. It doesn’t include everything, most notably Video Tiles and Thermostats as I have neither hooked up to ST.

The purpose here is to provide working samples of CSS that can be copied, pasted, and easily updated by any user. I highly recommend completing your CSS changes in a text editor so that you can use the Find and Replace feature to change colors quickly.

This was put together with CSS snippets posted by other SmartTiles users as well as the code I put together myself for my dashboard use. Thanks to @pmjoen for contributing the Sliders, Icon Opacity, Weather, and Battery colors based on data value sections. Thanks to @darcranger for the Smart Home Monitor, Power Meter, Battery font awesome icons based on data values, and Temperature colors based on data value sections.

I’ll add snippets for both FA (Font Awesome) and URL Images as your content for different devices. Font Awesome items can be copied and pasted from the Font Awesome Cheatsheet found here: http://fontawesome.io/cheatsheet/. Make sure you are copying the icon and not the name or alias. It likely won’t show up properly for you when you’re editing, but once you save and refresh your Dashboard, it will be there.

For custom icons, I definitely recommend using TinyPic if you aren’t sure about re-sizing them. You can use the Avatar option and it will resize it to 100px x 75px, which is perfect for a standard 1×1 small tile. You can also use the SmartThings icons from here: http://scripts.3dgo.net/smartthings/icons/. For these, just copy and paste the full web address in the bottom box for each icon.

Here are some custom icons provided by @pmjoen:

Colors can be entered either as Hex values or using color names. Here’s a link for sports fans to set up colors based on their favorite teams: http://teamcolors.arc90.com/

Everything inside of /* and */ is a comment. These are just notes that explain what different parts of CSS do.

/* BEGIN CUSTOM CSS */
/* Main Tile Parts */
.title {color: red;} /* Title is the text at the top of the tiles */
.footer {color: #FF0000;} /* Footer is the text at the bottom of the tiles and includes the thermometer icon for Temperature tiles */

/* Pop-Up Menus */
.ui-li-static {
height:150px;
width:300px;
font-size:40px;} /* This will increase the pop-up menu size and also increase the text in it. These menus are used for Mode selection and Routines. */

/* Modes using Font Awesome */
.icon.Home i::before {content: " ";} /* Although all you see is a box here, this is actually a Font Awesome icon. You can put any Font Awesome icon from the cheatsheet in here and have it displayed. It goes in between the 2 sets of double quotes. */
.icon.Away i::before {content: " ";}
.icon.Night i::before {content: " ";}
.mode.Away .fa {color: gray;} /* This will change the color for your Font Awesome icons. You can change it per mode. */
.mode.Home .fa {color: white;}
.mode.Night .fa {color: #003399;}

/* Modes using Custom Pic URLs */
.icon.Home i::before {content: url(http://www.yourdomainhere);} /* You can use images instead of Font Awesome icons. If the icons are not centered, you can use the code on the next line to move it around. */
.icon.Away i::before {content: url(http://www.yourdomainhere); position: relative; left: -18px; top: 20px;} /* The extra code here is for adjusting position of the icon. It references left and top locations and is counted in pixels (px). */
.icon.Night i::before {content: url(http://www.yourdomainhere);}

/* Non-specific tile changes. Note: These will change ALL tiles of that type. Look further down to find out how to change specific individual tiles of a certain type. You can add the code for content to any of these items and it will change the content for ALL devices of that specific type. My example will have it only for Other Dashboards. I will also have an example on the Presence sensor tile showing you can have one type of content for Active and a different for Inactive. */

/* Change Title Color When Active */
.switch.tile.active .title { color: red;}  /*This will change the Title on the given tile type to the color specified only when active. This could be used with other tile types that show On/Off or Active/Inactive such as lights, dimmerlights, dimmers, motion, power meters, etc. */

/* Power Meters */
.power .icon {color: #D7A22A;} /* Although this says icon, by default this is the text in the center of the power meter tile. */
.power .fa {color: #D7A22A;} /* This will change the color of the Font Awesome icon (lightning bolt) for your power meters. */
.power.inactive {background-color:green;} /* This will set the background color of any Active power meter to the color specified. */
.power[data-value='0W'] {background-color: white;} /* This will set the background color of any power meter that has a data value of 0W (inactive) to the color specified. */

/* Energy Meters */
.tile.energy {background-color: white;} /* This will set the background color for all energy meter tiles to the specified color. */
.energy .icon {color: #D7A22A;} /* Although this says icon, by default this is the text in the center of the energy meter tile. */
.energy .fa {color: #D7A22A;} /* This will change the color of the Font Awesome icon (double lightning bolt) for your energy meter tiles. */

/* Other Dashboards */
.tile.dashboard {background-color: white;} /* This will change the background color for other Linked Dashboards. */
.tile.dashboard .fa {color: black;} /* This will change the Font Awesome icon color for other Linked Dashboards. */

/* Routines */
.hello-home .icon {color: #006778;} /* This will change the background color for Routines (formerly called Hello-Home phrases). */
.hello-home .fa {color: #006778;} /* This will change the icon color for Routines. */

/* Link */
.tile.link {background-color: white;} /* This will change the background color for external weblinks. */
.link .icon {color: #D7A22A;} /* This will change the icon color for external weblinks. */

/* Refresh */
.tile.refresh {background-color: white;} /* This will change the background color for the Refresh tile. */
.refresh .icon {color: #D7A22A;} /* This will change the icon color for the Refresh tile. */
.refresh .fa {color: #D7A22A;} /* This will change the Font Awesome icon color for the Refresh tile. */

/* Clock */
.tile.clock {background-color: white;} /* This will change the background color for the Clock tile. */
.clock .icon {color: #D7A22A;} /* This will change the icon color for the Clock tile. */

/* History */
.tile.history {background-color: white;} /* This will change the background color for the Event History tile. */
.history .icon {color: #D7A22A;} /* This will change the icon color for the Event History tile. */

/* Weather - Basic. For more advanced weather control, please scroll down. */
.tile.weather {background-color: white;} /* This will change the background color for a Smartweather Tile. */
.weather .icon {color: #D7A22A;} /* This will change the icon color for a Smartweather Tile. */
.weather .fa {color: #D7A22A;} /* This will change the Font Awesome icon color for a Smartweather Tile. This includes things like the Umbrella. */

/* Camera */
.tile.camera {background-color: white;} /* This will change the background color for Camera tiles. Note that this is NOT for video cameras, but for cameras that can take a still photo when the tile is pressed. */
.camera .icon {color: #006778;} /* This will change the icon color for Camera tiles. */

/* Temperature */
.tile.temperature {background-color: black;} /* This will change the icon color for Temperature sensor tiles. Further down is a guide for changing the color of the text based on the data value (temperature display). */

/* Smart Home Monitor */
.tile.alarm {background-color: white;} /* This will change the background color for Smart Home Monitor. */
.alarm[data-status="away"] .icon i.active:before {color: #FF0000;}     /* This will change the icon color for Armed (Away) mode. */
.alarm[data-status="stay"] .icon i.active:before {color: blue;}        /* This will change the icon color for Armed (Stay) mode. */
.alarm[data-status="off"] .icon i.inactive:before {color: #32CD32;}    /* This will change the icon color for Disarmed mode. */

/* Contact Sensors */
.tile.contact {background-color: white;} /* This will change the background color for all Contact Sensor tiles (Open/Close Door and Window Sensors). */
.contact .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Open) Contact Sensor tiles. */
.contact .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Closed) Contact Sensor tiles. */

/* Motion Sensors */
.tile.motion {background-color: white;} /* This will change the background color for Motion Sensor tiles. */
.motion .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Motion Active) Motion Sensor tiles. */
.motion .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Motion Inactive) Motion Sensor tiles. */

/* Accelerometers */
.tile.acceleration {background-color: white;} /* This will change the background color for Accelerometer (Vibration) sensor tiles. */
.acceleration .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Vibration detected) Accelerometer sensor tiles. */
.acceleration .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Vibration not detected) Accelerometer sensor tiles. */

/* Lights */
.tile.light {background-color: white;} /* This will change the background color for Light tiles. */
.light .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Light tiles. */
.light .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Light tiles. */

/* Switches */
.tile.switch {background-color: white;} /* This will change the background color for Switch tiles. */
.switch .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Switch tiles. */
.switch .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Switch tiles. */

/* Dimmable Lights */
.tile.dimmerLight {background-color: white;} /* This will change the background color for Dimmable Light tiles. */
.dimmerLight .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Dimmable Light tiles. */
.dimmerLight .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Dimmable Light tiles. */

/* Water Sensors */
.tile.water {background-color: white;} /* This will change the background color for Water tiles. */
.water .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Wet) Water tiles. */
.water .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Dry) Water tiles. */

/* Locks */
.tile.lock {background-color: white;} /* This will change the background color for Lock tiles. */
.lock .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Locked) Lock tiles. */
.lock .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Unlocked) Lock tiles. */

/* Presence Sensors */
.tile.presence {background-color: white;} /* This will change the background color for Presence tiles. */
.presence .icon i.active:before {content : url(http://cdn.device-icons.smartthings.com/People/people1-icn@2x.png); position: relative; top: 27px; left: -18px;} /* This will change the icon to a custom icon for when Presence is detected. This icon is from SmartThings. */
.presence .icon i.inactive:before {color: #9F792C; content : " "; color: gray;} /* This will change the icon to a custom Font Awesome icon and to the color specified when Presence is not detected (Away). */

/* Battery Tiles - Basic. For more battery customization, please scroll down. */
.tile.battery {background-color: blue;} /* This will change the background color for Battery Tiles. */
.battery .icon {color: FF0000;} /* This will change the color of the icon (text representation of battery percentage) for Battery Tiles. This can also be configured to change color based on the data value (See below example for Temperature Sensor). */
.batt svg {
width: 16px;
height: 16px;
transform: rotate(270deg);} /* This will change the width, height, and orientation of the battery icon in the bottom left corner of a Battery Tile. */
.batt path {fill: white;} /* This will change the color of the battery fill (small bars representing battery level). */

/* Temperature Sensor Text Color Based on Data Value (Temperature Reading) */
.temperature[data-value='140°'] .icon {color: #FF0040}
.temperature[data-value='139°'] .icon {color: #FF0038}
.temperature[data-value='138°'] .icon {color: #FF0030}
.temperature[data-value='137°'] .icon {color: #FF0028}
.temperature[data-value='136°'] .icon {color: #FF0020}
.temperature[data-value='135°'] .icon {color: #FF0018}
.temperature[data-value='134°'] .icon {color: #FF0010}
.temperature[data-value='133°'] .icon {color: #FF0008}
.temperature[data-value='132°'] .icon {color: #FF0000}
.temperature[data-value='131°'] .icon {color: #FF0500}
.temperature[data-value='130°'] .icon {color: #FF0A00}
.temperature[data-value='129°'] .icon {color: #FF0F00}
.temperature[data-value='128°'] .icon {color: #FF1400}
.temperature[data-value='127°'] .icon {color: #FF1900}
.temperature[data-value='126°'] .icon {color: #FF1E00}
.temperature[data-value='125°'] .icon {color: #FF2300}
.temperature[data-value='124°'] .icon {color: #FF2800}
.temperature[data-value='123°'] .icon {color: #FF2D00}
.temperature[data-value='122°'] .icon {color: #FF3200}
.temperature[data-value='121°'] .icon {color: #FF3700}
.temperature[data-value='120°'] .icon {color: #FF3C00}
.temperature[data-value='119°'] .icon {color: #FF4100}
.temperature[data-value='118°'] .icon {color: #FF4600}
.temperature[data-value='117°'] .icon {color: #FF4B00}
.temperature[data-value='116°'] .icon {color: #FF5000}
.temperature[data-value='115°'] .icon {color: #FF5500}
.temperature[data-value='114°'] .icon {color: #FF5A00}
.temperature[data-value='113°'] .icon {color: #FF5F00}
.temperature[data-value='112°'] .icon {color: #FF6400}
.temperature[data-value='111°'] .icon {color: #FF6900}
.temperature[data-value='110°'] .icon {color: #FF6E00}
.temperature[data-value='109°'] .icon {color: #FF7300}
.temperature[data-value='108°'] .icon {color: #FF7800}
.temperature[data-value='107°'] .icon {color: #FF7D00}
.temperature[data-value='106°'] .icon {color: #FF8200}
.temperature[data-value='105°'] .icon {color: #FF8700}
.temperature[data-value='104°'] .icon {color: #FF8C00}
.temperature[data-value='103°'] .icon {color: #FF9100}
.temperature[data-value='102°'] .icon {color: #FF9600}
.temperature[data-value='101°'] .icon {color: #FF9B00}
.temperature[data-value='100°'] .icon {color: #FFA000}
.temperature[data-value='99°'] .icon {color: #FFA500}
.temperature[data-value='98°'] .icon {color: #FFAA00}
.temperature[data-value='97°'] .icon {color: #FFAF00}
.temperature[data-value='96°'] .icon {color: #FFB400}
.temperature[data-value='95°'] .icon {color: #FFB900}
.temperature[data-value='94°'] .icon {color: #FFBE00}
.temperature[data-value='93°'] .icon {color: #FFC300}
.temperature[data-value='92°'] .icon {color: #FFC800}
.temperature[data-value='91°'] .icon {color: #FFCD00}
.temperature[data-value='90°'] .icon {color: #FFD200}
.temperature[data-value='89°'] .icon {color: #FFD700}
.temperature[data-value='88°'] .icon {color: #FFDC00}
.temperature[data-value='87°'] .icon {color: #FFE100}
.temperature[data-value='86°'] .icon {color: #FFE600}
.temperature[data-value='85°'] .icon {color: #FFEB00}
.temperature[data-value='84°'] .icon {color: #FFF000}
.temperature[data-value='83°'] .icon {color: #FFF500}
.temperature[data-value='82°'] .icon {color: #FFFA00}
.temperature[data-value='81°'] .icon {color: #FEFC00}
.temperature[data-value='80°'] .icon {color: #FDFF00}
.temperature[data-value='79°'] .icon {color: #EAFF00}
.temperature[data-value='78°'] .icon {color: #D7FF00}
.temperature[data-value='77°'] .icon {color: #C3FF00}
.temperature[data-value='76°'] .icon {color: #B0FF00}
.temperature[data-value='75°'] .icon {color: #9DFF00}
.temperature[data-value='74°'] .icon {color: #8AFF00}
.temperature[data-value='73°'] .icon {color: #77FF00}
.temperature[data-value='72°'] .icon {color: #65FF00}
.temperature[data-value='71°'] .icon {color: #51FF00}
.temperature[data-value='70°'] .icon {color: #3EFF00}
.temperature[data-value='69°'] .icon {color: #2AFF00}
.temperature[data-value='68°'] .icon {color: #17FF00}
.temperature[data-value='67°'] .icon {color: #0BFF08}
.temperature[data-value='66°'] .icon {color: #00FF10}
.temperature[data-value='65°'] .icon {color: #00FF23}
.temperature[data-value='64°'] .icon {color: #00FF36}
.temperature[data-value='63°'] .icon {color: #00FF49}
.temperature[data-value='62°'] .icon {color: #00FF5C}
.temperature[data-value='61°'] .icon {color: #00FF6F}
.temperature[data-value='60°'] .icon {color: #00FF83}
.temperature[data-value='59°'] .icon {color: #00FF95}
.temperature[data-value='58°'] .icon {color: #00FFA8}
.temperature[data-value='57°'] .icon {color: #00FFBC}
.temperature[data-value='56°'] .icon {color: #00FFD0}
.temperature[data-value='55°'] .icon {color: #00FFE2}
.temperature[data-value='54°'] .icon {color: #00FFF4}
.temperature[data-value='53°'] .icon {color: #00F1F9}
.temperature[data-value='52°'] .icon {color: #00E4FF}
.temperature[data-value='51°'] .icon {color: #00DCFF}
.temperature[data-value='50°'] .icon {color: #00D4FF}
.temperature[data-value='49°'] .icon {color: #00CCFF}
.temperature[data-value='48°'] .icon {color: #00C4FF}
.temperature[data-value='47°'] .icon {color: #00BCFF}
.temperature[data-value='46°'] .icon {color: #00B4FF}
.temperature[data-value='45°'] .icon {color: #00ACFF}
.temperature[data-value='44°'] .icon {color: #00A4FF}
.temperature[data-value='43°'] .icon {color: #009CFF}
.temperature[data-value='42°'] .icon {color: #0094FF}
.temperature[data-value='41°'] .icon {color: #008CFF}
.temperature[data-value='40°'] .icon {color: #0084FF}
.temperature[data-value='39°'] .icon {color: #007CFF}
.temperature[data-value='38°'] .icon {color: #0074FF}
.temperature[data-value='37°'] .icon {color: #006CFF}
.temperature[data-value='36°'] .icon {color: #0064FF}
.temperature[data-value='35°'] .icon {color: #005CFF}
.temperature[data-value='34°'] .icon {color: #0054FF}
.temperature[data-value='33°'] .icon {color: #004CFF}
.temperature[data-value='32°'] .icon {color: #0044FF}
.temperature[data-value='31°'] .icon {color: #003BFF}
.temperature[data-value='30°'] .icon {color: #0032FF}
.temperature[data-value='29°'] .icon {color: #002AFF}
.temperature[data-value='28°'] .icon {color: #0022FF}
.temperature[data-value='27°'] .icon {color: #001AFF}
.temperature[data-value='26°'] .icon {color: #0012FF}
.temperature[data-value='25°'] .icon {color: #000AFF}
.temperature[data-value='24°'] .icon {color: #0002FF}
.temperature[data-value='23°'] .icon {color: #0001FF}
.temperature[data-value='22°'] .icon {color: #0000FF}
.temperature[data-value='21°'] .icon {color: #0000FF}
.temperature[data-value='20°'] .icon {color: #0100FF}
.temperature[data-value='19°'] .icon {color: #0100FF}
.temperature[data-value='18°'] .icon {color: #0200FF}
.temperature[data-value='17°'] .icon {color: #0200FF}
.temperature[data-value='16°'] .icon {color: #0300FF}
.temperature[data-value='15°'] .icon {color: #0300FF}
.temperature[data-value='14°'] .icon {color: #0400FF}
.temperature[data-value='13°'] .icon {color: #0400FF}
.temperature[data-value='12°'] .icon {color: #0500FF}

/* 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: white} /* active left slider bar */
.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#666666} /* inactive left slider bar */
.ui-slider-handle.ui-btn.ui-shadow {background-color: #666666} /* inactive slider button */
.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: white} /* active slider button */
.ui-page-theme-a .ui-bar-inherit {background-color: #666666} /* inactive right slider bar */
.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: white}

/* ICON OPACITY */
.fa-toggle-off {opacity: 1!important} /* Icons no longer transparent */
.fa-toggle-on {opacity: 1!important} /* Icons no longer transparent */
.fa-shield {opacity: 1!important} /* Icons no longer transparent */
.fa-expand {opacity: 1!important} /* Icons no longer transparent */
.fa-compress {opacity: 1!important} /* Icons no longer transparent */
.fa-lightbulb-o {opacity: 1!important} /* Icons no longer transparent */
.fa-tint {opacity: 1!important} /* Icons no longer transparent */
.fa-exchange {opacity: 1!important} /* Icons no longer transparent */

/* WEATHER */
.weather[data-weather='mostlycloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on mostly-cloudy conditions */
.weather[data-weather='nt_partlycloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on partly-cloudy conditions */
.weather[data-weather='cloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on cloudy conditions */
.weather[data-weather='fog'] {background-color: #D3D3D3} /* Changes the tile background color based on fog conditions */
.weather[data-weather='rain'] {background-color: #6666CE} /* Changes the tile background color based on rain conditions */
.weather[data-weather='clear'] {background-color: #FFD700} /* Changes the tile background color based on clear conditions */
.weather[data-weather='sunny'] {background-color: #FFD700} /* Changes the tile background color based on sunny conditions */
.weather[data-weather='snow'] {background-color: #FFFFFF} /* Changes the tile background color based on snow conditions */

/* Battery - Changes battery value color based on the percentage and change footer icon to custom icon based on URL */
.battery[data-value^='0'] .icon {color: #FF0040} /* Changes battery value color based on percentage */
.battery[data-value^='0'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)} /* Changes battery icon in footer based on percentage */
.battery[data-value^='1'] .icon {color: #FF0040} /* Changes battery value color based on percentage */
.battery[data-value^='1'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='2'] .icon {color: #FF0040} /* Changes battery value color based on percentage */
.battery[data-value^='2'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='3'] .icon {color: #FFD700} /* Changes battery value color based on percentage */
.battery[data-value^='3'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='4'] .icon {color: #FFD700} /* Changes battery value color based on percentage */
.battery[data-value^='4'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='5'] .icon {color: #FFD700} /* Changes battery value color based on percentage */
.battery[data-value^='5'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='6'] .icon {color: #32CD32} /* Changes battery value color based on percentage */
.battery[data-value^='6'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='7'] .icon {color: #32CD32} /* Changes battery value color based on percentage */
.battery[data-value^='7'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='8'] .icon {color: #32CD32} /* Changes battery value color based on percentage */
.battery[data-value^='8'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='9'] .icon {color: #32CD32} /* Changes battery value color based on percentage */
.battery[data-value^='9'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */
.battery[data-value^='10'] .icon {color: #32CD32} /* Changes battery value color based on percentage */
.battery[data-value^='10'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

/* Battery - Changes battery icon to Font Awesome battery icons and changes color and fill amount based on percentage */
.battery[data-value^='0'] .batt:after {content:""; color: #FA0000}
.battery[data-value^='0'] .batt svg {display: none;}
.battery[data-value^='1'] .batt:after {content:""; color: #FB3300}
.battery[data-value^='1'] .batt svg {display: none;}
.battery[data-value^='2'] .batt:after {content:""; color: #FC6600}
.battery[data-value^='2'] .batt svg {display: none;}
.battery[data-value^='3'] .batt:after {content:""; color: #FD9900}
.battery[data-value^='3'] .batt svg {display: none;}
.battery[data-value^='4'] .batt:after {content:""; color: #FECC00}
.battery[data-value^='4'] .batt svg {display: none;}
.battery[data-value^='5'] .batt:after {content:""; color: #FFFF00}
.battery[data-value^='5'] .batt svg {display: none;}
.battery[data-value^='6'] .batt:after {content:""; color: #CCFF00}
.battery[data-value^='6'] .batt svg {display: none;}
.battery[data-value^='7'] .batt:after {content:""; color: #99FF00}
.battery[data-value^='7'] .batt svg {display: none;}
.battery[data-value^='8'] .batt:after {content:""; color: #66FF00}
.battery[data-value^='8'] .batt svg {display: none;}
.battery[data-value^='9'] .batt:after {content:""; color: #33FF00}
.battery[data-value^='9'] .batt svg {display: none;}
.battery[data-value^='10'] .batt:after {content:""; color: #00FF00}
.battery[data-value^='10'] .batt svg {display: none;}

/* Specific Device Tile Manipulation */
/* Change the tile type to suit the needs based on what device you are using. Then you will add in the device ID between the 2 single quotes (replacing all of the X's). */
/* This example will show using Font Awesome icons. */

/* My Light Switch */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: #464646} /* This will change the background color for the specific switch tile whose device ID matches the data-device you enter. */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: " ";} /* This will change the Active Switch to the Font Awesome icon selected. A color tag can also be added. */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content: " ";} /* This will change the Inactive Switch to the Font Awesome icon selected. A color tag can also be added. */

/* This example will show using Custom Icon URLs. */

/* My Dimmable Light */
.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: white;} /* This will change the background color for the specific Dimmable Light tile whose device ID matches the data-device you enter. */
.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Lighting/light11-icn@2x.png);position: relative; left: -20px; top: 27px;} /* This will change the Active (On) Icon to match the URL and also adjust its location to be centered. */
.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {{content: url(http://cdn.device-icons.smartthings.com/Lighting/light20-icn@2x.png);position: relative; left: -20px; top: 27px;} /* This will change the Inactive (Off) Icon to match the URL and also adjust its location to be centered. */

/* This example will show using a Custom Icon URL for Active and using the default icon for Inactive. */

/* Vacuum Cleaner */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: #464646} /* This will change the background color for the specific Switch tile whose device ID matches the data-device you enter. */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Appliances/appliances13-icn@2x.png);} /* This will change the Active (On) Switch icon to match the URL image. */
.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content: " ";} /* This will change the Inactive (Off) Switch icon to match the Font Awesome icon. A color tag may be added. */
 

/* END CUSTOM CSS */

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

248

249

250

251

252

253

254

255

256

257

258

259

260

261

262

263

264

265

266

267

268

269

270

271

272

273

274

275

276

277

278

279

280

281

282

283

284

285

286

287

288

289

290

291

292

293

294

295

296

297

298

299

300

301

302

303

304

305

306

307

308

309

310

311

312

313

314

315

316

317

318

319

320

321

322

323

324

325

326

327

328

329

330

331

332

333

334

335

336

337

338

339

340

341

342

343

344

345

346

347

348

349

350

351

352

353

354

355

356

357

358

359

360

361

362

363

364

365

366

367

368

369

370

371

/* BEGIN CUSTOM CSS */

/* Main Tile Parts */

.title {color: red;} /* Title is the text at the top of the tiles */

.footer {color: #FF0000;} /* Footer is the text at the bottom of the tiles and includes the thermometer icon for Temperature tiles */

/* Pop-Up Menus */

.ui-li-static {

height:150px;

width:300px;

font-size:40px;} /* This will increase the pop-up menu size and also increase the text in it. These menus are used for Mode selection and Routines. */

/* Modes using Font Awesome */

.icon.Home i::before {content: " ";} /* Although all you see is a box here, this is actually a Font Awesome icon. You can put any Font Awesome icon from the cheatsheet in here and have it displayed. It goes in between the 2 sets of double quotes. */

.icon.Away i::before {content: " ";}

.icon.Night i::before {content: " ";}

.mode.Away .fa {color: gray;} /* This will change the color for your Font Awesome icons. You can change it per mode. */

.mode.Home .fa {color: white;}

.mode.Night .fa {color: #003399;}

/* Modes using Custom Pic URLs */

.icon.Home i::before {content: url(http://www.yourdomainhere);} /* You can use images instead of Font Awesome icons. If the icons are not centered, you can use the code on the next line to move it around. */

.icon.Away i::before {content: url(http://www.yourdomainhere); position: relative; left: -18px; top: 20px;} /* The extra code here is for adjusting position of the icon. It references left and top locations and is counted in pixels (px). */

.icon.Night i::before {content: url(http://www.yourdomainhere);}

/* Non-specific tile changes. Note: These will change ALL tiles of that type. Look further down to find out how to change specific individual tiles of a certain type. You can add the code for content to any of these items and it will change the content for ALL devices of that specific type. My example will have it only for Other Dashboards. I will also have an example on the Presence sensor tile showing you can have one type of content for Active and a different for Inactive. */

/* Change Title Color When Active */

.switch.tile.active .title { color: red;} /*This will change the Title on the given tile type to the color specified only when active. This could be used with other tile types that show On/Off or Active/Inactive such as lights, dimmerlights, dimmers, motion, power meters, etc. */

/* Power Meters */

.power .icon {color: #D7A22A;} /* Although this says icon, by default this is the text in the center of the power meter tile. */

.power .fa {color: #D7A22A;} /* This will change the color of the Font Awesome icon (lightning bolt) for your power meters. */

.power.inactive {background-color:green;} /* This will set the background color of any Active power meter to the color specified. */

.power[data-value='0W'] {background-color: white;} /* This will set the background color of any power meter that has a data value of 0W (inactive) to the color specified. */

/* Energy Meters */

.tile.energy {background-color: white;} /* This will set the background color for all energy meter tiles to the specified color. */

.energy .icon {color: #D7A22A;} /* Although this says icon, by default this is the text in the center of the energy meter tile. */

.energy .fa {color: #D7A22A;} /* This will change the color of the Font Awesome icon (double lightning bolt) for your energy meter tiles. */

/* Other Dashboards */

.tile.dashboard {background-color: white;} /* This will change the background color for other Linked Dashboards. */

.tile.dashboard .fa {color: black;} /* This will change the Font Awesome icon color for other Linked Dashboards. */

/* Routines */

.hello-home .icon {color: #006778;} /* This will change the background color for Routines (formerly called Hello-Home phrases). */

.hello-home .fa {color: #006778;} /* This will change the icon color for Routines. */

/* Link */

.tile.link {background-color: white;} /* This will change the background color for external weblinks. */

.link .icon {color: #D7A22A;} /* This will change the icon color for external weblinks. */

/* Refresh */

.tile.refresh {background-color: white;} /* This will change the background color for the Refresh tile. */

.refresh .icon {color: #D7A22A;} /* This will change the icon color for the Refresh tile. */

.refresh .fa {color: #D7A22A;} /* This will change the Font Awesome icon color for the Refresh tile. */

/* Clock */

.tile.clock {background-color: white;} /* This will change the background color for the Clock tile. */

.clock .icon {color: #D7A22A;} /* This will change the icon color for the Clock tile. */

/* History */

.tile.history {background-color: white;} /* This will change the background color for the Event History tile. */

.history .icon {color: #D7A22A;} /* This will change the icon color for the Event History tile. */

/* Weather - Basic. For more advanced weather control, please scroll down. */

.tile.weather {background-color: white;} /* This will change the background color for a Smartweather Tile. */

.weather .icon {color: #D7A22A;} /* This will change the icon color for a Smartweather Tile. */

.weather .fa {color: #D7A22A;} /* This will change the Font Awesome icon color for a Smartweather Tile. This includes things like the Umbrella. */

/* Camera */

.tile.camera {background-color: white;} /* This will change the background color for Camera tiles. Note that this is NOT for video cameras, but for cameras that can take a still photo when the tile is pressed. */

.camera .icon {color: #006778;} /* This will change the icon color for Camera tiles. */

/* Temperature */

.tile.temperature {background-color: black;} /* This will change the icon color for Temperature sensor tiles. Further down is a guide for changing the color of the text based on the data value (temperature display). */

/* Smart Home Monitor */

.tile.alarm {background-color: white;} /* This will change the background color for Smart Home Monitor. */

.alarm[data-status="away"] .icon i.active:before {color: #FF0000;} /* This will change the icon color for Armed (Away) mode. */

.alarm[data-status="stay"] .icon i.active:before {color: blue;} /* This will change the icon color for Armed (Stay) mode. */

.alarm[data-status="off"] .icon i.inactive:before {color: #32CD32;} /* This will change the icon color for Disarmed mode. */

/* Contact Sensors */

.tile.contact {background-color: white;} /* This will change the background color for all Contact Sensor tiles (Open/Close Door and Window Sensors). */

.contact .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Open) Contact Sensor tiles. */

.contact .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Closed) Contact Sensor tiles. */

/* Motion Sensors */

.tile.motion {background-color: white;} /* This will change the background color for Motion Sensor tiles. */

.motion .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Motion Active) Motion Sensor tiles. */

.motion .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Motion Inactive) Motion Sensor tiles. */

/* Accelerometers */

.tile.acceleration {background-color: white;} /* This will change the background color for Accelerometer (Vibration) sensor tiles. */

.acceleration .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Vibration detected) Accelerometer sensor tiles. */

.acceleration .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Vibration not detected) Accelerometer sensor tiles. */

/* Lights */

.tile.light {background-color: white;} /* This will change the background color for Light tiles. */

.light .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Light tiles. */

.light .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Light tiles. */

/* Switches */

.tile.switch {background-color: white;} /* This will change the background color for Switch tiles. */

.switch .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Switch tiles. */

.switch .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Switch tiles. */

/* Dimmable Lights */

.tile.dimmerLight {background-color: white;} /* This will change the background color for Dimmable Light tiles. */

.dimmerLight .icon i.active:before {color: #006778;} /* This will change the icon color for Active (On) Dimmable Light tiles. */

.dimmerLight .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Off) Dimmable Light tiles. */

/* Water Sensors */

.tile.water {background-color: white;} /* This will change the background color for Water tiles. */

.water .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Wet) Water tiles. */

.water .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Dry) Water tiles. */

/* Locks */

.tile.lock {background-color: white;} /* This will change the background color for Lock tiles. */

.lock .icon i.active:before {color: #006778;} /* This will change the icon color for Active (Locked) Lock tiles. */

.lock .icon i.inactive:before {color: #9F792C;} /* This will change the icon color for Inactive (Unlocked) Lock tiles. */

/* Presence Sensors */

.tile.presence {background-color: white;} /* This will change the background color for Presence tiles. */

.presence .icon i.active:before {content : url(http://cdn.device-icons.smartthings.com/People/people1-icn@2x.png); position: relative; top: 27px; left: -18px;} /* This will change the icon to a custom icon for when Presence is detected. This icon is from SmartThings. */

.presence .icon i.inactive:before {color: #9F792C; content : " "; color: gray;} /* This will change the icon to a custom Font Awesome icon and to the color specified when Presence is not detected (Away). */

/* Battery Tiles - Basic. For more battery customization, please scroll down. */

.tile.battery {background-color: blue;} /* This will change the background color for Battery Tiles. */

.battery .icon {color: FF0000;} /* This will change the color of the icon (text representation of battery percentage) for Battery Tiles. This can also be configured to change color based on the data value (See below example for Temperature Sensor). */

.batt svg {

width: 16px;

height: 16px;

transform: rotate(270deg);} /* This will change the width, height, and orientation of the battery icon in the bottom left corner of a Battery Tile. */

.batt path {fill: white;} /* This will change the color of the battery fill (small bars representing battery level). */

/* Temperature Sensor Text Color Based on Data Value (Temperature Reading) */

.temperature[data-value='140°'] .icon {color: #FF0040}

.temperature[data-value='139°'] .icon {color: #FF0038}

.temperature[data-value='138°'] .icon {color: #FF0030}

.temperature[data-value='137°'] .icon {color: #FF0028}

.temperature[data-value='136°'] .icon {color: #FF0020}

.temperature[data-value='135°'] .icon {color: #FF0018}

.temperature[data-value='134°'] .icon {color: #FF0010}

.temperature[data-value='133°'] .icon {color: #FF0008}

.temperature[data-value='132°'] .icon {color: #FF0000}

.temperature[data-value='131°'] .icon {color: #FF0500}

.temperature[data-value='130°'] .icon {color: #FF0A00}

.temperature[data-value='129°'] .icon {color: #FF0F00}

.temperature[data-value='128°'] .icon {color: #FF1400}

.temperature[data-value='127°'] .icon {color: #FF1900}

.temperature[data-value='126°'] .icon {color: #FF1E00}

.temperature[data-value='125°'] .icon {color: #FF2300}

.temperature[data-value='124°'] .icon {color: #FF2800}

.temperature[data-value='123°'] .icon {color: #FF2D00}

.temperature[data-value='122°'] .icon {color: #FF3200}

.temperature[data-value='121°'] .icon {color: #FF3700}

.temperature[data-value='120°'] .icon {color: #FF3C00}

.temperature[data-value='119°'] .icon {color: #FF4100}

.temperature[data-value='118°'] .icon {color: #FF4600}

.temperature[data-value='117°'] .icon {color: #FF4B00}

.temperature[data-value='116°'] .icon {color: #FF5000}

.temperature[data-value='115°'] .icon {color: #FF5500}

.temperature[data-value='114°'] .icon {color: #FF5A00}

.temperature[data-value='113°'] .icon {color: #FF5F00}

.temperature[data-value='112°'] .icon {color: #FF6400}

.temperature[data-value='111°'] .icon {color: #FF6900}

.temperature[data-value='110°'] .icon {color: #FF6E00}

.temperature[data-value='109°'] .icon {color: #FF7300}

.temperature[data-value='108°'] .icon {color: #FF7800}

.temperature[data-value='107°'] .icon {color: #FF7D00}

.temperature[data-value='106°'] .icon {color: #FF8200}

.temperature[data-value='105°'] .icon {color: #FF8700}

.temperature[data-value='104°'] .icon {color: #FF8C00}

.temperature[data-value='103°'] .icon {color: #FF9100}

.temperature[data-value='102°'] .icon {color: #FF9600}

.temperature[data-value='101°'] .icon {color: #FF9B00}

.temperature[data-value='100°'] .icon {color: #FFA000}

.temperature[data-value='99°'] .icon {color: #FFA500}

.temperature[data-value='98°'] .icon {color: #FFAA00}

.temperature[data-value='97°'] .icon {color: #FFAF00}

.temperature[data-value='96°'] .icon {color: #FFB400}

.temperature[data-value='95°'] .icon {color: #FFB900}

.temperature[data-value='94°'] .icon {color: #FFBE00}

.temperature[data-value='93°'] .icon {color: #FFC300}

.temperature[data-value='92°'] .icon {color: #FFC800}

.temperature[data-value='91°'] .icon {color: #FFCD00}

.temperature[data-value='90°'] .icon {color: #FFD200}

.temperature[data-value='89°'] .icon {color: #FFD700}

.temperature[data-value='88°'] .icon {color: #FFDC00}

.temperature[data-value='87°'] .icon {color: #FFE100}

.temperature[data-value='86°'] .icon {color: #FFE600}

.temperature[data-value='85°'] .icon {color: #FFEB00}

.temperature[data-value='84°'] .icon {color: #FFF000}

.temperature[data-value='83°'] .icon {color: #FFF500}

.temperature[data-value='82°'] .icon {color: #FFFA00}

.temperature[data-value='81°'] .icon {color: #FEFC00}

.temperature[data-value='80°'] .icon {color: #FDFF00}

.temperature[data-value='79°'] .icon {color: #EAFF00}

.temperature[data-value='78°'] .icon {color: #D7FF00}

.temperature[data-value='77°'] .icon {color: #C3FF00}

.temperature[data-value='76°'] .icon {color: #B0FF00}

.temperature[data-value='75°'] .icon {color: #9DFF00}

.temperature[data-value='74°'] .icon {color: #8AFF00}

.temperature[data-value='73°'] .icon {color: #77FF00}

.temperature[data-value='72°'] .icon {color: #65FF00}

.temperature[data-value='71°'] .icon {color: #51FF00}

.temperature[data-value='70°'] .icon {color: #3EFF00}

.temperature[data-value='69°'] .icon {color: #2AFF00}

.temperature[data-value='68°'] .icon {color: #17FF00}

.temperature[data-value='67°'] .icon {color: #0BFF08}

.temperature[data-value='66°'] .icon {color: #00FF10}

.temperature[data-value='65°'] .icon {color: #00FF23}

.temperature[data-value='64°'] .icon {color: #00FF36}

.temperature[data-value='63°'] .icon {color: #00FF49}

.temperature[data-value='62°'] .icon {color: #00FF5C}

.temperature[data-value='61°'] .icon {color: #00FF6F}

.temperature[data-value='60°'] .icon {color: #00FF83}

.temperature[data-value='59°'] .icon {color: #00FF95}

.temperature[data-value='58°'] .icon {color: #00FFA8}

.temperature[data-value='57°'] .icon {color: #00FFBC}

.temperature[data-value='56°'] .icon {color: #00FFD0}

.temperature[data-value='55°'] .icon {color: #00FFE2}

.temperature[data-value='54°'] .icon {color: #00FFF4}

.temperature[data-value='53°'] .icon {color: #00F1F9}

.temperature[data-value='52°'] .icon {color: #00E4FF}

.temperature[data-value='51°'] .icon {color: #00DCFF}

.temperature[data-value='50°'] .icon {color: #00D4FF}

.temperature[data-value='49°'] .icon {color: #00CCFF}

.temperature[data-value='48°'] .icon {color: #00C4FF}

.temperature[data-value='47°'] .icon {color: #00BCFF}

.temperature[data-value='46°'] .icon {color: #00B4FF}

.temperature[data-value='45°'] .icon {color: #00ACFF}

.temperature[data-value='44°'] .icon {color: #00A4FF}

.temperature[data-value='43°'] .icon {color: #009CFF}

.temperature[data-value='42°'] .icon {color: #0094FF}

.temperature[data-value='41°'] .icon {color: #008CFF}

.temperature[data-value='40°'] .icon {color: #0084FF}

.temperature[data-value='39°'] .icon {color: #007CFF}

.temperature[data-value='38°'] .icon {color: #0074FF}

.temperature[data-value='37°'] .icon {color: #006CFF}

.temperature[data-value='36°'] .icon {color: #0064FF}

.temperature[data-value='35°'] .icon {color: #005CFF}

.temperature[data-value='34°'] .icon {color: #0054FF}

.temperature[data-value='33°'] .icon {color: #004CFF}

.temperature[data-value='32°'] .icon {color: #0044FF}

.temperature[data-value='31°'] .icon {color: #003BFF}

.temperature[data-value='30°'] .icon {color: #0032FF}

.temperature[data-value='29°'] .icon {color: #002AFF}

.temperature[data-value='28°'] .icon {color: #0022FF}

.temperature[data-value='27°'] .icon {color: #001AFF}

.temperature[data-value='26°'] .icon {color: #0012FF}

.temperature[data-value='25°'] .icon {color: #000AFF}

.temperature[data-value='24°'] .icon {color: #0002FF}

.temperature[data-value='23°'] .icon {color: #0001FF}

.temperature[data-value='22°'] .icon {color: #0000FF}

.temperature[data-value='21°'] .icon {color: #0000FF}

.temperature[data-value='20°'] .icon {color: #0100FF}

.temperature[data-value='19°'] .icon {color: #0100FF}

.temperature[data-value='18°'] .icon {color: #0200FF}

.temperature[data-value='17°'] .icon {color: #0200FF}

.temperature[data-value='16°'] .icon {color: #0300FF}

.temperature[data-value='15°'] .icon {color: #0300FF}

.temperature[data-value='14°'] .icon {color: #0400FF}

.temperature[data-value='13°'] .icon {color: #0400FF}

.temperature[data-value='12°'] .icon {color: #0500FF}

/* 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: white} /* active left slider bar */

.ui-page-theme-a .ui-slider-track .ui-btn-active {background-color:#666666} /* inactive left slider bar */

.ui-slider-handle.ui-btn.ui-shadow {background-color: #666666} /* inactive slider button */

.tile.active .ui-slider-handle.ui-btn.ui-shadow {background-color: white} /* active slider button */

.ui-page-theme-a .ui-bar-inherit {background-color: #666666} /* inactive right slider bar */

.ui-page-theme-a .tile.active .ui-bar-inherit {background-color: white}

/* ICON OPACITY */

.fa-toggle-off {opacity: 1!important} /* Icons no longer transparent */

.fa-toggle-on {opacity: 1!important} /* Icons no longer transparent */

.fa-shield {opacity: 1!important} /* Icons no longer transparent */

.fa-expand {opacity: 1!important} /* Icons no longer transparent */

.fa-compress {opacity: 1!important} /* Icons no longer transparent */

.fa-lightbulb-o {opacity: 1!important} /* Icons no longer transparent */

.fa-tint {opacity: 1!important} /* Icons no longer transparent */

.fa-exchange {opacity: 1!important} /* Icons no longer transparent */

/* WEATHER */

.weather[data-weather='mostlycloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on mostly-cloudy conditions */

.weather[data-weather='nt_partlycloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on partly-cloudy conditions */

.weather[data-weather='cloudy'] {background-color: #D3D3D3} /* Changes the tile background color based on cloudy conditions */

.weather[data-weather='fog'] {background-color: #D3D3D3} /* Changes the tile background color based on fog conditions */

.weather[data-weather='rain'] {background-color: #6666CE} /* Changes the tile background color based on rain conditions */

.weather[data-weather='clear'] {background-color: #FFD700} /* Changes the tile background color based on clear conditions */

.weather[data-weather='sunny'] {background-color: #FFD700} /* Changes the tile background color based on sunny conditions */

.weather[data-weather='snow'] {background-color: #FFFFFF} /* Changes the tile background color based on snow conditions */

/* Battery - Changes battery value color based on the percentage and change footer icon to custom icon based on URL */

.battery[data-value^='0'] .icon {color: #FF0040} /* Changes battery value color based on percentage */

.battery[data-value^='0'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)} /* Changes battery icon in footer based on percentage */

.battery[data-value^='1'] .icon {color: #FF0040} /* Changes battery value color based on percentage */

.battery[data-value^='1'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='2'] .icon {color: #FF0040} /* Changes battery value color based on percentage */

.battery[data-value^='2'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='3'] .icon {color: #FFD700} /* Changes battery value color based on percentage */

.battery[data-value^='3'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='4'] .icon {color: #FFD700} /* Changes battery value color based on percentage */

.battery[data-value^='4'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='5'] .icon {color: #FFD700} /* Changes battery value color based on percentage */

.battery[data-value^='5'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='6'] .icon {color: #32CD32} /* Changes battery value color based on percentage */

.battery[data-value^='6'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='7'] .icon {color: #32CD32} /* Changes battery value color based on percentage */

.battery[data-value^='7'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='8'] .icon {color: #32CD32} /* Changes battery value color based on percentage */

.battery[data-value^='8'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='9'] .icon {color: #32CD32} /* Changes battery value color based on percentage */

.battery[data-value^='9'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

.battery[data-value^='10'] .icon {color: #32CD32} /* Changes battery value color based on percentage */

.battery[data-value^='10'] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(http://www.yourdomainhere)}} /* Changes battery icon in footer based on percentage */

/* Battery - Changes battery icon to Font Awesome battery icons and changes color and fill amount based on percentage */

.battery[data-value^='0'] .batt:after {content:""; color: #FA0000}

.battery[data-value^='0'] .batt svg {display: none;}

.battery[data-value^='1'] .batt:after {content:""; color: #FB3300}

.battery[data-value^='1'] .batt svg {display: none;}

.battery[data-value^='2'] .batt:after {content:""; color: #FC6600}

.battery[data-value^='2'] .batt svg {display: none;}

.battery[data-value^='3'] .batt:after {content:""; color: #FD9900}

.battery[data-value^='3'] .batt svg {display: none;}

.battery[data-value^='4'] .batt:after {content:""; color: #FECC00}

.battery[data-value^='4'] .batt svg {display: none;}

.battery[data-value^='5'] .batt:after {content:""; color: #FFFF00}

.battery[data-value^='5'] .batt svg {display: none;}

.battery[data-value^='6'] .batt:after {content:""; color: #CCFF00}

.battery[data-value^='6'] .batt svg {display: none;}

.battery[data-value^='7'] .batt:after {content:""; color: #99FF00}

.battery[data-value^='7'] .batt svg {display: none;}

.battery[data-value^='8'] .batt:after {content:""; color: #66FF00}

.battery[data-value^='8'] .batt svg {display: none;}

.battery[data-value^='9'] .batt:after {content:""; color: #33FF00}

.battery[data-value^='9'] .batt svg {display: none;}

.battery[data-value^='10'] .batt:after {content:""; color: #00FF00}

.battery[data-value^='10'] .batt svg {display: none;}

/* Specific Device Tile Manipulation */

/* Change the tile type to suit the needs based on what device you are using. Then you will add in the device ID between the 2 single quotes (replacing all of the X's). */

/* This example will show using Font Awesome icons. */

/* My Light Switch */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: #464646} /* This will change the background color for the specific switch tile whose device ID matches the data-device you enter. */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: " ";} /* This will change the Active Switch to the Font Awesome icon selected. A color tag can also be added. */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content: " ";} /* This will change the Inactive Switch to the Font Awesome icon selected. A color tag can also be added. */

/* This example will show using Custom Icon URLs. */

/* My Dimmable Light */

.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: white;} /* This will change the background color for the specific Dimmable Light tile whose device ID matches the data-device you enter. */

.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Lighting/light11-icn@2x.png);position: relative; left: -20px; top: 27px;} /* This will change the Active (On) Icon to match the URL and also adjust its location to be centered. */

.tile.dimmerLight[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {{content: url(http://cdn.device-icons.smartthings.com/Lighting/light20-icn@2x.png);position: relative; left: -20px; top: 27px;} /* This will change the Inactive (Off) Icon to match the URL and also adjust its location to be centered. */

/* This example will show using a Custom Icon URL for Active and using the default icon for Inactive. */

/* Vacuum Cleaner */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] {background-color: #464646} /* This will change the background color for the specific Switch tile whose device ID matches the data-device you enter. */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.active:before {content: url(http://cdn.device-icons.smartthings.com/Appliances/appliances13-icn@2x.png);} /* This will change the Active (On) Switch icon to match the URL image. */

.tile.switch[data-device='xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'] .icon i.inactive:before {content: " ";} /* This will change the Inactive (Off) Switch icon to match the Font Awesome icon. A color tag may be added. */

/* END CUSTOM CSS */

SmartTiles.click™

SmartTiles — "The homepage for your home!"™

SmartTiles — "The homepage for your home!"™

Customizing CSS

Leave a comment Cancel reply