Hallo zusammen,
ich bin ein wenig am Verzweifeln. 
Ich möchte gerne meine Pop-Up Bubblecard zu 50% transparent machen. Ich bekomme es aber nicht hin.
Ich habe mehrere Foren durchforstet, ChatGPT gefragt, etliche Codes ausprobiert, aber leider hat bisher nichts geholfen. Kann es vielleicht sein, dass sich diese Karten gar nicht ändern lassen?
Ich bin euch sehr dankbar, wenn ihr mal drüberschauen und sagen könntet was falsch ist, bzw. ob es eine andere Lösung gibt, die Karte transparent zu bekommen.
*edit: Mod-Card ist installiert und funktioniert bei anderen Karten einwandfrei.
Vielen Dank.
<3
Das hier ist der aktuelle Code:
type: custom:bubble-card
card_type: button
button_type: state
name: Wohnzimmer
icon: mdi:sofa
sub_button: []
tap_action:
navigation_path: "#wohnzimmer"
button_action:
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
grid_options:
columns: 6
rows: 1
entity: light.wohnzimmer
show_state: false
card_mod:
style: |
:host {
--bubble-card-bg-color: rgba(0, 0, 0, 0.5) !important;
}
ha-card {
background: transparent !important;
box-shadow: none !important;
}
.bubble-card__wrapper {
background-color: rgba(0, 0, 0, 0.5) !important;
box-shadow: none !important;
}
.bubble-card__button {
background-color: transparent !important;
}
ich bin auf v3 (beta). Da funktioniert der Abschnitt custom styles einwandfrei:
- type: custom:bubble-card
card_type: pop-up
… blablabla…
styles: |
.bubble-pop-up-background{
background: rgba(250,0,0,.3) !important;
}
Hey Kitty, danke für die Antwort. Ich habe nun testweise auf 3.0.0 beta 9 aktualisiert. Allerdings wird nach wie vor nichts transparent angezeigt.
Ich habe den Code nun wie folgt ergänzt:
type: custom:bubble-card
card_type: button
button_type: state
name: Wohnzimmer
icon: mdi:sofa
sub_button: []
tap_action:
navigation_path: "#wohnzimmer"
button_action:
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
grid_options:
columns: 6
rows: 1
entity: light.wohnzimmer
show_state: false
styles: |
.bubble-pop-up-background{
background: rgba(250,0,0,.3) !important;
}
Ich glaube, ich hab das falsch verstanden. Ich dachte, du willst den Hintergrund des Popups ändern, es geht aber um die Button-Karte…
Aah. Okay.
Ja ich meine die Pop-Up-Karten z.B. “Wohnzimmer” in dem transparenten Style wie die Überschrift “Raumsteuerung”.
Probier’s mal mit
styles: |
* { background-color: rgba(0,0,0,0) !important; }
Leider nein. Hat auch nicht geklappt. Es ist komisch, dass diese PopUp-Karten die einzigen Bubbre-Karten sind bei denen es anscheinend nicht funktioniert. Bei den anderen wie z.B. hier funktioniert es einwandfrei… (im Screenshot schwer zu erkennen, aber es klappt)
type: custom:bubble-card
card_type: button
button_type: state
entity: sensor.kevins_iphone_14_pro_battery_level
styles: |-
:host {
--color-ok-icon: green;
--color-warning-icon: orange;
--color-alert-icon: red;
--color-ok: #85A408AA;
--color-warning: #E77910AA;
--color-alert: #CA3333AA;
--color-bar: ${state > 40 ? 'var(--color-ok)'
: state > 20 ? 'var(--color-warning)'
: 'var(--color-alert)'};
--color-background: rgba(1, 1, 1, 0.5); /* 50% transparenter Hintergrund */
--color-notification-bubble: red;
}
ha-icon {
color: var(${ state > 40 ? '--color-ok-icon':
state > 20 ? '--color-warning-icon' :
'--color-alert-icon'}) !important;
}
.bubble-button-card-container {
background: linear-gradient(
to right,
var(--color-bar) 0%,
var(--color-bar) ${Math.round(state)}%,
var(--color-background) ${Math.round(state)}%,
var(--color-background) 100%
) !important;
}
ha-card::after {
position: absolute;
top: -10px;
left: -10px;
padding: 0 10px;
border-radius: 999px;
border: 0px solid black;
color: #fff;
content: "${Math.round(state) < 40 ? '!' : ''}";
background: var(--color-notification-bubble);
display: block;
}
icon: ""
name: iPhone Batterie
sub_button: []
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: small
visibility:
- condition: numeric_state
entity: sensor.kevins_iphone_14_pro_battery_level
below: 15
Bei mir geht es, obere Karte normal, 2. mit transparentem Hintergrund.
Hmmm. Es ist zum verrückt werden. Wie ich es drehe und schiebe - es will nicht…
Magste mal den kompletten Code posten?
So. Ich habs. 
Ich habe ein wenig herumgetrickst. Frag mich nicht genau wie und warum - aber es läuft. Wenn ich es bei dem ganzen hin und her noch richtig auf dem Schirm habe, habe ich letztendlich einen einfachen Button genommen und diesen mit einem Navigationspath versehen. Und diese habe ich dann in den Stapel reingezogen, sodass der Verweis zum Öffnen besteht.
Wenn gewünscht kann ich auch einmal den gesamten Code inkl. aller zu öffnenden Untermenüs posten.
So schaut nun eine einzelne Karte aus:
type: custom:bubble-card
card_type: button
button_type: state
entity: light.wohnzimmer
show_state: false
styles: |-
:host {
--color-background: rgba(0, 0, 0, 0.5);
}
.bubble-button-card-container {
background: var(--color-background) !important;
}
ha-card::after {
display: none;
}
/* Verkleinert das Icon in sub_button */
.bubble-sub-button ha-icon {
width: 14px !important;
height: 18px !important;
font-size: 18px !important;
}
/* Verkleinert den Button-Kreis (Container des Sub-Buttons) */
.bubble-sub-button {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
min-height: 28px !important;
padding: 0 !important;
border-radius: 50% !important;
}
icon: mdi:sofa
name: Wohnzimmer
sub_button:
- entity: light.wohnzimmer
visibility:
- condition: state
entity: light.wohnzimmer
state: "on"
tap_action:
action: toggle
icon: mdi:lightbulb
layout_options:
grid_columns: 2
grid_rows: 1
card_layout: small
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
button_action:
tap_action:
action: navigate
navigation_path: "#wohnzimmer"
Super!
Ja, ist nicht ganz ohne mit den ganzen Bubble-spezifischen Variablen.
