This is a background color problem. I use
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
It works but most of the time I get estrange behavior.
I design a thermostat for multiples room that can be control all together or each one individually.
The problem is that most of the time the conditional card did not change the background.
To expand the thermostat I hold any Icon and it show like:
but it shows like:
the entire code is:
type: vertical-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Arriba
secondary: '{{ states(''sensor.temp_zona_arriba_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_zona_arriba
icon_color: |-
{% if is_state('climate.radiador_zona_arriba', 'heat') %}
orange
{% else %}
grey
{% endif %}
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id:
- input_boolean.radiador_pieza
- input_boolean.radiador_bano_pieza
- input_boolean.radiador_jose
- input_boolean.radiador_ninas
- input_boolean.radiador_estar
- input_boolean.radiador_bano_arriba
- type: custom:mushroom-climate-card
entity: climate.radiador_zona_arriba
show_temperature_control: true
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Pieza
secondary: '{{ states(''sensor.temp_pieza_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_pieza
icon_color: |-
{% if is_state('climate.radiador_pieza', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_pieza
- type: conditional
conditions:
- entity: input_boolean.radiador_pieza
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_pieza
show_temperature_control: |-
{% if is_state('input_boolean.radiador_pieza','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
- type: custom:stack-in-card
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Baño
secondary: '{{ states(''sensor.temp_bano_pieza_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_bano_pieza
icon_color: |-
{% if is_state('climate.radiador_bano_pieza', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_bano_pieza
- type: conditional
conditions:
- entity: input_boolean.radiador_bano_pieza
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_bano_pieza
show_temperature_control: |-
{% if is_state('input_boolean.radiador_bano_pieza','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
- type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Jose
secondary: '{{ states(''sensor.temp_jose_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_jose
icon_color: |-
{% if is_state('climate.radiador_jose', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_jose
- type: conditional
conditions:
- entity: input_boolean.radiador_jose
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_jose
show_temperature_control: |-
{% if is_state('input_boolean.radiador_jose','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Niñas
secondary: '{{ states(''sensor.temp_ninas_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_ninas
icon_color: |-
{% if is_state('climate.radiador_ninas', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_ninas
- type: conditional
conditions:
- entity: input_boolean.radiador_ninas
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_ninas
show_temperature_control: |-
{% if is_state('input_boolean.radiador_ninas','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
- type: horizontal-stack
cards:
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Estar
secondary: '{{ states(''sensor.temp_estar_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_estar
icon_color: |-
{% if is_state('climate.radiador_estar', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_estar
- type: conditional
conditions:
- entity: input_boolean.radiador_estar
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_estar
show_temperature_control: |-
{% if is_state('input_boolean.radiador_estar','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}
- type: custom:stack-in-card
keep:
margin: false
box_shadow: false
background: false
cards:
- type: custom:mushroom-template-card
primary: Baño
secondary: '{{ states(''sensor.temp_bano_arriba_temperature'') | round(1)}}°C'
icon: mdi:radiator
entity: climate.radiador_bano_arriba
icon_color: |-
{% if is_state('climate.radiador_bano_arriba', 'heat') %}
orange
{% else %}
grey
{% endif %}
fill_container: true
double_tap_action:
action: more-info
hold_action:
action: call-service
service: input_boolean.toggle
data: {}
target:
entity_id: input_boolean.radiador_bano_arriba
- type: conditional
conditions:
- entity: input_boolean.radiador_bano_arriba
state: 'on'
card:
type: custom:mushroom-climate-card
entity: climate.radiador_bano_arriba
show_temperature_control: |-
{% if is_state('input_boolean.radiador_bano_arriba','on' %}
true
{% else %}
false
{% endif %}
fill_container: false
secondary_info: none
primary_info: none
icon_type: none
collapsible_controls: false
card_mod:
style: |
ha-card
{
background: rgba(255, 152, 0, 0.1);
}