Hi,
I have 4 buttons to choose my home mode. It can only be one mode at a time, so when clicking a button, the one that was selected is not anymore, like a radio button.
The problem is that I want them to be without margin, to be stuck to each other, like this:
I managed to do this simply by putting my buttons in a custom:vertical-stack-in-card, like this:
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:button-card
entity: input_select.house_mode
name: Presence
icon: mdi:home-account
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.house_mode
option: Presence
card_mod:
style: |
ha-card {
{% set mode = states['input_select.house_mode'].state %}
background-color: {{ 'var(--green-color)' if mode == 'Presence' else 'var(--card-background-color)' }} !important;
color: {{ '#FFFFFF' if mode == 'Presence' else 'var(--secondary-text-color)' }};
border-right: 1px solid var(--ha-card-border-color) !important;
}
styles:
icon:
- color: >-
[[[ return states["input_select.house_mode"].state ===
"Presence" ? "#FFFFFF" : "var(--secondary-text-color)"; ]]]
- type: custom:button-card
entity: input_select.house_mode
name: Away
icon: mdi:walk
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.house_mode
option: Away
card_mod:
style: |
ha-card {
{% set mode = states['input_select.house_mode'].state %}
background-color: {{ 'var(--red-color)' if mode == 'Away' else 'var(--card-background-color)' }} !important;
color: {{ '#FFFFFF' if mode == 'Away' else 'var(--secondary-text-color)' }};
border-right: 1px solid var(--ha-card-border-color) !important;
}
styles:
icon:
- color: >-
[[[ return states["input_select.house_mode"].state ===
"Away" ? "#FFFFFF" : "var(--secondary-text-color)"; ]]]
- type: custom:button-card
entity: input_select.house_mode
name: Night
icon: mdi:weather-night
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.house_mode
option: Night
card_mod:
style: |
ha-card {
{% set mode = states['input_select.house_mode'].state %}
background-color: {{ 'var(--indigo-color)' if mode == 'Night' else 'var(--card-background-color)' }} !important;
color: {{ '#FFFFFF' if mode == 'Night' else 'var(--secondary-text-color)' }};
border-right: 1px solid var(--ha-card-border-color) !important;
}
styles:
icon:
- color: >-
[[[ return states["input_select.house_mode"].state === "Night" ?
"#FFFFFF" : "var(--secondary-text-color)"; ]]]
- type: custom:button-card
entity: input_select.house_mode
name: Holiday
icon: mdi:beach
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.house_mode
option: Holiday
card_mod:
style: |
ha-card {
{% set mode = states['input_select.house_mode'].state %}
background-color: {{ 'var(--orange-color)' if mode == 'Holiday' else 'var(--card-background-color)' }} !important;
color: {{ '#FFFFFF' if mode == 'Holiday' else 'var(--secondary-text-color)' }};
}
styles:
icon:
- color: >-
[[[ return states["input_select.house_mode"].state ===
"Holiday" ? "#FFFFFF" : "var(--secondary-text-color)"; ]]]
But since a recent update, it no longer works, so I get this:
I tested a lot of card_mod things but nothing that really helps…
Do you know how can I achieve this ? I’m open to all kinds of suggestions, whether in terms of style, the use of an HACS plugin, etc.