Looking to change background Color of Sub-Button based on State (Temperature)

[MarqBarq]

Goal

Working on a dashboard for some devices rack mounted in my basement. In this case a Synology NAS.

I'm wanting to change the color of the background of a sub-bubble based on the temperature of the server.

I found the code I am using on another example here and trying to modify it. I will be honest, I'm very new to this.

Want to change the background Green under 110 and Red over 155 and orange between the two.

Source Yaml

type: custom:bubble-card
card_type: button
button_type: state
name: CPU
icon: mdi:cpu-64-bit
sub_button:
  - entity: sensor.XX_basement_volume_1_used_space
    show_state: true
    state_background: false
    icon: mdi:file
  - entity: sensor.XX_basement_volume_1_total_size
    name: Total
    icon: mdi:harddisk-plus
    show_last_changed: false
    show_icon: true
    show_state: true
    state_background: false
  - show_state: true
    show_icon: false
    show_background: true
    state_background: false
    entity: sensor.XX_basement_volume_1_volume_used
    name: "Used "
    show_name: true
  - entity: sensor.XX_basement_memory_available_real
    show_name: false
    show_state: true
    state_background: false
    icon: mdi:memory
  - entity: sensor.XX_basement_temperature
    show_state: true
    state_background: false
  - entity: update.XX_basement_dsm_update
    show_state: true
    icon: mdi:update
grid_options:
  columns: full
entity: sensor.XX_basement_cpu_utilization_total
scrolling_effect: false
show_attribute: false
attribute: state_class
styles: |-
  .bubble-sub-button-5 {
    background-color: ${state > 155 ? 'red' : state < 110 ? 'green' : 'orange'} !important;
  }

Which step did you already try?

About everything. It is random. This is what I cobbled together based on another example. 

.bubble-sub-button-5 {
    background-color: ${state > 155 ? 'red' : state < 110 ? 'green' : 'orange'} !important;
  }

Problem

It does not work. Any help would be grateful. I want to solve this before I go and add it to the disks.

Read the documentation

• I have read the documentation

[HyperCriSiS]

#1253
Does this module not what you want?

[MarqBarq]

HyperCriSiS, thank you. This is a lot of code, and far more granular than I am looking to do. I am just wanting something simple. Under 100=Green, Over 155= Red, and 101 - 154 = Orange. The code I posted I found on someone else's solution for something different. I was just trying to reuse it for my thing.

[johndoe0815]

If you just use "state", this refers to the state of the main entity, not the one of the respective sub-button.

This is a working example for a sub-button:

.bubble-sub-button-2 {
  background-color: ${hass.states['sensor.aqara_temperature_sensor_kuhltruhe_temperature'].state >= -7 ? 'red' : 'white'} !important;
}

[MarqBarq]

Thank you! This worked perfectly.

Does anyone know the CSS for changing the color of a sub-button icon. My next task is to use this new found knowledge to add a status color to the hard drives... but I want to change the icon color vs the sub-bubble background, mainly for visual reasons.

So lets say I want the icon of Sub-button 2 to change colors based on status...

[HyperCriSiS]

All sub icons:
.bubble-sub-button-icon {
color: #000000 !important;
}

Specific sub icon:
.bubble-sub-button-1 .bubble-sub-button-icon {
color: #000000 !important;
}