Sensor help please and Thank you!

Template sensor color questions…

This is what I have and it works great but I’m trying to change the color of the text depending on integer that returns… it’s part of a sentence so I only want to change the color of the integer and not the words if that makes any sense… It only returns an integer with no other things like degree symbol… just a number like 29…etc.

- platform: template
  sensors:
    round_temp_outside:
      value_template: >-
        {{ states('sensor.kelm_temperature') | float | round(0) }}

I did try to change the value_template but I get errors so not really sure what direction to go into. [ie if temp is below 32F then return 32 colored blue, etc]

Any help would be appreciated!!

Thank you!

Maybe I misunderstood what you are trying to do with a Template Sensor, but its state value has no color control.

Where is this sentence displayed?

For example, if it’s displayed using a Markdown card then you can use HTML tags to set the color in whatever way you want.

This is the card in its current written state:

- type: custom:stack-in-card
        cards:
          - type: markdown
            tap_action:
              action: navigate
              navigation_path: weather
            card_mod:
              style:
                .: |
                  ha-card {
                      background-color: rgba(0,0,0,0) !important;
                      box-shadow: none;
                      margin-left:0rem;
                      font-size: 22px !important;
                      width: auto !important;
                      }
            content: >
              ###{% if now().hour  < 5 %} {{'\U0001F31B'}}  Good Night 
              {% elif now().hour < 12 %} {{'\U0001f60e'}} Good Morning 
              {% elif now().hour < 18 %} {{ '\U0001F913' }}Good Afternoon   
              {% else %} {{'\U0001F603'}} Good Evening 
              {% endif %}  {{user}}.
              <br/>  Temperature  {{states('sensor.round_temp_outside') }}°, {{states('weather.accuweather') }}
              <br/> {{ states ('sensor.next_holiday') }} in {{ states ('sensor.holiday_time')}}
              <br/> Air Filter has  {{ states('sensor.mi_air_purifier_3_3h_filter_life_remaining') }}% left!

The picture below is the number I’m trying to change…depending on the integer returned in the sensor… [Circled in red]

Screenshot 2025-02-02 172849

I’ve tried a couple things but just not sure how to get that one thing to do what I want it to… if that makes any sense… I can be unclear at times… I know this LOL
Thank you!

Perfect. The only thing missing is the HTML tag I had mentioned.

Here’s the basic principle for setting text color with the <font> tag.

{% set t = states('sensor.round_temp_outside') | float(0) -%}
{% set c = iif(t < 32, 'blue', 'black') -%}
###{% if now().hour < 5 %} {{'\U0001F31B'}} Good Night
{% elif now().hour < 12 %} {{'\U0001f60e'}} Good Morning
{% elif now().hour < 18 %} {{ '\U0001F913' }} Good Afternoon
{% else %} {{'\U0001F603'}} Good Evening {% endif %} {{user}}.
<br/> Temperature <font color='{{c}}'>{{ t }}°</font>, {{states('weather.accuweather') }}
<br/> {{ states ('sensor.next_holiday') }} in {{ states ('sensor.holiday_time')}}
<br/> Air Filter has {{ states('sensor.mi_air_purifier_3_3h_filter_life_remaining') }}% left!

Obviously you will need to set the colors to whatever you prefer.


EDIT

Correction. Added missing closing parenthesis on second line.

1 Like

Thank you very much!!!

1 Like

Hate to ask you one more thing if you don’t mind, Thank you!
So here’s the final… however I am getting an error and not sure where it is…

- type: markdown
            tap_action:
              action: navigate
              navigation_path: weather
            card_mod:
              style:
                .: |
                  ha-card {
                      background-color: rgba(0,0,0,0) !important;
                      box-shadow: none;
                      margin-left:0rem;
                      font-size: 22px !important;
                      width: auto !important;
                      }
            content: >
              {% set t = states('sensor.round_temp_outside') | float(0) -%}
              {% set c = iif(t < 32, 'blue', 'black' -%}
              ###{% if now().hour < 5 %} {{'\U0001F31B'}} Good Night
              {% elif now().hour < 12 %} {{'\U0001f60e'}} Good Morning
              {% elif now().hour < 18 %} {{ '\U0001F913' }} Good Afternoon
              {% else %} {{'\U0001F603'}} Good Evening {% endif %} {{user}}.
              <br/> Temperature <font color='{{c}}'>{{ t }}°</font>, {{states('weather.accuweather') }}
              <br/> {{ states ('sensor.next_holiday') }} in {{ states ('sensor.holiday_time')}}
              <br/> Air Filter has {{ states('sensor.mi_air_purifier_3_3h_filter_life_remaining') }}% left!

TemplateSyntaxError: unexpected ‘%’

Not sure the issue there… or which one it is…

That’s due a mistake I made. I overlooked to add a closing parenthesis on the second line.

{% set c = iif(t < 32, 'blue', 'black') -%}
                                      ^
                                      |
Add this ------------------------------

Perfect!! Thank you!!

Screenshot 2025-02-03 065132

Here’s the final in case anyone else is interested in doing the same kind of thing… hope if helps someone else too!

- type: custom:stack-in-card
        cards:
          - type: markdown
            tap_action:
              action: navigate
              navigation_path: weather
            card_mod:
              style:
                .: |
                  ha-card {
                      background-color: rgba(0,0,0,0) !important;
                      box-shadow: none;
                      margin-left:0rem;
                      font-size: 22px !important;
                      width: auto !important;
                      }
            content: >
              {% set t = states('sensor.round_temp_outside') | float(0) -%}
              {% set c = iif(t <= 32, 'lightblue', iif(t >= 33, 'cyan', iif(t >= 50, 'darkorange', iif(t >= 70, 'orangered',  iif(t >= 80, 'red', t, white))))) -%}
              ###{% if now().hour < 5 %} {{'\U0001F31B'}} Good Night
              {% elif now().hour < 12 %} {{'\U0001f60e'}} Good Morning
              {% elif now().hour < 18 %} {{ '\U0001F913' }} Good Afternoon
              {% else %} {{'\U0001F603'}} Good Evening {% endif %} {{user}}.
              <br/> Temperature <font color='{{c}}'>{{ t }}°</font>, {{states('weather.accuweather') }}
              <br/> {{ states ('sensor.next_holiday') }} in {{ states ('sensor.holiday_time')}}
              <br/> Air Filter has {{ states('sensor.mi_air_purifier_3_3h_filter_life_remaining') }}% left!

If you test that template in the Template Editor, you’ll see that it reports cyan for any value of t greater than 32.

I suggest you use this:

{% set c = {
   t < 32: 'lightblue',
   32 <= t < 50: 'darkorange',
   50 <= t < 70: 'orangered',
   70 <= t < 80: 'red' }.get(true, 'white') -%}

Awwwwwwwwww yes you are correct and Thank you again!!!

{% set t = states('sensor.round_temp_outside') | float -%}
              {% set c = {
                t < 32: 'lightblue',
                32 <= t < 50: 'darkorange',
                50 <= t < 70: 'orangered',
                70 <= t < 80: 'red' }.get(true, 'white') -%}
              ###{% if now().hour < 5 %} {{'\U0001F31B'}} Good Night
              {% elif now().hour < 12 %} {{'\U0001f60e'}} Good Morning
              {% elif now().hour < 18 %} {{ '\U0001F913' }} Good Afternoon
              {% else %} {{'\U0001F603'}} Good Evening {% endif %} {{user}}.
              <br/> Temperature <font color='{{c}}'>{{ t }}°</font>, {{states('weather.accuweather') }}
              <br/> {{ states ('sensor.next_holiday') }} in {{ states ('sensor.holiday_time')}}
              <br/> Air Filter has {{ states('sensor.mi_air_purifier_3_3h_filter_life_remaining') }}% left!

Just in case anyone else is interested… Thank you once again @123 Taras for all the help!! This is what I’ve created!

The Code:

- type: custom:stack-in-card
        cards:
          - type: markdown
            content: >-
              <center>{{ now().strftime('%a %b %-d, %-I:%M %p') }}<br /><br />
              <font size=6px>
              {% if now().hour < 5 %} {{'\U0001F31A'}} Good Night
              {% elif now().hour < 12 %} {{'\U0001F31E'}} Good Morning
              {% elif now().hour < 18 %} {{ '\U0001F913' }} Good Afternoon
              {% else %} {{'\U0001F319'}} Good Evening {% endif %} {{user}}</font></center>
            card_mod:
              style:
                .: |
                  ha-card {
                      font-size: 35px !important;
                      border: none !important;
                      background-color: rgba(0,0,0,0) !important;
                      margin-top: 20px !important;
                      height: 125px !important;
                      }
          - type: custom:mushroom-template-card
            primary: "{{states('sensor.sunleft')}} "
            secondary: "{{states('sensor.sun_rise')}} - {{states('sensor.sun_set')}}"
            entity: sensor.bathroom_temp_sensor_temperature
            icon: |2
              {% if states('sun.sun') =='above_horizon' %}  mdi:sun-compass
              {% else %} mdi:weather-night
              {% endif %}
            icon_color: |2-
              {% set bl = states('sun.sun') %}
              {% if bl == "above_horizon" %} #FFFF00
              {% else %} #000080
              {% endif %}
            layout: vertical
            card_mod:
              style: |
                ha-card { 
                border: none !important;
                height: 90px !important;
                background-color: rgba(0,0,0,0) !important;
                --card-primary-font-size: 15px !important;
                --card-secondary-font-size: 15px !important;
                --card-primary-color: white !important;
                --card-secondary-color: yellow !important;
                --card-primary-font-weight: 800 !important;
                --card-secondary-font-weight: 1000 !important;
                }
                mushroom-card {
                  margin: 10px;
                }
          - type: markdown
            tap_action:
              action: navigate
              navigation_path: weather
            card_mod:
              style:
                .: |
                  ha-card {
                      border: none !important;
                      background-color: rgba(0,0,0,0) !important;
                      box-shadow: none;
                      margin-left:0rem;
                      font-size: 20px !important;
                      width: auto !important;
                      }
            content: >
              {% if (now().hour < 17) and (now().hour > 4) %}  <b>Today</b>: <br /> {{ states('sensor.accuweather_condition_day_0d') }}<br/><br/><b>Tonight</b>: <br /> {{ states('sensor.accuweather_condition_night_0d') }}
              {% else %} <b>Tonight</b>: <br /> {{ states('sensor.accuweather_condition_night_0d') }}<br/><br/><b>Tomorrow</b>: <br /> {{ states('sensor.accuweather_condition_day_1d') }}
              {% endif %}
          - type: markdown
            tap_action:
              action: navigate
              navigation_path: weather
              card_size: 1
            content: >
              {% set t = states('sensor.round_temp_outside') | float -%}
              {% set c = {
                t < 32: '#9dd3fa',
                32 <= t < 50: '#fa7c03',
                50 <= t < 70: '#FF7F50',
                70 <= t < 80: '#C70039' }.get(true, '#fdfefe') -%}
              <font size=6px> Current Temperature <font color='{{c}}'>{{ t }}°</font>              
              {% set q = states('sensor.airnow_aqi') | float -%}
              {% set d = {
                q < 51: '#adff2f',
                51 <= q < 101: '#ffff00',
                101 <= q < 151: '#ffa500',
                151 <= q < 201: '#ff0000',
                201 <= q < 301: '#9370db'}.get(true, '#800000') -%}
              <br />Air Quality: <font color='{{d}}'>{{q}} 
              </font>
            card_mod:
              style:
                .: |
                  ha-card { 
                      line-height: 1.1;
                      border: none !important;
                      background-color: rgba(0,0,0,0) !important;
                      margin-left:0 rem !important;
                      margin-top: 0 rem !important;
                      margin-bottom: 1 px !important;
                      font-size: 30px !important; 
                      height: 100px !important;   
                      }

Sunrise Sensor:

sunleft:
      value_template: >-
        {% set setting = state_attr('sun.sun','next_setting') | as_datetime %}
        {% set rising = state_attr('sun.sun','next_rising') | as_datetime %}
        Sun{{ iif(rising < setting, 'rise', 'set') }} in {{ (iif(rising < setting, rising, setting)  - now()).total_seconds() | timestamp_custom('%H:%M',0) }}
      icon_template: >-
        {% if (state_attr('sun.sun', 'above_horizon'))  %}
          mdi:weather-sunny
        {% else %}
          mdi:weather-night
        {% endif %}
sun_rise:
      friendly_name: "Elmira Sunrise"
      value_template: >
        {{ (as_timestamp(states('sensor.sun_next_rising')))| timestamp_custom('Sunrise at %-I:%M AM', 4) }}
      icon_template: >-
        {% if states('sensor.sun_next_rising')  %}
          mdi:weather-sunset-up
        {% endif %}

    sun_set:
      friendly_name: "Elmira SunSet"
      value_template: >
        {{ (as_timestamp(states('sensor.sun_next_setting')))| timestamp_custom('Sunset at %-I:%M PM', 4) }}
      icon_template: >-
        {% if states('sensor.sun_next_setting')  %}
          mdi:weather-sunset-down
        {% endif %}