I do not understand what is ācolored imageā ))).
An image may be saturated, inversed, with changed brightness / contrast.
Try playing with this.
Was this in response to my issue? Was there more info you meant to add? Thx lldar!
In your post there was a screenshot from Code Inspector.
And I concluded that you were looking at a wrong element.
So - check āha-state-iconā branch, it is different for different domains.
Awesome, I see now, I had to use ha-icon at the end of the path. My last question is why a card title is required for the card-mod code to run. When I remove the title, the colors revert to default.
Thank you!! I will donate lldarāmuch appreciate your help on this.
Could you elaborate?
Oh, thanks a lot))
Post a SHORT code with one formatted element - whose element is lost with a title.
Update: it happens because a title is places inside a ādivā element:
So if you DO need a title - just correct indexes (like ā(2) ā (3)ā).
I donāt want a title at all, did you mean to say DONāT need it? If so, I donāt understand how to correct the indexes so that itās not required within the div.
Well, if you do not need a title - do not add it)).
You already wrote that you got a desired styled - and that this styling was lost after adding a title. I explained you why it happened.
would it be possible to create something like this on card-mod?
How can I adjust the code so the title is not in the div? Iām sorry but this does not make sense. I could see how adding a title would affect the div and styling. It doesnāt make sense to me why it would be required. Any hints on how to arrange the code to prevent this? What did you mean by correcting the indexes (like ā(2) ā (3)ā)? btw, I did buy you a $15 coffee, I wasnāt just saying that. 
refunded, I just said that.
I already answered here and asked you to post a short code with a successful styling. Then I will show you what to change there for a ānon titleā case.
Does anyone know whether card_mod can colorize an icon using a Kelvin value? Iām attempting to create some RGBW presets and Iād like some of the buttons to represent their Kelvin values.
It seems you took my comment the wrong way. I just wanted to let you know that I appreciate the help and so I donatedāno need to be rude. Here is my code for the card:
- camera_view: auto
type: picture-glance
image: /local/Ford_Explorer3.gif
title: +
entities:
- entity: sensor.fordpass_doorstatus
show_state: true
- entity: sensor.fordpass_fuel
show_state: true
- entity: sensor.fordpass_battery
- entity: sensor.fordpass_oil
- entity: sensor.fordpass_tirepressure
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-icon {
{% if is_state('sensor.fordpass_doorstatus','Closed') %}
color: green !important;
{% else %}
color: red;
{% endif %}
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-icon {
{% if states('sensor.fordpass_fuel') | int > 30 %}
color: green !important;
{% elif states('sensor.fordpass_fuel') | int > 10 %}
color: orange;
{% elif states('sensor.fordpass_fuel') | int > 0 %}
color: red;
{% endif %}
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$: |
ha-icon {
{% if is_state('sensor.fordpass_oil','STATUS_GOOD') %}
color: green !important;
{% else %}
color: yellow;
{% endif %}
}
div:nth-child(4):
ha-icon-button ha-state-icon:
$: |
ha-icon {
{% if is_state('sensor.fordpass_battery','STATUS_GOOD') %}
color: green !important;
{% else %}
color: yellow;
{% endif %}
}
div:nth-child(5):
ha-icon-button ha-state-icon:
$: |
ha-icon {
{% if is_state('sensor.fordpass_tirepressure','STATUS_GOOD') %}
color: green !important;
{% else %}
color: yellow;
{% endif %}
}
Compare these cards:
type: vertical-stack
cards:
- type: picture-glance
image: /local/images/test/blue.jpg
title: +
entities: &ref_entities
- entity: sensor.processor_use
show_state: true
- entity: sensor.processor_use
show_state: true
- entity: sensor.processor_use
card_mod:
style:
.box div:nth-child(2):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: red;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: orange;
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: yellow;
}
- type: picture-glance
image: /local/images/test/blue.jpg
entities: *ref_entities
card_mod:
style:
.box div:nth-child(1):
div:nth-child(1):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: red;
}
div:nth-child(2):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: orange;
}
div:nth-child(3):
ha-icon-button ha-state-icon:
$: |
ha-icon {
color: yellow;
}
As I said here - indexing should be corrected when a title is added/removed.
I get it now, changed the .box div:nth-child(2) to a (1). thanks.
How could I insert an svg file with the possibility of being able to modify its CSS?
Why not? Search for a kind of mapping table or mapping formular from kelvin to rgb (look-a-like) and then set it accordingly with a fitting template.
Btw, using an HSL format for a color I consider as the best choice for a temperature - if talking about kettles, boilers etc - i.e. related to heating.