Templating horizontal buttons stack

[sergego84]

Is there a way to template the name and icon of individual buttons inside horizontal buttons stack?
I can template colors but have trouble templating names and icons.

For example, this styling works for background color of a button inside horizontal stack:

.solar > .bubble-background-color { background-color: ${hass.states['sensor.power_meter_active_power'].state > -200 ? 'rgb(60, 179, 113)' : 'orange'} !important; }

[dcplaya]

I too, am wanting to template the text of the button but am unable to figure out how to do it.

To expand on my request, I want to display dynamic text in the horizontal stack as well as dynamic subtext below it, on the same button. Please forgive my awful screenshot I attached to make it easier to understand

[exetico]

Hi. Is the graph the mini-graph-card, or another solution? :)

            - type: custom:mini-graph-card
              info: short
              artwork: cover
              entities:
                - entity: climate.wa_esp_wa_esp_livingroom
                  name: Stue
                  attribute: current_temperature
                  unit: °C
                  color: '#FFAF00'

[dcplaya]

Yep!

Here is the entire view code, if you'd like. It is incomplete, I am still building the hardware too. Its slow going, too many projects going at once.

views:
  - title: Grill
    icon: mdi:grill
    panel: false
    badges: []
    cards:
      - name: Grill Probes
        type: custom:mini-graph-card
        entities:
          - entity: sensor.thermostat_grill_probe01_temperature
            name: Probe 1
          - entity: sensor.thermostat_grill_probe02_temperature
            name: Probe 2
          - entity: sensor.thermostat_grill_probe03_temperature
            name: Probe 3
          - entity: sensor.thermostat_grill_probe04_temperature
            name: Probe 4
        align_icon: left
        align_state: center
        fill: true
        hours_to_show: 12
        points_per_hour: 60
        color_thresholds:
          - value: 50
            color: '#f39c12'
          - value: 75
            color: '#d35400'
          - value: 100
            color: '#c0392b'
      - square: false
        type: vertical-stack
        description: Popup that must have its own vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#probe01-settings'
            name: Probe 1
            icon: mdi:thermometer-probe
            style: |
              ${card.querySelector('.bubble-name').innerText = "It's currently"}
          - type: custom:bubble-card
            name: Alerts
            icon: mdi:alarm-bell
            card_type: button
            entity: automation.probe_01_out_of_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Target Temperature
            icon: mdi:target
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_01_target_temperature
            show_state: true
          - type: custom:bubble-card
            name: Cold Limit
            icon: mdi:snowflake
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_01_cold_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Hot Limit
            icon: mdi:heat-wave
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_01_hot_tolerance
            show_state: true
      - square: false
        type: vertical-stack
        description: Popup that must have its own vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#probe02-settings'
            name: Probe 2
            icon: mdi:thermometer-probe
          - type: custom:bubble-card
            name: Alerts
            icon: mdi:alarm-bell
            card_type: button
            entity: automation.probe_02_out_of_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Target Temperature
            icon: mdi:target
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_02_target_temperature
            show_state: true
          - type: custom:bubble-card
            name: Cold Limit
            icon: mdi:snowflake
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_02_cold_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Hot Limit
            icon: mdi:heat-wave
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_02_hot_tolerance
            show_state: true
      - square: false
        type: vertical-stack
        description: Popup that must have its own vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#probe03-settings'
            name: Probe 3
            icon: mdi:thermometer-probe
          - type: custom:bubble-card
            name: Alerts
            icon: mdi:alarm-bell
            card_type: button
            entity: automation.probe_03_out_of_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Target Temperature
            icon: mdi:target
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_03_target_temperature
            show_state: true
          - type: custom:bubble-card
            name: Cold Limit
            icon: mdi:snowflake
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_03_cold_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Hot Limit
            icon: mdi:heat-wave
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_03_hot_tolerance
            show_state: true
      - square: false
        type: vertical-stack
        description: Popup that must have its own vertical-stack
        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: '#probe04-settings'
            name: Probe 4
            icon: mdi:thermometer-probe
          - type: custom:bubble-card
            name: Alerts
            icon: mdi:alarm-bell
            card_type: button
            entity: automation.probe_04_out_of_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Target Temperature
            icon: mdi:target
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_04_target_temperature
            show_state: true
          - type: custom:bubble-card
            name: Cold Limit
            icon: mdi:snowflake
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_04_cold_tolerance
            show_state: true
          - type: custom:bubble-card
            name: Hot Limit
            icon: mdi:heat-wave
            card_type: button
            button_type: slider
            entity: input_number.grill_thermostat_probe_04_hot_tolerance
            show_state: true
            sub_button:
              - name: Increase Limit
                icon: mdi:plus
                show_name: false
                show_icon: true
                show_background: false
                tap_action:
                  action: null
      - type: custom:bubble-card
        card_type: horizontal-buttons-stack
        1_link: '#probe01-settings'
        1_name: Probe 1
        1_icon: mdi:thermometer-probe
        2_link: '#probe02-settings'
        2_name: Probe 2
        2_icon: mdi:thermometer-probe
        3_link: '#probe03-settings'
        3_name: Probe 3
        3_icon: mdi:thermometer-probe
        4_link: '#probe04-settings'
        4_name: Probe 4
        4_icon: mdi:thermometer-probe
        styles: >
          /* Move the buttons up from the bottom of the screen a little*/
          .horizontal-buttons-stack-card {
            bottom: 50px !important;
          } /* Selector for the '#probe01-settings' button  */ .probe01-settings
          > .background-color {
            opacity: 1 !important;
            background-color: ${hass.states['automation.probe_01_out_of_tolerance'].state === 'on' ? 'green' : 'gray'} !important;
          } /* Selector for the '#probe02-settings' button  */ .probe02-settings
          > .background-color {
            opacity: 1 !important;
            background-color: ${hass.states['automation.probe_02_out_of_tolerance'].state === 'on' ? 'green' : 'gray'} !important;
          } /* Selector for the '#probe03-settings' button  */ .probe03-settings
          > .background-color {
            opacity: 1 !important;
            background-color: ${hass.states['automation.probe_03_out_of_tolerance'].state === 'on' ? 'green' : 'gray'} !important;
          } /* Selector for the '#probe04-settings' button  */ .probe04-settings
          > .background-color {
            opacity: 1 !important;
            background-color: ${hass.states['automation.probe_04_out_of_tolerance'].state === 'on' ? 'green' : 'gray'} !important;
          }
  - title: Test
    path: test
    cards:
      - name: Grill Probes
        type: custom:mini-graph-card
        entities:
          - entity: sensor.thermostat_grill_probe01_temperature
            name: Probe 1
          - entity: sensor.thermostat_grill_probe02_temperature
            name: Probe 2
        hours_to_show: 12
        points_per_hour: 0.25
        color_thresholds:
          - value: 200
            color: '#f39c12'
          - value: 250
            color: '#d35400'
          - value: 275
            color: '#c0392b'
      - name: Test Buttons
        type: custom:bubble-card
        card_type: button
        card_layout: large
        button_type: name
        show_icon: false
        show name: false
        sub_button:
          - name: Probe 1
            icon: mdi:thermometer-probe
            show_background: false
            tap_action:
              action: navigate
              navigation_path: '#probe01-settings'
          - name: Probe 2
            icon: mdi:thermometer-probe
            show_background: false
            tap_action:
              action: navigate
              navigation_path: '#probe02-settings'
          - name: Probe 3
            icon: mdi:thermometer-probe
            tap_action:
              action: navigate
              navigation_path: '#probe03-settings'
            show_background: false
          - name: Probe 4
            icon: mdi:thermometer-probe
            show_background: false
            tap_action:
              action: navigate
              navigation_path: '#probe04-settings'
        styles: |
          .card-content {
            width: 100%;
            margin: 0 !important;
          }
          .bubble-button-card-container {
            background: none;
          }
          .bubble-sub-button {
            height: 46px !important;
            width: 46px !important;
          }
          .bubble-sub-button-container {
            width: 100%;
            justify-content: space-between !important;
          }
          .bubble-sub-button-icon {
            --mdc-icon-size: inherit !important;
          }
          .bubble-name-container {
            margin-right: 0px !important;
          }

[exetico]

Thanks for sharing!

[dcplaya]

@sergego84

I was able to modify a sub button text in the horizontal stack by doing the following. The icon should be very similar

${card.querySelector('.bubble-sub-button-1').querySelector('.bubble-sub-button-name-container').innerText = "Text Replacement · "