Card mod. Change colour of Secondary Text based on last updated

Configuration Frontend
1

I track several work refrigerators and would like to highlight where thier temperature is too high and if their info has not been recently updated.

I can get the Temperature icon to turn red when the temperature is too high (in this case 8˚C) but cannot work out how to change colour of the secondary info if not updated in the last 60 minutes.

My current code is:

type: entities
entities:
  - entity: sensor.temperature_4oc_1_temperature_3
    name: '4˚C #1'
    secondary_info: last-updated
    card_mod:
      style: |
        :host {
          {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}
            --paper-item-icon-color: #d6494c;
          {% endif %}
        }
title: 4˚C Fridges
state_color: true

Any help appreciated!

2

This should work for you…

image
image782×202 8.1 KB

type: entities
entities:
  - entity: sensor.temperature_4oc_1_temperature_3
    name: '4˚C #1'
    secondary_info:  last-updated
    card_mod:
     style:
     
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}color: yellow !important;
              }{% endif %}
title: 4˚C Fridges
state_color: true
3

Thanks. That works well for the Text but I loose the icon change when the demo is over 8˚C. I tried to add the original code as well but it didn’t work.

type: entities
entities:
  - entity: sensor.temperature_4oc_1_temperature_3
    name: '4˚C #1'
    secondary_info: last-updated
    card_mod:
      style: |
        :host {
          {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}
            --paper-item-icon-color: #d6494c;
          {% endif %}
        }
        |
      hui-generic-entity-row:
          $:
            .info.pointer .secondary: |
              ha-relative-time {
                {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}color: red !important;
                }{% endif %}
title: 4˚C Fridges
state_color: true
4

Your merge was incorrect. You need to use .: |

image
image820×230 8.78 KB

type: entities
entities:
  - entity: sensor.temperature_4oc_1_temperature_3
    name: '4˚C #1'
    secondary_info:  last-updated
    card_mod:
     style:
     
      hui-generic-entity-row:
        $:
          .info.pointer .secondary: |
            ha-relative-time {
              {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}color: yellow !important;
              }{% endif %}
      .: |
       :host {
          {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}
            --paper-item-icon-color: #d6494c;
          {% endif %}
        }
title: 4˚C Fridges
state_color: true
5

sorry if i’m missing something, but would it be simpler to use --secondary-text-color? first,

type: entities
entities:
  - entity: sensor.temperature_4oc_1_temperature_3
    name: '4˚C #1'
    secondary_info: last-updated
    card_mod:
      style: |
        :host {
          {% if states('sensor.temperature_4oc_1_temperature_3')| int > 8 %}
            --paper-item-icon-color: #d6494c;
            --secondary-text-color: yellow;
          {% endif %}
        }
title: 4˚C Fridges
state_color: true

then also, you had asked about changing it if it hadn’t been updated for 60 minutes… but the examples in this thread don’t do that… is your question also about how to do that? if so, prob use sensor.temperature_4ox_1_temperature_3.last_updated ?

6

( to OP) You are spending too much resources. There is a dedicated card-mod thread, no need to create a new one.
Everything is explained.
1st post → link at the bottom → entities card

1 Like
7

Works perfectly - thanks!

8

I did search but obviously not very well. I can see that the post you mentioned is very detailed thank you for pointing it out.