Gibt es eine Möglichkeit bei der bubble card einen Wert anders zu formatieren.
In meinen Fall möchte ich gerne den Wert 7. Februar 2025 um 14:50
in 07.02.2025 : 14:50 Uhr ändern.
1 „Gefällt mir“
Halle Leerraum
Deine Karte gefällt mir sehr, könntest du mir den yaml Code zur Verfügung stellen?
Beste Grüße
toptobias
Bitte den yaml code mit </> posten. Macht es leichter dir zu helfen da man dann selbst testen kann.
type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7583_letzter_neustart
show_icon: false
show_name: true
show_state: true
name: "Neustart am:"
- entity: sensor.fritz_box_7583_externe_ipv6
show_icon: false
show_name: false
show_state: true
- entity: update.fritz_box_7583_fritz_os
show_last_changed: false
show_attribute: true
attribute: installed_version
show_state: true
show_name: false
show_icon: true
state_background: true
show_background: true
- entity: sensor.fritz_box_7583_externe_ip
show_state: true
show_icon: false
show_name: false
entity: update.fritz_box_7583_fritz_os
card_layout: large-2-rows
button_type: state
show_name: false
show_icon: true
force_icon: false
scrolling_effect: false
name: ""
show_state: false
show_attribute: false
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px !important;
border-radius: 10px 10px 10px 10px !important;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
font-size: 11px !important;
align-items: right;
}
show_last_changed: false
- type: custom:bubble-card
card_type: button
sub_button:
- entity: switch.fritz_box_7583_wi_fi_frank_2_4ghz
show_name: true
name: 2.4 Ghz
state_background: true
tap_action:
action: toggle
- entity: switch.fritz_box_7583_wi_fi_frank_5ghz
show_name: true
name: 5Ghz
state_background: true
show_icon: true
show_background: true
tap_action:
action: toggle
- entity: switch.fritz_box_7583_wi_fi_frank_friends
show_state: false
show_name: true
name: Gast
tap_action:
action: toggle
entity: binary_sensor.fritz_box_7583_verbindung
card_layout: normal
button_type: state
show_name: false
show_icon: true
force_icon: true
scrolling_effect: false
name: ""
show_state: true
show_attribute: false
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button-1 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_2_4ghz'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_2_4ghz'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-sub-button-2 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_5ghz'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_5ghz'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-sub-button-3 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_friends'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.fritz_box_7583_wi_fi_frank_friends'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-icon {
color: ${state === 'on' ? '#ffc107' : ''} !important;
}
show_last_changed: false
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7583_gb_empfangen
show_name: true
show_state: true
state_background: false
show_icon: false
show_background: true
name: GB empfangen
- entity: sensor.fritz_box_7583_download_durchsatz
show_state: true
show_name: false
state_background: false
show_icon: false
name: Download-Durchsatz
- entity: sensor.fritz_box_7583_download_leitungsdampfung
show_state: true
show_name: false
name: db
show_icon: false
state_background: false
entity: sensor.fritz_box_7583_link_download_durchsatz
card_layout: normal
button_type: state
show_name: true
show_icon: false
force_icon: true
scrolling_effect: false
name: ↓ Download
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7583_gb_gesendet
show_name: true
show_state: true
state_background: false
show_icon: false
show_background: true
name: GB gesendet
- entity: sensor.fritz_box_7583_upload_durchsatz
show_state: true
show_name: false
state_background: false
show_icon: false
name: Upload-Durchsatz
- entity: sensor.fritz_box_7583_upload_leitungsdampfung
show_state: true
show_name: false
name: Upload dB
show_icon: false
state_background: false
entity: sensor.fritz_box_7583_link_upload_durchsatz
card_layout: normal
button_type: state
show_name: true
show_icon: false
force_icon: true
scrolling_effect: false
name: ↑ Upload
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
- type: custom:bubble-card
card_type: button
sub_button:
- entity: button.fritz_box_7583_aufraumen
show_name: true
name: Aufräumen
show_state: false
show_attribute: false
attribute: friendly_name
show_background: true
state_background: false
show_last_changed: false
icon: mdi:arrow-u-down-right
tap_action:
action: toggle
- entity: button.fritz_box_7583_neu_verbinden
show_state: false
show_name: true
name: Neu verbinden
icon: mdi:alert-octagon-outline
- entity: button.fritz_box_7583_neu_starten
show_name: true
name: Neustart
show_state: false
icon: mdi:alert-octagon
entity: button.fritz_box_7583_firmware_update
card_layout: normal
button_type: state
show_name: true
show_icon: true
force_icon: true
scrolling_effect: false
name: Update
show_state: false
show_attribute: false
show_last_changed: false
icon: mdi:update
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
style: |
ha-card {background: #6e6e6;}
layout: {}
Danke fürs teilen. Hab das mal bei mir nachgebaut. Mein letzter Neustart der Box war am 31.01 und heute ist der 13. Februar. Selbst wenn ich was am Code ändere wird es nicht angezeigt 
@LEERRAUM Wie bekomme ich es wie bei dir hin, dass der Hintergrund komplett schwarz ist?
Ich habe nur die Entitäten geändert.
type: custom:layout-card
layout_type: custom:horizontal-layout
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7590_ax_ui_letzter_neustart
show_icon: false
show_name: true
show_state: true
name: "Neustart am:"
- entity: sensor.fritz_box_7590_ax_ui_externe_ipv6
show_icon: false
show_name: false
show_state: true
- entity: update.fritz_box_7590_ax_ui_fritz_os
show_last_changed: false
show_attribute: true
attribute: installed_version
show_state: true
show_name: false
show_icon: true
state_background: true
show_background: true
- entity: sensor.fritz_box_7590_ax_ui_externe_ip
show_state: true
show_icon: false
show_name: false
entity: update.fritz_box_7590_ax_ui_fritz_os
card_layout: large-2-rows
button_type: state
show_name: false
show_icon: true
force_icon: false
scrolling_effect: false
name: ""
show_state: false
show_attribute: false
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px !important;
border-radius: 10px 10px 10px 10px !important;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
font-size: 11px !important;
align-items: right;
}
show_last_changed: false
- type: custom:bubble-card
card_type: button
sub_button:
- entity: switch.fritz_box_7590_ax_ui_wi_fi_markus_2_4ghz
show_name: true
name: 2.4 Ghz
state_background: true
tap_action:
action: toggle
- entity: switch.fritz_box_7590_ax_ui_wi_fi_markus_5ghz
show_name: true
name: 5Ghz
state_background: true
show_icon: true
show_background: true
tap_action:
action: toggle
- entity: switch.fritz_box_7590_ax_ui_wi_fi_fritz_box_gastzugang
show_state: false
show_name: true
name: Gast
tap_action:
action: toggle
entity: binary_sensor.fritz_box_7590_ax_ui_verbindung
card_layout: normal
button_type: state
show_name: false
show_icon: true
force_icon: true
scrolling_effect: false
name: ""
show_state: true
show_attribute: false
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button-1 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7590_ax_ui_wi_fi_markus_2_4ghz'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.fritz_box_7590_ax_ui_wi_fi_markus_2_4ghz'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-sub-button-2 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7590_ax_ui_wi_fi_markus_5ghz'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.switch.fritz_box_7590_ax_ui_wi_fi_markus_5ghz'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-sub-button-3 {
border-radius: 10px 10px 10px 10px;
background-color: ${hass.states['switch.fritz_box_7590_ax_ui_wi_fi_fritz_box_gastzugang'].state === 'on' ? '#433610' : '#2f2f2f'} !important;
color: ${hass.states['switch.fritz_box_7590_ax_ui_wi_fi_fritz_box_gastzugang'].state === 'on' ? '#ffc107' : '#9e9e9e'} !important;
}
.bubble-icon {
color: ${state === 'on' ? '#ffc107' : ''} !important;
}
show_last_changed: false
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7590_ax_ui_gb_empfangen
show_name: true
show_state: true
state_background: false
show_icon: false
show_background: true
name: GB empfangen
- entity: sensor.fritz_box_7590_ax_ui_download_durchsatz
show_state: true
show_name: false
state_background: false
show_icon: false
name: Download-Durchsatz
- entity: sensor.fritz_box_7590_ax_ui_download_leitungsdampfung
show_state: true
show_name: false
name: db
show_icon: false
state_background: false
entity: sensor.fritz_box_7590_ax_ui_link_download_durchsatz
card_layout: normal
button_type: state
show_name: true
show_icon: false
force_icon: true
scrolling_effect: false
name: ↓ Download
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
- type: vertical-stack
cards:
- type: custom:bubble-card
card_type: button
sub_button:
- entity: sensor.fritz_box_7590_ax_ui_gb_gesendet
show_name: true
show_state: true
state_background: false
show_icon: false
show_background: true
name: GB gesendet
- entity: sensor.fritz_box_7590_ax_ui_upload_durchsatz
show_state: true
show_name: false
state_background: false
show_icon: false
name: Upload-Durchsatz
- entity: sensor.fritz_box_7590_ax_ui_upload_leitungsdampfung
show_state: true
show_name: false
name: Upload dB
show_icon: false
state_background: false
entity: sensor.fritz_box_7590_ax_ui_link_upload_durchsatz
card_layout: normal
button_type: state
show_name: true
show_icon: false
force_icon: true
scrolling_effect: false
name: ↑ Upload
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
- type: custom:bubble-card
card_type: button
sub_button:
- entity: button.fritz_box_7590_ax_ui_aufraumen
show_name: true
name: Aufräumen
show_state: false
show_attribute: false
attribute: friendly_name
show_background: true
state_background: false
show_last_changed: false
icon: mdi:arrow-u-down-right
tap_action:
action: toggle
- entity: button.fritz_box_7590_ax_ui_neu_verbinden
show_state: false
show_name: true
name: Neu verbinden
icon: mdi:alert-octagon-outline
- entity: button.fritz_box_7590_ax_ui_neu_starten
show_name: true
name: Neustart
show_state: false
icon: mdi:alert-octagon
entity: button.fritz_box_7590_ax_ui_firmware_update
card_layout: normal
button_type: state
show_name: true
show_icon: true
force_icon: true
scrolling_effect: false
name: Update
show_state: false
show_attribute: false
show_last_changed: false
icon: mdi:update
styles: |2-
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
min-width: 10px;
border-radius: 10px 10px 10px 10px;
border: 1px solid #333; /* Randstärke & Farbe */
}
.bubble-sub-button {
border-radius: 10px 10px 10px 10px;
}
style: |
ha-card {background: #6e6e6;}
layout: {}
Musst wohl den Umweg gehen und ein Template Sensor anlegen.
- sensor:
- name: "Fritzbox letzter Neustart"
unique_id: fritzbox_letzer_neustart
value_template: "{{ as_timestamp(states('sensor.fritz_box_7583_letzter_neustart')) | timestamp_custom('%d.%m.%Y : %H:%M') }}"
Beste Grüße
toptobias
1 „Gefällt mir“
Sorry … da muss ich passen. Das ist mein Theme.
Eine andere Farbe habe ich bis jetzt auch noch nicht hinbekommen.
Super Danke !
Danke für die Antwort aber könntet ihr das für einen Anfänger erklären?
Muss ich einen Template Sensor Helfer anlegen?
Wo füge ich das in der vorhanden Yaml ein?
Einstellungen > Geräte & Dienste > Helfer > Helfer erstellen
Template > Template für einen Sensor erstellen
Name = fritzbox_letzter_neustart_zeit
sensor.fritz_box_7583_letzter_neustart <---- mit deinem Sensor ersetzen
{{ as_timestamp(states('sensor.fritz_box_7583_letzter_neustart')) | timestamp_custom('%d.%m.%Y : %H:%M') }}
Damit hast Du nun einen neuen Sensor wo das Datum anders formatiert wird
mit Namen “sensor.fritzbox_letzter_neustart_zeit”
Diesen muss du dann tauschen
Danke, hat funktioniert.
1 „Gefällt mir“
Und an der Hintergrundfarbe arbeite ich noch 
1 „Gefällt mir“