entity value as name

[dummbold]

Goal

The goal is to display the actual month as the name of the button.

Version 1: A "helper" sensor generates the name of the actual month. But I can't use the sensor state in the BubbleCard (Bubble Card expects a string, but watches the value as object. I tried both: change to string in sensor and in BC-call without success)

Version 2: Direct generation of the month in the button .yaml - according to the example in the Templates section of the docs

Source Yaml

Pure .YAML

type: custom:bubble-card
entity: sensor.pmmg3_g_monatlich
name: Monat
card_type: button
button_type: state
show_name: true
show_state: true
scrolling_effect: false
button_action:
  tap_action:
    action: none
icon: mdi:counter
tap_action:
  action: more-info
sub_button:
  - entity: sensor.pmmg3_g_monatlich
    icon: mdi:wifi
    show_state: false
    tap_action:
      action: url
      url_path: http://192.168.163.116
    show_background: false
grid_options:
  columns: 6
  rows: 1
card_mod:
  style: >
    .bubble-name-container .bubble-name {
      font-size: 12px !important;
      font-weight: normal !important;
      color: khaki !important;
      opacity: 1 !important;
    }

    .bubble-name-container .bubble-state {
      font-size: 13px !important;
      font-weight: 600 !important;
      color: khaki !important;
       opacity: 1 !important;
    }

    .bubble-sub-button ha-icon {
      color: khaki !important; 
    }

    * {
      --bubble-main-background-color: purple !important;
    }

Which step did you already try?

Version 1:

name: {{ states('sensor.aktueller_monat') }}  /* even with "| string" at the end */

Version 2:

 card_style: |
    .bubble-name {
      content: "${(new Date().toLocaleString('de-DE', { month: 'long' })).charAt(0).toUpperCase() + (new Date().toLocaleString('de-DE', { month: 'long' })).slice(1)}" !important;
    }

Problem

Nothing works!
How can I make it work?

Read the documentation

• I have read the documentation

[Menelao147]

In the readme you can find some examples https://github.com/Clooos/Bubble-Card?tab=readme-ov-file#examples-7

Templating texts (like name or state)

styles: |
  ${card.querySelector('.bubble-name').innerText = "It's currently " + hass.states['weather.home'].state}

[Menelao147]

styles: >
  ${card.querySelector('.bubble-name').innerText = (new Date().toLocaleString('de-DE', { month: 'long' })).replace(/^./, str => str.toUpperCase())}

[dummbold]

WorX - ThanX 👍