Hi
I am trying to create a button that will open and shut the door by pressing the symbol of the door but also change colour when it is open or shut and state whether the door is open or closed.
I have a door sensor and a tuya opener.
this is what I have so far
Any help would be appreciated
A template cover should get you what you’re after:
Here’s an example using custom:button:card.
type: custom:button-card
entity: binary_sensor.garage_door_1
icon: mdi:garage
name: Garage Door 1
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.sonoff_100040e943_1
state:
- value: "off"
color: green
icon: mdi:garage
- value: "on"
color: red
icon: mdi:garage-open
This is really helpful, because I have my switch_relay on inching I just get the green door and it momentarily switches to red, when I put my door sensor into the equation it doesnt work .
Can you post your yaml code?
This is the code that I use at the moment…
entities:
- entity: binary_sensor.door_sensor_alarm_door
icon: mdi:garage-variant
name: Woodshed
- entity: switch.relay_switch
icon: mdi:garage-variant
name: Woodshed Door
state_color: true
title: WoodShed
And this is your code with my entities:
type: custom:button-card
entity: switch.relay_switch
icon: mdi:garage
name: Woodshed
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.relay_switch
state:
- value: "on"
color: green
icon: mdi:garage
- value: "off"
color: red
icon: mdi:garage-open
The second line should have your binary sensor, not the switch. Also the states are reversed if your binary_sensor.door_sensor_alarm_door equals “off” when the door is closed and equals “on” when the door is open. In theory, this should work::
type: custom:button-card
entity: binary_sensor.door_sensor_alarm_door
icon: mdi:garage
name: Woodshed
tap_action:
action: call-service
service: switch.turn_on
service_data:
entity_id: switch.relay_switch
state:
- value: "off"
color: green
icon: mdi:garage
- value: "on"
color: red
icon: mdi:garage-open
So, just to be clear, the state field is referring to the two different states of your binary_sensor, not the switch.
To change color, I have found two practical options.
The first option is to use this thing called card-mod, Which is horribly complicated, but it lets you change any style based on any property of the card, live.
The second option which is going to be far easier is to use the mushroom template card. With the mushroom template card you can template anything that goes in the card — including the icon, the color of the card or the icon, the contents of the primary and secondary lines of text and what actions may happen when the card is acted upon.
I am currently using both things right now in my dashboard to display caution/danger warning tiles, that appear conditionally on certain dashboards in different colors like yellow and red, whenever there are situations that need attention. Here is code for one of these warning tiles:
type: custom:auto-entities
card:
title: Danger
type: entities
card_mod:
style:
.: |
ha-card {
background: rgba(255, 59, 59, 0.18) !important;
coalor: var(--card-background-color);
}
ha-card .card-header {
justify-content: center;
padding: 8px;
}
ha-card .name {
font-size: 80%;
}
ha-card #states.card-content {
padding: 0px;
}
mushroom-template-card:
$:
.: |
ha-card {
border: none;
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 0 !important;
background: transparent;
}
mushroom-card mushroom-state-item mushroom-state-info $: |
aa {
coalor: var(--card-background-color) !important;
}
filter:
template: |-
[{% for s in
states.alert2
| selectattr("attributes.domain", "in", "gas_grill")
| selectattr("state", "eq", "on")
| list
-%} {{
{
"entity": s.entity_id,
"primary": s.attributes.friendly_name,
"secondary": s.attributes.last_fired_message|default(None),
"type": "custom:mushroom-template-card",
"icon": "mdi:alert",
"icon_color": "red",
"tap_action": {"action": "more-info"},
"multiline_secondary": true,
}
}}{% if not loop.last %},{% endif %} {%- endfor %}]
show_empty: true
grid_options:
columns: full
visibility:
- condition: or
conditions:
- condition: state
entity: alert2.gas_grill_running_while_absent
state: "on"
Here’s one you could use 
:
it’s available via HACS.
and you could the other controls available at the same github location to theme your entire dashboard.
I’m curious, is this line to control the text color?
coalor: var(--card-background-color);
Yeap got it thank you, I am sure I tried it this way, obviously I did something wrong !! I am still learning but this has been a real help…
Yah that was some testing leftover that has no effect.
It would have to move to .name {
card_mod:
style:
.: |
ha-card {
background: rgba(255, 59, 59, 0.18) !important;
}
.card-header {
justify-content: center !important;
padding: 8px;
}
.name {
font-size: 80%;
color: var(--card-background-color);
}
.card-content {
padding: 0px;
}
Yes indeed but I didn’t really want to change that color, hence the deliberate typo.
That’s not a method I’d suggest or provide as a solution for others. It generates errors even if you can’t see them.
Yes, just delete that from your copypasta.