Dashboard Theming (Custom CSS) and Mounting Hardware Ideas

Wiki Projects & Stories
, , , ,
988

I like your icons too and also have mine hosted on github…

I have the following battery icons I created and have a value for each as well as the icon color.











Here is the CSS for color and image but you’ll have to replicate for each value:

.battery[data-value=‘0%’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value=‘100%’] .icon {color: #32CD32}
.battery[data-value=‘99%’] .icon {color: #32CD32}
.battery[data-value=‘98%’] .icon {color: #32CD32}
.battery[data-value=‘97%’] .icon {color: #32CD32}
.battery[data-value=‘96%’] .icon {color: #32CD32}
.battery[data-value=‘95%’] .icon {color: #32CD32}
.battery[data-value=‘94%’] .icon {color: #32CD32}
.battery[data-value=‘93%’] .icon {color: #32CD32}
.battery[data-value=‘92%’] .icon {color: #32CD32}
.battery[data-value=‘91%’] .icon {color: #32CD32}
.battery[data-value=‘90%’] .icon {color: #32CD32}
.battery[data-value=‘89%’] .icon {color: #32CD32}
.battery[data-value=‘88%’] .icon {color: #32CD32}
.battery[data-value=‘87%’] .icon {color: #32CD32}
.battery[data-value=‘86%’] .icon {color: #32CD32}
.battery[data-value=‘85%’] .icon {color: #32CD32}
.battery[data-value=‘84%’] .icon {color: #32CD32}
.battery[data-value=‘83%’] .icon {color: #32CD32}
.battery[data-value=‘82%’] .icon {color: #32CD32}
.battery[data-value=‘81%’] .icon {color: #32CD32}
.battery[data-value=‘80%’] .icon {color: #32CD32}
.battery[data-value=‘79%’] .icon {color: #32CD32}
.battery[data-value=‘78%’] .icon {color: #32CD32}
.battery[data-value=‘77%’] .icon {color: #32CD32}
.battery[data-value=‘76%’] .icon {color: #32CD32}
.battery[data-value=‘75%’] .icon {color: #32CD32}
.battery[data-value=‘74%’] .icon {color: #32CD32}
.battery[data-value=‘73%’] .icon {color: #32CD32}
.battery[data-value=‘72%’] .icon {color: #32CD32}
.battery[data-value=‘71%’] .icon {color: #32CD32}
.battery[data-value=‘70%’] .icon {color: #32CD32}
.battery[data-value=‘69%’] .icon {color: #FFD700}
.battery[data-value=‘68%’] .icon {color: #FFD700}
.battery[data-value=‘67%’] .icon {color: #FFD700}
.battery[data-value=‘66%’] .icon {color: #FFD700}
.battery[data-value=‘65%’] .icon {color: #FFD700}
.battery[data-value=‘64%’] .icon {color: #FFD700}
.battery[data-value=‘63%’] .icon {color: #FFD700}
.battery[data-value=‘62%’] .icon {color: #FFD700}
.battery[data-value=‘61%’] .icon {color: #FFD700}
.battery[data-value=‘60%’] .icon {color: #FFD700}
.battery[data-value=‘59%’] .icon {color: #FFD700}
.battery[data-value=‘58%’] .icon {color: #FFD700}
.battery[data-value=‘57%’] .icon {color: #FFD700}
.battery[data-value=‘56%’] .icon {color: #FFD700}
.battery[data-value=‘55%’] .icon {color: #FFD700}
.battery[data-value=‘54%’] .icon {color: #FFD700}
.battery[data-value=‘53%’] .icon {color: #FFD700}
.battery[data-value=‘52%’] .icon {color: #FFD700}
.battery[data-value=‘51%’] .icon {color: #FFD700}
.battery[data-value=‘50%’] .icon {color: #FFD700}
.battery[data-value=‘49%’] .icon {color: #FFD700}
.battery[data-value=‘48%’] .icon {color: #FFD700}
.battery[data-value=‘47%’] .icon {color: #FFD700}
.battery[data-value=‘46%’] .icon {color: #FFD700}
.battery[data-value=‘45%’] .icon {color: #FFD700}
.battery[data-value=‘44%’] .icon {color: #FFD700}
.battery[data-value=‘43%’] .icon {color: #FFD700}
.battery[data-value=‘42%’] .icon {color: #FFD700}
.battery[data-value=‘41%’] .icon {color: #FFD700}
.battery[data-value=‘40%’] .icon {color: #FFD700}
.battery[data-value=‘39%’] .icon {color: #FFD700}
.battery[data-value=‘38%’] .icon {color: #FFD700}
.battery[data-value=‘37%’] .icon {color: #FFD700}
.battery[data-value=‘36%’] .icon {color: #FFD700}
.battery[data-value=‘35%’] .icon {color: #FFD700}
.battery[data-value=‘34%’] .icon {color: #FFD700}
.battery[data-value=‘33%’] .icon {color: #FFD700}
.battery[data-value=‘32%’] .icon {color: #FFD700}
.battery[data-value=‘31%’] .icon {color: #FFD700}
.battery[data-value=‘30%’] .icon {color: #FF0040}
.battery[data-value=‘29%’] .icon {color: #FF0040}
.battery[data-value=‘28%’] .icon {color: #FF0040}
.battery[data-value=‘27%’] .icon {color: #FF0040}
.battery[data-value=‘26%’] .icon {color: #FF0040}
.battery[data-value=‘25%’] .icon {color: #FF0040}
.battery[data-value=‘24%’] .icon {color: #FF0040}
.battery[data-value=‘23%’] .icon {color: #FF0040}
.battery[data-value=‘22%’] .icon {color: #FF0040}
.battery[data-value=‘21%’] .icon {color: #FF0040}
.battery[data-value=‘20%’] .icon {color: #FF0040}
.battery[data-value=‘19%’] .icon {color: #FF0040}
.battery[data-value=‘18%’] .icon {color: #FF0040}
.battery[data-value=‘17%’] .icon {color: #FF0040}
.battery[data-value=‘16%’] .icon {color: #FF0040}
.battery[data-value=‘15%’] .icon {color: #FF0040}
.battery[data-value=‘14%’] .icon {color: #FF0040}
.battery[data-value=‘13%’] .icon {color: #FF0040}
.battery[data-value=‘12%’] .icon {color: #FF0040}
.battery[data-value=‘11%’] .icon {color: #FF0040}
.battery[data-value=‘10%’] .icon {color: #FF0040}
.battery[data-value=‘9%’] .icon {color: #FF0040}
.battery[data-value=‘8%’] .icon {color: #FF0040}
.battery[data-value=‘7%’] .icon {color: #FF0040}
.battery[data-value=‘6%’] .icon {color: #FF0040}
.battery[data-value=‘5%’] .icon {color: #FF0040}
.battery[data-value=‘4%’] .icon {color: #FF0040}
.battery[data-value=‘3%’] .icon {color: #FF0040}
.battery[data-value=‘2%’] .icon {color: #FF0040}
.battery[data-value=‘1%’] .icon {color: #FF0040}
.battery[data-value=‘0%’] .icon {color: #FF0040}

1 Like
989

Sliders and weather:

/* 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}
.fa-toggle-on {opacity: 1!important}
.fa-shield {opacity: 1!important}
.fa-expand {opacity: 1!important}
.fa-compress {opacity: 1!important}
.fa-lightbulb-o {opacity: 1!important}
.fa-tint {opacity: 1!important}
.fa-exchange {opacity: 1!important}

/* WEATHER */
.weather[data-weather=‘mostlycloudy’] {background-color: #D3D3D3}
.weather[data-weather=‘nt_partlycloudy’] {background-color: #D3D3D3}
.weather[data-weather=‘cloudy’] {background-color: #D3D3D3}
.weather[data-weather=‘fog’] {background-color: #D3D3D3}
.weather[data-weather=‘rain’] {background-color: #0000FF}
.weather[data-weather=‘clear’] {background-color: #FFD700}
.weather[data-weather=‘sunny’] {background-color: #FFD700}
.weather[data-weather=‘snow’] {background-color: #FFFFFF}

3 Likes
990

Since you are not using a unique color for each level, you can use the “^” after value to shorten the list and only use the leading number. So you do not need to go from 100 to 1.

.battery[data-value^='0'] .icon {color: #FA0000}
.battery[data-value^='1'] .icon {color: #FB3300}
.battery[data-value^='2'] .icon {color: #FC6600}
.battery[data-value^='3'] .icon {color: #FD9900}
.battery[data-value^='4'] .icon {color: #FECC00}
.battery[data-value^='5'] .icon {color: #FFFF00}
.battery[data-value^='6'] .icon {color: #CCFF00}
.battery[data-value^='7'] .icon {color: #99FF00}
.battery[data-value^='8'] .icon {color: #66FF00}
.battery[data-value^='9'] .icon {color: #33FF00}
.battery[data-value^='10'] .icon {color: #00FF00}
4 Likes
991

This is pretty hardcore. I don’t think anyone took if that far. Great job!

2 Likes
992

This is absolutely amazing too. I never imagined anyone going to such great lengths to personalize their dashboards. Love this!

1 Like
993

Thanks ill give it a try

994

sorry if this has already been posted in here (REALLY sorry if it was me doing so), but…

1 Like
995

This thread is HUGE.

Was wondering if anyone has done total monochrome CSS for their smarttiles? Only the titles and icons are pure white. Everything else black. Mind sharing the CSS?

996

I would vote for a theme like Sballoz where the tiles invert between light gray and white. Seems like a good mix of people like the tile inversion over icon coloring.

I love the look of @pmjoen’s version, add tile inversion and i’m switching :slight_smile: just don’t have the time to recreate all of it from scratch.

1 Like
998

You solved my opacity issue without me even asking about it… I just started digging into that and you saved me some time. Thank you!

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

1 Like
999

Thanks, that worked great for both image and color. Heres the new CSS:

/* Battery */
.battery.inactive {background-color: #4C4C4C;}
.battery[data-value^=‘0’] .icon {color: #FF0040}
.battery[data-value^=‘0’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘1’] .icon {color: #FF0040}
.battery[data-value^=‘1’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘2’] .icon {color: #FF0040}
.battery[data-value^=‘2’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘3’] .icon {color: #FFD700}
.battery[data-value^=‘3’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘4’] .icon {color: #FFD700}
.battery[data-value^=‘4’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘5’] .icon {color: #FFD700}
.battery[data-value^=‘5’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘6’] .icon {color: #32CD32}
.battery[data-value^=‘6’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘7’] .icon {color: #32CD32}
.battery[data-value^=‘7’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘8’] .icon {color: #32CD32}
.battery[data-value^=‘8’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘9’] .icon {color: #32CD32}
.battery[data-value^=‘9’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘10’] .icon {color: #32CD32}
.battery[data-value^=‘10’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}

2 Likes
1000

@pmjoen your icon are fantastic !
could I please use some of them too?

Motion man
Garage door
Master bedroom light
Front door

Thanks in advance (I suspect more requests coming your way)

1001

Seconded @pmjoen . I’d love to have these as well.
Motion, Front Door, Master Bedroom Fan, Master Bedroom Light

1002

/* Battery */
.battery.inactive {background-color: #4C4C4C;}
.battery[data-value^=‘0’] .icon {color: #FF0040}
.battery[data-value^=‘0’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(image url)}
.battery[data-value^=‘1’] .icon {color: #FF0040}
…

Odd… I can’t get this to work for me. Any ideas?

This is the code i’m using

This doesn’t work
.battery[data-value^=‘10’] .footer {width: 40px;height: 20px;transform: rotate(0deg);padding:105px 0px 0px 0px;content : url(https://myURL/Battery100.png)}

This works
.battery[data-value^=‘1’] {background-color: red}

The trailing % doesn’t seem to make a difference

1003

Testing in the developer tool when I change the value to 9 from 75 it shows

By the way here is my new icon for 100%

1004

Could my issue be due to the theme in use is overriding it somehow? I’m currently running Sballoz theme.

1005

Can someone here help distinguish between these two areas for me (found via “inspect element” from safari on mac)?

Specifically, we appear to be able to affect the section highlighted in Orange with CSS modifications, but the data-data section has additional, useful information (and sometimes conflicting information as you can see in red) that we don’t appear to be able to access. I see this on the weather and thermostat tiles.

If we could access this, we could then color the weather tile based on temperature. It would also fix the fact that my current weather tile is grey because the top section says it’s cloudy, but it should be blue because it’s pouring out.

Screen Shot 2016-04-01 at 12.06.23 PM.png821×95 29 KB

1006

As far as I have determined this cannot be done, because the temperature on the weather tile is a different structure than the regular temperature tile. You can color the temperature, but cannot have the color change based on it.

The way I dealt with that is to make a temperature tile from the weather title data, it is selectable under the temperature tile option in SmartTiles app. I temp color that tile.

Also check the order of the CSS code. IT sounds like the tile is being overriden by the theme’s tile color.
If you need to move the weather data section below the customized theme changes. I had an issue with this as well and moved things around to resolve that issue.

1007

I have my weather changing the tile background color using the CSS I previously mentioned:

.weather[data-weather=‘mostlycloudy’] {background-color: #D3D3D3}

But this is based only on that data not the temp value, try this:

.weather[data-data=‘temperature":52’] {background-color: #D3D3D3}

not sure if that will work or not

1008

I just upgraded to Hub v2 and now smart tiles doesn’t see the weather thing for the weather tile… Can anyone help?