Tomm206
(Tomm206)
April 19, 2024, 8:43pm
1
Hi, I have following entity card, and I would like to change the color of „Now“ entity. If the entity’s state is more than 50%, then green color, if less than 50%, then red color. So, in this case, the number „11%“ should be red.
Thank you
type: custom:mod-card
card:
type: horizontal-stack
title: Battery
cards:
- type: entities
entities:
- entity: sensor.tpj4cjm04k_statement_of_charge_2
name: Now
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- entity: sensor.max_baterie_fve_dnes_2
name: Max today
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
show_header_toggle: false
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
1 Like
Suggest to ask similar questions in the dedicated card-mod thread .
You will probably attract more people to help / to see the solution.
You might try two conditional cards, one if the state is > 50%m and one if it is < 51%. Since they can’t both be true you will only ever see one, and the colour will appear to change.
For example:
- type: conditional
conditions:
- condition: state
entity: binary_sensor.window_open
state: 'off'
card:
type: tile
entity: binary_sensor.window_open
name: Windows
tap_action:
action: none
icon_tap_action:
action: none
- type: conditional
conditions:
- condition: state
entity: binary_sensor.window_open
state: 'on'
card:
type: tile
entity: binary_sensor.window_open
name: Window
color: red
tap_action:
action: none
icon_tap_action:
action: none
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.window_open', 'on') %}
--ha-card-background: #6c1919;
{% endif %}
}
Tomm206
(Tomm206)
April 20, 2024, 9:56am
4
Here is the solution. Thank to LiQuid_cOOled.
type: custom:mod-card
card:
type: horizontal-stack
title: Battery
cards:
- type: entities
entities:
- entity: sensor.tpj4cjm04k_statement_of_charge_2
name: Now
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.state {
color: {{'green' if states(config.entity) | int >= 50 else 'red' }}
}
2 Likes
jlrosssc
(Jlrosssc)
January 5, 2025, 1:50am
5
I have been using color conditions for a while but they quit working with 2025.1. Has anyone else seen the same?
You probably faced a “card-mod in 2025.1” issue. GO to card-mod thread for a fix.