Custom button card temperature

Configuration Frontend
1

hi, im using a custom button card to display the temperature and hopefully able to change icon color pending the temperature in the room, its not working and im not totally sure why…also would like it to be blue if under 20, green if 20-24 and red if over 25, any help would be appreciated.

here is my current code

type: custom:button-card
aspect_ratio: 1.2/1
color: green
color_type: icon
entity: sensor.lr_weather_temperature
name: Living Room Temperature
show_name: false
show_state: true
style:
icon_color:
- ‘{{ states(’‘sensor.lr_weather_temperature’‘) | int | gt(20) | ‘‘red’’ }}’
- ‘{{ states(’‘sensor.lr_weather_temperature’‘) | int | lt(20) | ‘‘blue’’ }}’

2

your formating is wrong for styling

try:

type: custom:button-card
aspect_ratio: 1.2/1
color: green
color_type: icon
entity: sensor.lr_weather_temperature
name: Living Room Temperature
show_name: false
show_state: true
style:
  icon:
    color: >
      [[[
        let temp = states("sensor.lr_weather_temperature") | int(0)
        if (temp > 20) {
          return 'red';
        } else if (temp < 20) {
          return 'blue';
        }
      ]]]
3

For Custom button card you need to use JavaScript not jinja

4

@andyblac You need to use styles: not style:

@Mike_Breault this should work for you …

type: custom:button-card
aspect_ratio: 1.2/1
color: green
color_type: icon
entity: sensor.lr_weather_temperature
name: Living Room Temperature
show_name: false
show_state: true
styles:
  icon:
    - color: |
        [[[ return entity.state >= 20 ? 'red' : 'blue';
           ]]]
1 Like
5

that worked except now its not displaying the temperature, its displaying the color as a temperature, like red °C

6

You don’t see the temp below the icon? Changing the styles doesn’t affect the entity state.

image
image818×652 7.38 KB

Other changes had to have been made. Please post your current card code.

8

now its working, it wasn’t before, super weird. thanks

9

any idea how to make the font size smaller so it’ll fit into my config? i thought this would work, but its not changing any sizing.

  • type: custom:button-card
    aspect_ratio: 1.2/1
    color: green
    color_type: icon
    entity: sensor.lr_weather_temperature
    name: Living Room Temperature
    show_name: false
    show_state: true
    styles:
    name:
    - font-size: 30%
    card:
    - height: 65px
    icon:
    - color: |
    [[[ return entity.state >= 21 ? ‘red’ : ‘blue’;
    ]]]
10

not sure how to get the indenting done while copying and pasting, but i assure you its correct on my screen

11

font-size goes under card, not name

  card:
   - height: 65px  
   - font-size: 30%

See #11 for posting code

1 Like