Special Switch Template in Dashboard to mimic Modes

🛎️ Get Help Apps
7

Yeah, this is one of those odd tiles that always wants to be different :joy:
Yours isn't working because you are missing the asterisk after, it should look like this:

[style*= 

/* Change the color of the button when turned on */

#tile-57[style*="background-color"] {
  width: 120px; 
  height: 120px;
  background-color: rgba(25,25,112,1) !important;
}

Here is an example for custom icons:

/* Hide the original icon */

#tile-2 .he-bulb_on:before {
  visibility: hidden;
}

/* Add a new icon when the light is turned on, format it, move it to the left and up */

#tile-2 .he-bulb_on:before {
  visibility: visible;
  font-family: 'Material Icons' !important;
  content: "wb_incandescent";
  font-size: 30px !important;
  color: rgba(125,209,233,1) !important;
  position: relative;
  top: -25px;
  left: -25px;
  background-color: rgba(255, 255, 255, .75);
  border: 1px solid rgba(255,255,255,1);
  padding: 5px;
  border-radius: 25px;
  box-shadow: 1px 1px 10px 1px rgba(255,255,225,.70);
  border-color: 1px solid rgba(250,128,114,1) !important;

}

Hopefully, this helped, if not, as @sburke781 mentioned there is a huge amount of information over at the noob thread. We all have either contributed or learned from it as well.

1 Like