Misux
30. Dezember 2024 um 17:03
1
Hi.
Ich versuche mich mit den Bubble Cards. Sind ganz schick, aber kann mir jemand sagen wie und Ob man dem Hintergrund ändern kann?
Es geht um Die Temperatur Bubble Cards Dachboden/Wohnzimmer…
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.tempdachbodenzigbee_battery
name: Dachboden
force_icon: false
show_icon: false
show_attribute: true
attribute: device_class
show_last_changed: false
card_layout: large-2-rows
sub_button:
- entity: sensor.tempdachbodenzigbee_temperature
show_state: true
show_name: true
show_attribute: false
name: ""
state_background: true
show_icon: true
- entity: sensor.tempdachbodenzigbee_humidity
show_background: true
state_background: true
show_icon: true
show_state: true
grid_options:
columns: 6
rows: 1
icon: fas:temperature-quarter
show_state: true
show_name: true
scrolling_effect: true
styles: ""
Pompom
30. Dezember 2024 um 18:04
2
styles: |
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
Das sollte so passen, die Hintergrundfarbe, Deckkraft ist auf 0 gesetzt.
Pfize
30. Dezember 2024 um 18:09
3
Oder
styles: |
.bubble-button-card-container { background: rgba(0,0,0,0.3) !important; }
Wegen dünnem rand hab ich auf die schnelle nichts gefunden. Alle weiteren Codes zur Bubbe Button Card findest du hier.
export default `
* {
-webkit-tap-highlight-color: transparent !important;
-ms-overflow-style: none; /* for Internet Explorer, Edge */
scrollbar-width: none; /* for Firefox */
}
*::-webkit-scrollbar {
display: none; /* for Chrome, Safari, and Opera */
}
ha-card {
margin-top: 0;
background: none;
opacity: 1;
}
.is-unavailable {
opacity: 0.5;
}
.bubble-button-card-container {
position: relative;
show original
1 „Gefällt mir“
.bubble-button-card-container {
border: 2px solid #343434; /* Randstärke & Farbe */
}
1 „Gefällt mir“
Misux
31. Dezember 2024 um 08:26
5
Boah! Voll cool! Ich danke euch!
Lassen sich denn auch die kleinen Bubbels mit der Temperatur/Feuchtigkeit in der Farbe anpassen? Dieses pinke ist “komisch”
Und so siehts jetzt aus:
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.tempdachbodenzigbee_battery
name: Dachboden
force_icon: false
show_icon: false
show_attribute: true
attribute: device_class
show_last_changed: false
card_layout: large-2-rows
sub_button:
- entity: sensor.tempdachbodenzigbee_temperature
show_state: true
show_name: true
show_attribute: false
name: ""
state_background: true
show_icon: true
- entity: sensor.tempdachbodenzigbee_humidity
show_background: true
state_background: true
show_icon: true
show_state: true
grid_options:
columns: 6
rows: 1
icon: fas:temperature-quarter
show_state: true
show_name: true
scrolling_effect: true
styles: |
ha-card {
--bubble-main-background-color: rgba(12,120,50,0) !important;
}
.bubble-button-card-container {
border: 2px solid #FF0000; /* Randstärke & Farbe */
}
Pompom
31. Dezember 2024 um 09:11
6
.bubble-sub-button-1 {
background-color: blue !important;
Die 1 ist der obere in deinem Fall sie Temperatur. Für den anderen einfach durch eine 2 ersetzen.
.bubble-sub-button-1 > ha-icon {
color: #FF7F24 !important;
}
Farbänderung der Sub-Icons.
.bubble-sub-button-1 {
border: 2px solid #343434; /* Randstärke & Farbe Umrandung Sub-Feld */
}
Misux
1. Januar 2025 um 08:46
8
Klasse!
Vielen Dank und eine frohes NEUES!
