Well unfortunately i don’t. Most of the time i’m just trying to make it work but i know that not the easiest way. Will look furture into this and hope i find a solution.
Or you can spend 5 minutes understand what is_state_attr is meant to do. The docs for templates are located here. And the blurb about is_state_attr says:
So, looking at what you wrote, what do you think is missing for the entity you are trying to use?
1 Like
Far as i understand it needs the attribute which in this case is ‘climate.vicare_heating’, second a name of the attribute which is ‘active_vicare_program’ and last the status of the attribute which is ‘reduced’.
Yep, that should work. So try that out, if it doesn’t post your code here.
Think i’m almost there but there must be something wrong with the entity and attribute i’m using.
My code:
type: 'custom:mod-card'
card:
type: horizontal-stack
cards:
- type: entity
entity: climate.vicare_heating
attribute: active_vicare_program
style: |
ha-card {
--state-icon-color: {% if state_attr('climate.vicare_heating', 'active_vicare_program' 'reduced') %} #50A14F {% else %} #5591c2 {% endif %};
}
Name of the entity: climate.vicare_heating
status: auto
list of the attributes:
hvac_modes: heat, off, auto
min_temp: 3
max_temp: 37
preset_modes: comfort, eco
current_temperature: 19
temperature: 17
hvac_action: idle
preset_mode: null
room_temperature: 18.9
active_vicare_program: reduced
active_vicare_mode: dhwAndHeating
heating_curve_slope: 1.5
heating_curve_shift: 6
month_since_last_service: error
date_last_service: error
error_history:
new: []
current:
- timestamp: ‘2016-12-15T14:10:54.000Z’
errorCode: fd
accessLevel: customer
priority: criticalError
audiences: []
gone: []
active_error:
new: []
current: []
gone: []
friendly_name: ViCare Heating
supported_features: 17
missing a comma after 'active_vicare_program'. Also, you’re not using is_state_attr, you’re using state_attr, which is not the same.
1 Like
Petro, thanks allot for your patience and great support, i got it working! 
type: 'custom:mod-card'
card:
type: horizontal-stack
cards:
- type: entity
entity: climate.vicare_heating
attribute: active_vicare_program
style: |
ha-card {
--state-icon-color: {% if is_state_attr('climate.vicare_heating', 'active_vicare_program', 'reduced') %} #50A14F {% else %} #5591c2 {% endif %};
}
1 Like
@thomasloven Do you have the code for the kitten with the slider?
I have not been able to recreate it or find anything like it.
I just updated Card-mod to 3.0.1 from 2.x - and experienced some problems.
The code which worked before does not work now.
First, I realized that styling a decluttering-card does not work.
Then I started checking simple cases like “styling entities card” (🔹 Card-mod - Add css styles to any lovelace card) and found more differences.
For example:
type: entities
title: 'Common: color icon'
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
name: Overwritten color
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: green !important;
}
The result used to be:
Now the result is this (do not bother about Dark theme):
But after I type something like a “space” in the editor window the result becomes this (but goes back to the 2nd picture after “save” or “cancel”):
The same behaviour in Chrome & Firefox (Win10x64). The browser’s cache was purged.
After reverting card-mod back to 2.x everything works fine.
Did you use the new syntax? And you re-read the readme, right?
As I understood, the old code without “card_mod” keyword is supposed to continue working.
Just style should still mostly work, but you won't get the new features.
Otherwise it would be a big trouble for many people - they will have to rewrite the code; that is why a proper solution was “you can continue using the old notation OR you can start using smth new with the new syntax”.
No.
Excellent MWE!
I can reproduce the problem and have a fix ready for publishing in a minute.
This also helped me find a bug severely affecting performance.
With the new features, you can also achieve the same thing in one of the following two ways, btw:
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
card_mod:
style:
hui-generic-entity-row$state-badge$ha-icon$: |
ha-svg-icon {
color: green !important;
}
card_mod:
style:
hui-text-entity-row:
$hui-generic-entity-row$state-badge$ha-icon$: |
ha-svg-icon {
color: red;
}
- type: entities
entities:
- entity: sun.sun
- entity: sun.sun
- entity: sun.sun
card_mod:
style: |
:host {
--icon-color: green !important;
}
card_mod:
style: |
ha-card {
--icon-color: red;
}
2 Likes
Hi!
i want the sensor to be different colors at 20-50-100%. how can i do it Thank you very much for the answers i want the sensor to be different colors at 20-50-100%. how can i do it .
Thank you very much for the answers.
type: 'custom:layout-card'
cards:
- type: entities
entities:
- entity: sensor.0x04cf8cdf3c772d_battery
type: 'custom:multiple-entity-row'
name: WC luminance
secondary_info: last-changed
entities:
- entity: sensor.0x04cf8cdf3c772d2d_linkquality
name: false
icon: true
styles:
'--paper-item-icon-color': cyan
- entity: sensor.0x04cf8cdf3c772d_linkquality
name: false
- entity: sensor.0x04cf8cdf3c772d_battery
name: false
icon: true
Hi. I have several "custom:simple-thermostat" cards. Based on the entity state (heat/off) I’m changing the background color for them. After updating to card-mod version 3.0.3 the cards are flickering like changing their backgrounds to default --card-background-color and back to state evaluated background color. Downgrading back to card-mod version 3.0.2 and clearing the cache ends the flickering. I’m missing something or…? If I remove the if condition the flickering stops. Here is my code:
- type: "custom:simple-thermostat"
entity: climate.kitchen
name: Kitchen
icon: none
control:
hvac:
'off':
include: true
icon: false
'heat':
include: true
name: Heat
icon: false
'auto':
include: false
name: Automatic
icon: false
preset:
away: false
home: false
sensors:
- entity: binary_sensor.window_1
name: Window
card_mod:
style: |
:host {
pointer-events: none;
}
card_mod:
style: |
ha-card {
background: {% if is_state('climate.kitchen', 'off') %} black {% else %} red {% endif %};
}
I’m hoping this should be fixed with 3.0.4
1 Like
Thank you for your efforts!
Also, this code stopped working (since 3.x):
type: entities
title: 'Common: color name & value'
style:
hui-text-entity-row:
$:
hui-generic-entity-row: |
.text-content {
color: red;
}
.:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: green;
}
entities:
- entity: sun.sun
- entity: sun.sun
The names are not colored, only values are.
Another variant - does work:
- type: entities
title: 'Common: color name & value (#2)'
style:
hui-text-entity-row:
$:
hui-generic-entity-row:
$: |
.info.pointer.text-content {
color: green;
}
.: |
.text-content {
color: red;
}
entities:
- entity: sun.sun
- entity: sun.sun
This code worked with 2.x:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
}
.:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
Now with 3.x the result is below - the secondary icons are not colored:
Another variant - does work:
type: entities
entities:
- type: 'custom:multiple-entity-row'
entity: sensor.yandex_time_home_ildar
style:
hui-generic-entity-row:
'div.entity:nth-child(2) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: green;
}
'div.entity:nth-child(4) state-badge':
$:
ha-icon:
$: |
ha-svg-icon {
color: red;
}
$:
state-badge:
$:
ha-icon:
$: |
ha-svg-icon {
color: orange;
}
entities:
- entity: sensor.yandex_time_home_ildar
attribute: jamsrate
name: пробки
unit: ''
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:car'
- entity: sensor.yandex_time_home_ildar
name: на дорогу
unit: ''
styles:
width: 60px
text-align: center
- entity: sensor.service_empty_value
name: false
unit: false
icon: 'mdi:link'
tap_action:
action: url
url_path: xxxcc
name: Colored all icons
unit: ''
icon: 'mdi:account'
toggle: false
show_state: false
state_header: ''
secondary_info: last-changed
.:
anything:
was never supposed to work, and when it did (by chance) it was exactly the same as
anything:
.: is always the end of the chain.