If you want to change all the icons active colour just change the them variable state-icon-active-color to red.
like this?:
type: glance
entities:
- entity: binary_sensor.laadpaal_jc_l
- entity: binary_sensor.laadpaal_jc_r
- entity: sensor.netatmo_huiskamer_reachability
style: |
:host {
--state-icon-active-color:
red;
}
(Netatmo is 100% sure active)
this is the result… no red icon 
No, like this:
That will change for all cards the icon color? I just want for that particular card the icon colors changed.
So this is to rigid 
This works for the “off” (green) and unavailable (gray) state, but the “on” state it is yellow again
type: glance
entities:
- entity: binary_sensor.laadpaal_jc_l
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% elif states(config.entity) == 'off' %}
green;
{% else %}
gray;
{% endif %}
}
- entity: binary_sensor.laadpaal_jc_r
style: |
:host {
--paper-item-icon-color:
{% if states(config.entity) == 'on' %}
red;
{% elif states(config.entity) == 'off' %}
green;
{% else %}
gray;
{% endif %}
}
show_state: false
title: Laadpalen J
1 Like
Try adding state_color: false so that the default logic for setting the colour doesn’t get applied. That seems to work for me.
2 Likes
That did the trick!
Anyone can help me with this?
Try !important
hi
Where ? In the code? or you mean here in the post?
IF you mean in the code… where do i place it
height: 128px !important, if you’re willing to help reduce forum load try reading the last 25 replies and see if you can learn basic CSS.
Hey,
That fixed it, thanks mate !
I was trying to modify this for the whole view:
title: Home main
style: |
#columns {
justify-content: end !important;
}
views:
- path: default_view
title: Home
panel: false
icon: 'hass:home'
or per card
You’ll need to use a card-mod theme for that. Ask over in that topic.
Thanks 
now I own two beers
Hello everyone.
after i have updated to HA 117.2 my iframe panel is no longer fullscreen.
Lovelace code:
type: 'custom:config-template-card'
entities:
- sensor.metabaseuri
card:
type: iframe
style: |
#root {
height: calc(100vh - 48.5px);
padding-top: 0 !important;
}
url: '${states[''sensor.metabaseuri''].state}'
This is what it looks like:
Does anybody have an idea how to fix this ?
You should probably enable panel mode instead of using card-mod.
Panel mode is enabled:
- icon: 'mdi:currency-eur'
panel: true
badges: []
cards:
- type: 'custom:config-template-card'
entities:
- sensor.metabaseuri
card:
type: iframe
style: |
#root {
height: calc(100vh - 48.5px);
padding-top: 0 !important;
}
url: '${states[''sensor.metabaseuri''].state}'
Hello,
I have this simple card:
It’s possible:
- change the color of the state?
- blink the state?
thks
Blinking is a more advanced part. Try taking the w3schools CSS course (look for keyframes), and combine it with this. I would rather teach you how to use card-mod than tell you how to use card-mod. Here’s a simple implementation of changing the color:
type: entities
entities:
- entity: sensor.time
style: |
.text-content {
color: red;
}
1 Like
Thanks KTibow,
This way, it does what I want
type: entities
entities:
- entity: sensor.esc_janela
style: |
.text-content {
color: var(--my-font01-color);
animation: var(--my-animation);
}
@keyframes blink {
50% {
background: white;
opacity: 0.0;
}
style: |
ha-card {
--my-font01-color: {% if states('sensor.esc_janela') == 'Aberta' %} red {% else %} black {% endif %};
--my-animation: {% if states('sensor.esc_janela') == 'Aberta' %} blink 2s ease infinite {% endif %};
}