Hi Community!
So I was really impressed with what I found in this thread and decided to jump on board. I have my floorplan.svg all done up (unfortunately, I had to flatten into one layer - makes it difficult using the same “work” file as the “finished” file…) and I used the default CSS and a slightly modified (mostly commented out) floorplan.yaml – This seems to work but I’ve run into a problem I’m not sure how to get around:
- I have several light bulbs, such as the one below:
-
I have it defined in my floorplan.yaml:
groups: - name: Lights entities: - light.back_hallway - light.front_hallway - light.logan_bedroom_overhead - light.kitchen_sink - light.kitchen_table - light.mudroom_door - light.mudroom_window states: - state: 'on' class: 'light-on' - state: 'off' class: 'light-off' action: domain: homeassistant service: toggle -
I labelled it according to the documentation:
-
When I touch the icon on my floorplan, the light turns on and off, as expected. The problem is that the icon itself doesn’t change color at all. I have the default CSS in place:
/* Light */
.light-off {
fill: #C3B7F4 !important;
}.light-on {
fill: #F8D2B9 !important;
}
But nothing happens other than the light turning on/off. I was hoping to have the bulb filled or outlined with the color above (just getting started here, I can choose different colors later) but… nothing… it stays black like the image above.
Not sure what I’m missing…
