Why do you think that this code works for Tile card?
1 Like
sure, and weāre here to helpā¦ 
where did you find this syntax for the primary text (hint) on the card to change color ?
One more remark: we should not take a code for card_A and blindly apply it for card_B.
Hi,
I am using a tile card, but I would like to have the icon itself (not just the color) changed based on the status of that entity.
I tried the YAML below, but was not succesfull. Iām seeing a lot of posts to change the icon colour based on the status, but not the icon itself.
type: tile
entity: sensor.sauna_status
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: |-
{% if is_state(entity, '0') %}
mdi:power-off
{% else %}
mdi:power-standby
{% endif %}
I guess this is possible using card-mod?
sorry.
The instructions on Git-Hub say ā¦ take this code, copy it into your card and the text is red.
I have now used a ātype: entitiesā card. It works with this code. Now I know that the integration works if I use the right syntax.
How do I find out for a type of card which attributes are supported, e.g. ha-card.
i was curious if anyone has used card mod with kiosk mode at all. or if itās even possibleā¦
as an example i was hoping to have something like a fixed position for a cardā¦ but it doesnāt matter whether the header in kiosk mode is showing or hidden, itās always in the same spotā¦ can we make the fixed position based on whether the header is showing in kiosk mode?
Correct, and this code is for Entities card.
What you can (should) do is:
- Take that simplest example for Entities card.
- With Code Inspector (or whatever it is called in your browser) find out which particular css property that simplest code changes. This is for learning.
- Next take your Tile card and with Code Inspector find out what elements of your card and with what css properties may be styled.
Or use a shorter way: find ready styles for Tile card for your needs.
Based on some examples in this topic (thx), I concluded that I should adapt the mdc-icon propertiesā¦ But below code is not successful. Can anyone help?
type: tile
entity: sensor.sauna_status_text
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: mdi:heat-wave
card_mod:
style: |
ha-state-icon {
--mdc-icon:
{% if is_state('sensor.sauna_status_text', 'Uitgeschakeld') %}
"mdi:power-off"
{% elif is_state('sensor.sauna_status_text', 'Stand-by') %}
"mdi:power-standby"
{% elif is_state('sensor.sauna_status_text', 'Opwarmen') %}
"mdi:heat-wave"
{% elif is_state('sensor.sauna_status_text', 'Fout!') %}
"mdi:alert-circle"
{% else %}
"mdi:help-circle"
{% endif %};
}
take out all the quotes around the mdi: icons
edit: I didnt check whether this is a functional mod for tile, my remark was only valid for the jinja template itself
1 Like
Thanks!
The quotes were part of the problem, but I also needed some other adaptations to my coding:
type: tile
entity: sensor.sauna_status_text
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: mdi:heat-wave
card_mod:
style: |
:host {
--card-mod-icon:
{% if is_state('sensor.sauna_status_text', 'Uitgeschakeld') %}
mdi:power-off
{% elif is_state('sensor.sauna_status_text', 'Stand-by') %}
mdi:power-standby
{% elif is_state('sensor.sauna_status_text', 'Opwarmen') %}
mdi:heat-wave
{% elif is_state('sensor.sauna_status_text', 'Fout!') %}
mdi:alert-circle
{% else %}
mdi:help-circle
{% endif %};
}
It works!
check this:
{% set text = states('sensor.sauna_status_text') %}
{% set icon =
{'Uitgeschakeld':'power-off',
'Stand-by':'power-standby',
'Opwarmen':'heat-wave',
'Fout!':'alert-circle'} %}
mdi:{{icon.get(text,'help-circle')}};
3 Likes
I would like to change the color of every instance of a particular icon within an atomic calendar card.
I have the card mod code that changes every iconās color
card_mod:
style: |
ha-icon {
color: teal !important;
}
But, I would like to make all mdi:circle icons one color and all mdi;triangle colors another color to separate the calendar events more distinctly.
I have identified the snippet of code where the icons are located, but despite my searching, have not been able to figure out how to change the color of just the circle icons. The snippet of code from the card is below if anyone could help. Thanks.
<ha-icon class="event-icon" style="color: var(--primary-text-color);" icon="mdi:circle"></ha-icon>
ha-icon.event-icon
change color for icons with class event-icon
That would change every icon. I would like to change just the circle icons while leaving the rest the default color. All icons have the class event-icon, so unfortunately that wonāt work for me.
then you would need to find out what condition makes the icons change, and use that in your modification
The icons are manually set in the card and each calendar has its own specific icon assigned; though you can set different calendars to the same icon.
I looked at the front end code of events from different calendars and they are all div class=āsingle-event-containerā, nothing that uniquely identifies the different calendars; so whatever is conditional isnāt presenting in the card itself.
Screenshot below shows two different events from two different calendars:
Top single-event-container is from calendar A and has a circle icon, bottom one is from calendar B and has a triangle icon. Thereās no difference in the rest of the code when expanded.
ha-icon[icon="mdi:circle"] {
color: red;
}
3 Likes
THANK YOU! Seriously, I have been beating my head against this for too long. I really appreciate it. And in case anyone runs across this later, I did have to add ā!importantā to make it work:
color: red !important;
I honestly had no idea we could do thatā¦