card_mod:
style: |
:host .text-content {
color: red;
}
I found this, but it still doesnât work.
I do not think this is written in the post I suggested you.
yes it is this, I have to change the text part and the code is this. I also looked in the changelog but I did not see any changes to the code I was using before
Sorry, do not want to seem rude, I do not understand what code you used & what code you are using now, but the code posted in the provided link keeps working:
Itâs probably a problem with my installation. I tried different codes to color the value, and none of them work.
The one you posted is
style:
hui-generic-entity-row:
$: |
.text-content:not(.info) {
color: orange;
}
but in my case it doesnât work.
Ill Suspect ya refer it like this:
:host {
--paper-item-icon-color:
{% set state = states(config.entity) %}
{% set color = {'Groen':'green',
'Geel':'yellow',
'Oranje':'orange',
'Rood':'red'} %}
{{color.get(state,'white')}}
refer from post 6271
Blockquote
or,use a mapper for the equality checks:
{% set state = states(config.entity) %}
{% set color = {'On':'green',
'Off':'yellow',
'Auto (off)':'red'} %}
{{color.get(state,'black')}}
it looks like this works on an entity card yesâŚ
prob is how to inject it on my own card > first codeâŚ
thnx sofar Ildar_Gabdullin!
Can you test it on a PC?
Mobiles are too small & too unpredicted (safari, webview are much worse than Chrome / FF).
like typing sms on this
If the code works on PC but does not on a mobile (Companion app) - try cleaning a Frontend cache in a Companion app.
Dear all, I would like to have a badge visible and blinking when the entity assume a specific state. In may case when my car is open. Is it possible? i tried with the fllowing code but doesât work. May I ask a little support?
thank you in advance
type: entity
show_name: false
show_state: true
show_icon: true
entity: binary_sensor.x2_xdrive20d_door_lock_state
color: red
name: Aperta
visibility:
- condition: state
entity: binary_sensor.x2_xdrive20d_door_lock_state
state: "on"
tap_action:
action: navigate
navigation_path: /dashboard-test/auto
card_mod:
style: |
ha-card {
{% if is_state('binary_sensor.x2_xdrive20d_door_lock_state', 'unlocked') %}
animation: blink 2s linear infinite;
{% endif %}
}
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
I wouldnât edit the yaml on the mobile. 
Compare your code and the code he sent you. If you find out where the difference is and where it is wrong⌠and if not, the easiest way is to copy the code from the example and change the entity no?
1 Like
Hi,
Iâm tinkering around with my entity card and I am able to adjust icon and colors based on state.
style: |
:host {
--card-mod-icon:
{% set text = states('sensor.tex_window_w10') %}
{% set icon =
{'Gesloten':'window-closed-variant',
'Open':'window-open-variant',
'Kipstand':'window-open',
'Fout!':'alert-circle'} %}
mdi:{{icon.get(text, 'help-circle')}};
--card-mod-icon-color:
{% set color =
{'Gesloten':'#607d8b',
'Open':'orange',
'Kipstand':'#ffc107',
'Fout!':'red'} %}
{{color.get(text, 'grey')}};
}
ha-tile-icon {
--tile-color:
{% set text = states('sensor.tex_window_w10') %}
{% set tile_color =
{'Gesloten':'#607d8b',
'Open':'orange',
'Kipstand':'#ffc107',
'Fout!':'red'} %}
{{tile_color.get(text, 'grey')}} !important;
}
ha-card {
--tile-color:
{% set text = states('sensor.tex_window_w10') %}
{% set tile_color =
{'Gesloten':'#607d8b',
'Open':'orange',
'Kipstand':'#ffc107',
'Fout!':'red'} %}
{{tile_color.get(text, 'grey')}} !important;
}
The tile on the left is based on the code above, the tile on the right is the standard one (not touched by card-mod)
If my window is closed (= âGeslotenâ) I would like to just show the standard color. I tried blue, grey, some hex-values. But does anyone know what the right âdefaultâ color is that is shown on the right?
Hi,
hopefully anyone will be able to help me. Trying to redesign my HA home dashboard, and would like to use single entity for each light to toggle it and see the consumption (sensor state), but only when light is on. Otherwise sensor state should be hidden.
Here is example of my code in glance card, which does not work (resp. everything works expect state hiding when light is off:
show_name: true
show_icon: true
show_state: true
type: glance
entities:
- entity: sensor.shellyplus1pm_xxxxxxxxxxx_switch_0_power
name: Garage
tap_action:
action: call-service
service: homeassistant.toggle
target:
entity_id: light.garage_light_switch_0
double_tap_action:
action: more-info
card_mod:
style: |
.entity-value {
visibility: {% if states('light.garage_light_switch_0') == 'off' %} hidden {% else %} visible {% endif %};
}
I found this and tried to apply it, but no luckâŚ
Use {% if ... %} to conditionally apply CSS styles. In this case, visibility: hidden hides the state, but keeps the space reserved. If you want to remove it entirely, use display: none.
Thanks a lot for your help!
Zdenek
Hi guys,
Maybe someone could check my code, please and tell me what is wrong here. The color of the room should change with color of my IKEA-bulb, but it doesn´t
type: picture-elements
image: /local/floorplan/base.png
elements:
- type: conditional
conditions:
- entity: light.tradfri_light
state: "on"
elements:
- type: image
tap_action:
action: none
hold_action:
action: none
entity: light.tradfri_light
image: /local/floorplan/light.tradfri_light.png
style:
filter: |-
[[[
'hue-rotate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[0] : 0) + 'deg) saturate(' + (states['light.tradfri_light'].attributes.hs_color ? states['light.tradfri_light'].attributes.hs_color[1] : 100) + '%)'
]]]
opacity: |-
[[[
(states['light.tradfri_light'].attributes.brightness || 0) / 255
]]]
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
- type: state-label
entity: light.tradfri_light
attribute: brightness
style:
top: 60%
left: 50%
- type: state-label
entity: light.tradfri_light
attribute: hs_color
style:
top: 65%
left: 50%
- type: state-icon
entity: light.tradfri_light
title: null
style:
top: 65.71%
left: 74.32%
border-radius: 50%
text-align: center
background-color: rgba(255, 255, 255, 0.3)
tap_action:
action: toggle
fixed values are working fine.
style:
filter: hue-rotate(30deg) saturate(100%)
opacity: 0.5
added the state values to check if they are displayed correctly
Where have you taken this code?
Is it taken from reddit, chatgpt etc?
Please go to the 1st post of this thraed â link at the bottom titled âfantasticâ â Glance card, use these examples as a starting point.
This is wrong, you are using smth looking like a JS code from some custom card like button-card.
Go to the 1st post of the thread â link at the bottom titled âfantasticâ â picture-elements
okay, thanks . i just simplified the code and changed it, but unfortunately without successâŚ
style:
left: 50%
top: 50%
width: 100%
mix-blend-mode: lighten
filter: >-
hue-rotate({{ state_attr('light.tradfri_light', 'hs_color')[0] | int
}}deg) saturate(100%)
opacity: "{{(state_attr('light.tradfri_light', 'brightness') / 255)}}"
in the Template I get the right values
Yes, it was taken from ChatGPT. Could you please be more specific with examples? I passed through topics and did not found anything helpful for first look. My point is to have entity in Glance card with consumption when turned on:
and without consumption when turned off:
But Picture elements card does not support templates.
Already told you where to find.