I’ve been trying to style a conditional element using card-mod. I have a “picture-elements” card with loads of labels and icons inside, even a couple of conditional cards. I want the background of one of those conditional cards to be red (in my example) but everything I try doesn’t seem to work.
This is the specific piece of code I want the background to be red. Does anyone know why this isn’t working?
Does it work without the conditions?
type: picture-elements
elements:
- type: custom:mushroom-template-card
icon: mdi:lamp
icon_color: yellow
style:
top: 200px
left: 100px
card_mod:
style: |
ha-card {
background: blue;
}
image: https://demo.home-assistant.io/stub_config/floorplan.png
Yes, without works fine. I have card_mod in multiple places working just fine.
Probably best you share the entire card code. There has to be a card_mod conflict.
This is the entire code, from row 200 is the “problem” part.
type: picture-elements
image: /api/image/serve/8d8ed842db9f7e090f8b70903e546b66/512x512
elements:
- type: state-icon
title: Ontdooien
tap_action:
action: toggle
entity: switch.bob_defrost
style:
left: 50px
top: "-45px"
- type: state-icon
title: Verwarmen
tap_action:
action: toggle
entity: climate.bob_klimaat
icon: mdi:fan-auto
style:
left: 90px
top: "-45px"
- type: state-label
entity: device_tracker.bob_location
title: Locatie
tap_action:
action: navigate
navigation_path: /lovelace-dashboard/locatie-bob
hold_action: none
style:
top: 0px
left: 50%
font-size: 100%
font-weight: normal
- type: state-icon
entity: button.bob_wakker
title: Verversen
tap_action:
action: perform-action
perform_action: homeassistant.update_entity
target: {}
data:
entity_id:
- device_tracker.bob_location
hold_action: none
icon: mdi:refresh
style:
bottom: "-140px"
left: 100px
- type: conditional
conditions:
- entity: lock.bob_slot
state: locked
elements:
- type: state-icon
entity: lock.bob_slot
title: Op slot
tap_action: none
hold_action: none
icon: mdi:lock
style:
top: "-45px"
right: 10px
- type: conditional
conditions:
- entity: lock.bob_slot
state_not: locked
elements:
- type: state-icon
entity: lock.bob_slot
title: Niet op slot
tap_action: none
hold_action: none
icon: mdi:lock-open-variant
style:
top: "-45px"
left: 10px
- type: state-icon
entity: binary_sensor.bob_status
title: Verbindingsstatus
tap_action: none
hold_action: none
icon: mdi:car-connected
style:
top: "-45px"
right: 50px
- type: state-icon
entity: switch.bob_sentry_mode
title: Sentry modus
tap_action: none
hold_action: none
style:
top: "-45px"
right: 90px
- type: conditional
conditions:
- entity: climate.bob_klimaat
state_not: heat_cool
elements:
- type: state-icon
entity: climate.bob_klimaat
title: Klimaat uit
tap_action: none
hold_action: none
icon: mdi:fan-off
style:
top: "-45px"
right: 130px
- type: conditional
conditions:
- entity: climate.bob_klimaat
state: heat_cool
elements:
- type: state-icon
entity: climate.bob_klimaat
title: Klimaat aan
tap_action: none
hold_action: none
icon: mdi:fan
style:
top: "-45px"
right: 130px
"--paper-item-icon-color": var(--color_yellow)
- type: conditional
conditions:
- entity: sensor.bob_opladen
state_not: charging
elements:
- type: state-icon
entity: sensor.bob_opladen
title: Niet opladen
tap_action: none
hold_action: none
icon: mdi:flash
style:
top: "-45px"
right: 170px
- type: conditional
conditions:
- entity: sensor.bob_opladen
state: charging
elements:
- type: state-icon
entity: sensor.bob_opladen
title: Opladen
tap_action: none
hold_action: none
icon: mdi:flash
style:
top: "-45px"
right: 170px
"--paper-item-icon-color": var(--color_yellow)
- type: conditional
conditions:
- entity: cover.bob_charge_port_door
state: open
elements:
- type: state-icon
entity: cover.bob_charge_port_door
title: Laadklepje
tap_action: none
hold_action: none
style:
top: 50px
left: 75px
"--state-cover-open-color": var(--color_charg_port)
"--state-cover-close-color": lightgrey
- type: state-icon
entity: sensor.bob_binnentemperatuur
tap_action: none
hold_action: none
style:
top: 50%
left: 37%
- type: state-label
entity: sensor.bob_binnentemperatuur
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
- type: conditional
conditions:
- entity: sensor.bob_opladen
state: charging
elements:
- type: state-label
entity: sensor.bob_charger_power
title: Oplaadsnelheid
tap_action: none
hold_action: none
style:
top: 25px
left: 75px
font-size: 100%
font-weight: normal
color: var(--color_charging)
- type: conditional
conditions:
- entity: sensor.bob_opladen
state_not: charging
elements:
- type: custom:mushroom-template-card
primary: This is just a label
tap_action: none
style:
top: "-200px"
left: 50%
z-index: 1
card_mod:
style: |
ha-card {
background: red;
}
- type: conditional
conditions:
- entity: binary_sensor.bob_front_driver_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_front_driver_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 15%
left: 55%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_rear_driver_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_rear_driver_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 15%
left: 35%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_rear_passenger_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_rear_passenger_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 85%
left: 35%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_front_passenger_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_front_passenger_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 85%
left: 55%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: cover.bob_frunk
state: open
elements:
- type: state-icon
entity: cover.bob_frunk
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 50%
left: 83%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: cover.bob_kofferbak
state: open
elements:
- type: state-icon
entity: cover.bob_kofferbak
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 50%
left: 17%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_rear_left
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_rear_left
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 15%
left: 27%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_front_left
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_front_left
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 15%
left: 77%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_rear_right
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_rear_right
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 85%
left: 27%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_front_right
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_front_right
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 85%
left: 77%
"--paper-item-icon-color": red
- type: custom:entity-progress-card
entity: sensor.bob_batterijniveau
hide:
- icon
- name
- value
bar_size: large
layout: vertical
bar_color: rgb(110, 65, 171)
bar_effect:
- radius
style:
bottom: "-100px"
left: 50%
z-index: 1
width: 300px
height: 50px
custom_theme:
- min: 0
max: 33
color: red
- min: 33
max: 66
color: orange
- min: 66
max: 100
color: green
- type: state-label
entity: sensor.bob_batterijniveau
tap_action: none
style:
bottom: "-97px"
left: 50%
z-index: 1
- type: custom:mushroom-template-card
title: Kilometerstand
primary: >-
{{ '{0:,.0f}'.format(states('sensor.bob_odometer')|int).replace(',', '.')
}} km
icon: mdi:speedometer
tap_action: none
style:
top: 105%
left: 50%
z-index: 1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 21px;
--icon-color: lightgrey;
}
.: |
ha-card {
border: none !important;
background: transparent !important;
position: relative !important;
--card-primary-color: lightgrey;
}
- type: custom:mushroom-template-card
primary: >-
Laatste update: {{
as_timestamp(states.sensor.bob_binnentemperatuur.last_updated) |
timestamp_custom("%d-%m-%Y %H:%M:%S") }}
style:
bottom: "-140px"
left: 50%
font-size: 80%
font-weight: normal
card_mod:
style: |
ha-card {
margin: 10px !important!;
border: none !important;
background: transparent;
position: relative !important;
--card-primary-color: lightgrey
}
card_mod:
style: |
ha-card {
padding: 70px 0px 120px 0px;
--color_charging: {% if states('sensor.bob_opladen') == "charging" %} lightgreen {% else %} lightgrey {% endif %};
--color_charg_port: {% if states('sensor.bob_opladen') == "charging" %} lightgreen {% else %} #ffc107 {% endif %};
--color_yellow: #ffc107;
--ha-card-border-width: 0px;
}
Suggest you to always post a simplified minimal code. I do not think that anyone would count number of lines using a browser.
A lot going here beyond your original inquiry, but I was able to change the background colors.
The last mushroom card needs at least an icon
This is an issue margin: 10px !important!;
This has a formatting issue
primary: >-
Laatste update: {{
as_timestamp(states.sensor.bob_binnentemperatuur.last_updated) |
timestamp_custom("%d-%m-%Y %H:%M:%S") }}
Test this… I removed this section, don’t have that installed - type: custom:entity-progress-card
type: picture-elements
image: https://demo.home-assistant.io/stub_config/floorplan.png
elements:
- type: state-icon
title: Ontdooien
tap_action:
action: toggle
entity: switch.bob_defrost
style:
left: 50px
top: "-45px"
- type: state-icon
title: Verwarmen
tap_action:
action: toggle
entity: climate.bob_klimaat
icon: mdi:fan-auto
style:
left: 90px
top: "-45px"
- type: state-label
entity: device_tracker.bob_location
title: Locatie
tap_action:
action: navigate
navigation_path: /lovelace-dashboard/locatie-bob
hold_action: none
style:
top: 0px
left: 50%
font-size: 100%
font-weight: normal
- type: state-icon
entity: button.bob_wakker
title: Verversen
tap_action:
action: perform-action
perform_action: homeassistant.update_entity
target: {}
data:
entity_id:
- device_tracker.bob_location
hold_action: none
icon: mdi:refresh
style:
bottom: "-140px"
left: 100px
- type: conditional
conditions:
- entity: lock.bob_slot
state: locked
elements:
- type: state-icon
entity: lock.bob_slot
title: Op slot
tap_action: none
hold_action: none
icon: mdi:lock
style:
top: "-45px"
right: 10px
- type: conditional
conditions:
- entity: lock.bob_slot
state_not: locked
elements:
- type: state-icon
entity: lock.bob_slot
title: Niet op slot
tap_action: none
hold_action: none
icon: mdi:lock-open-variant
style:
top: "-45px"
left: 10px
- type: state-icon
entity: binary_sensor.bob_status
title: Verbindingsstatus
tap_action: none
hold_action: none
icon: mdi:car-connected
style:
top: "-45px"
right: 50px
- type: state-icon
entity: switch.bob_sentry_mode
title: Sentry modus
tap_action: none
hold_action: none
style:
top: "-45px"
right: 90px
- type: conditional
conditions:
- entity: climate.bob_klimaat
state_not: heat_cool
elements:
- type: state-icon
entity: climate.bob_klimaat
title: Klimaat uit
tap_action: none
hold_action: none
icon: mdi:fan-off
style:
top: "-45px"
right: 130px
- type: conditional
conditions:
- entity: climate.bob_klimaat
state: heat_cool
elements:
- type: state-icon
entity: climate.bob_klimaat
title: Klimaat aan
tap_action: none
hold_action: none
icon: mdi:fan
style:
top: "-45px"
right: 130px
"--paper-item-icon-color": var(--color_yellow)
- type: conditional
conditions:
- entity: sensor.bob_opladen
state_not: charging
elements:
- type: state-icon
entity: sensor.bob_opladen
title: Niet opladen
tap_action: none
hold_action: none
icon: mdi:flash
style:
top: "-45px"
right: 170px
- type: conditional
conditions:
- entity: sensor.bob_opladen
state: charging
elements:
- type: state-icon
entity: sensor.bob_opladen
title: Opladen
tap_action: none
hold_action: none
icon: mdi:flash
style:
top: "-45px"
right: 170px
"--paper-item-icon-color": var(--color_yellow)
- type: conditional
conditions:
- entity: cover.bob_charge_port_door
state: open
elements:
- type: state-icon
entity: cover.bob_charge_port_door
title: Laadklepje
tap_action: none
hold_action: none
style:
top: 50px
left: 75px
"--state-cover-open-color": var(--color_charg_port)
"--state-cover-close-color": lightgrey
- type: state-icon
entity: sensor.bob_binnentemperatuur
tap_action: none
hold_action: none
style:
top: 50%
left: 37%
- type: state-label
entity: sensor.bob_binnentemperatuur
tap_action: none
hold_action: none
style:
top: 50%
left: 50%
- type: conditional
conditions:
- entity: sensor.bob_opladen
state: charging
elements:
- type: state-label
entity: sensor.bob_charger_power
title: Oplaadsnelheid
tap_action: none
hold_action: none
style:
top: 25px
left: 75px
font-size: 100%
font-weight: normal
color: var(--color_charging)
- type: conditional
conditions:
- entity: sensor.bob_opladen
state_not: charging
elements:
- type: custom:mushroom-template-card
primary: This is just a label
tap_action: none
style:
top: "-200px"
left: 50%
z-index: 1
card_mod:
style: |
ha-card {
background: red;
}
- type: conditional
conditions:
- entity: binary_sensor.bob_front_driver_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_front_driver_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 15%
left: 55%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_rear_driver_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_rear_driver_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 15%
left: 35%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_rear_passenger_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_rear_passenger_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 85%
left: 35%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_front_passenger_door
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_front_passenger_door
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 85%
left: 55%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: cover.bob_frunk
state: open
elements:
- type: state-icon
entity: cover.bob_frunk
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 50%
left: 83%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: cover.bob_kofferbak
state: open
elements:
- type: state-icon
entity: cover.bob_kofferbak
title: Deur open
icon: mdi:lock-open-variant
tap_action: none
style:
top: 50%
left: 17%
"--paper-item-icon-color": var(--color_yellow)
z-index: 1
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_rear_left
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_rear_left
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 15%
left: 27%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_front_left
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_front_left
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 15%
left: 77%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_rear_right
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_rear_right
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 85%
left: 27%
"--paper-item-icon-color": red
- type: conditional
conditions:
- entity: binary_sensor.bob_tire_pressure_warning_front_right
state: "on"
elements:
- type: state-icon
entity: binary_sensor.bob_tire_pressure_warning_front_right
tap_action: none
hold_action: none
icon: mdi:alert
style:
top: 85%
left: 77%
"--paper-item-icon-color": red
- type: state-label
entity: sensor.bob_batterijniveau
tap_action: none
style:
bottom: "-97px"
left: 50%
z-index: 1
- type: custom:mushroom-template-card
title: Kilometerstand
primary: >-
{{ '{0:,.0f}'.format(states('sensor.bob_odometer')|int).replace(',', '.')
}} km
icon: mdi:speedometer
tap_action: none
style:
top: 105%
left: 50%
z-index: 1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-symbol-size: 21px;
--icon-size: 21px;
--icon-color: lightgrey;
}
.: |
ha-card {
border: none !important;
background: blue !important;
position: relative !important;
--card-primary-color: lightgrey;
}
- type: custom:mushroom-template-card
icon: mdi:lamp
primary: |
Laatste update: {{
as_timestamp(states.sensor.bob_binnentemperatuur.last_updated) |
timestamp_custom("%d-%m-%Y %H:%M:%S") }}
style:
bottom: "-140px"
left: 50%
font-size: 80%
font-weight: normal
card_mod:
style: |
ha-card {
margin: 10px !important;
border: none !important;
background: red;
position: relative !important;
--card-primary-color: lightgrey;
}
card_mod:
style: |
ha-card {
padding: 70px 0px 120px 0px;
--color_charging: {% if states('sensor.bob_opladen') == "charging" %} lightgreen {% else %} lightgrey {% endif %};
--color_charg_port: {% if states('sensor.bob_opladen') == "charging" %} lightgreen {% else %} #ffc107 {% endif %};
--color_yellow: #ffc107;
--ha-card-border-width: 0px;
}
I’m afraid you changed a part that was working. It’s the part where “primary: This is just a label” is.
This is a huge issue
primary: >-
{{ '{0:,.0f}'.format(states('sensor.bob_odometer')|int).replace(',', '.')
}} km
I ran into this issue the other day where card-mod does not work in conditional elements. After fighting it for several hours, I found an old issue that describes this behavior so I think it is just a limitation of card-mod or a peculiarity of how the conditional element works.
Anyway, I found a suitable workaround, at least for my situation. Instead of the conditional element, I just use the regular element (in my case a state-label) and then in the card-mod style use a template to inject css variable “display: none;”
I have no idea what I am doing, but this seems to get the job done.
This is actually a great suggestion!
Okay, based on the suggestion of Charles, I’ve made the code as follows (in Dutch, but you get the gist):
- type: custom:mushroom-template-card
title: Laden
primary: >-
{% if states('sensor.bob_opladen') == 'charging' %}
{{ states('sensor.bob_batterijniveau') }}% - Opladen klaar om {{ as_timestamp(states('sensor.bob_time_to_full_charge')) | timestamp_custom('%-H:%M') }}
{% elif states('sensor.bob_opladen') != 'charging' %}
{{ states('sensor.bob_batterijniveau') }}%
{% endif %}
tap_action: none
style:
bottom: "-100px"
left: 50%
z-index: 10
card_mod:
style: |
ha-card {
border: none !important;
background: transparent !important;
position: relative !important;
--card-primary-color: lightgrey;
}
Multiple ways to code this. To start, you do not have to state charging and not charging, just use else
{% if states('sensor.bob_opladen') == 'Charging' %}
{{ states('sensor.bob_batterijniveau') }}% - Opladen klaar om {{ as_timestamp(states('sensor.bob_time_to_full_charge')) | timestamp_custom('%-H:%M') }}
{% else %}
{{ states('sensor.bob_batterijniveau') }}%
{% endif %}
That still doesn’t address this code 
that was throwing a ton of errors