Hintergrundfarbe in Bubble Separator einstellen

Dashboard/Cards/Frontend
1

Hallo allerseits!
Ich bin gerade dabei, meine Dashboards zu optimieren. Bisher habe ich pro Raum eine Karte gehabt, die dann die Einstellmöglichkeiten bediente.
Besonders auf kleinen Bildschirmen (Handy) braucht das viel zu viel Platz und ich muss ewig scrollen.
Meine aktuelle Idee sieht bisher so aus:
EG
Ich habe also das gesamte Stockwerk zusammengefasst und die Räume durch Bubble-Separator abgeteilt. Leider ist die Karte aber noch nicht übersichtlich. Um das zu verbessern, möchte ich 2 Dinge machen:

  1. Die Separater absetzen, z.B. durch eine andere Hintergrundfarbe
  2. Das Grid mit den Einstellern von Links mit einem Offset versehen, also einrücken.
    Jetzt bastele ich schon 2 Tage daran herum und es gelingt mir nicht.
    Ich könnte alternativ auch die haeding-Karte nehmen, aber da finde ich auch nichts zum Verändern des Hintergrundes.
    Kann mir von euch jemand weiterhelfen?
2

Ich weiß zwar nicht genau, ob es das ist was du willst: Ich habe die Bubble Separator auch eingefärbt das geht mit folgendem Code. Hoffe, das hilft dir ein wenig weiter.

.bubble-line {
  background: rgba(255,255,0,1);
  opacity: 1;}
.bubble-icon {
  color: rgba(255,255,0,1) !important;}
3

Ja, das habe ich auch schon gemacht. Leider färbt das nur die Trennlinie und das Icon. Ich möchte aber gerne einen Header, der ähnlich wie die Kopfzeilen in Tabellen die Absätze trennen. Natürlich geht das auch mit dem type: heading. Aber da kann ich den Hintergrund auch nicht einfärben. :frowning:

Habe es jetzt herausgefunden. Die Karte, basierend auf type: heading sieht jetzt so aus:

  - type: heading
    icon: mdi:sofa
    heading: Wohnzimmer
    badges:
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.buro_kg_thermostat_luftfeuchtigkeit
        color: blue
        tap_action:
          action: more-info
      - type: entity
        show_state: true
        show_icon: true
        entity: sensor.buro_kg_thermostat_temperatur
        color: red
        tap_action:
          action: more-info
    card_mod:
      style:
        .: |
          ha-card {
            background-color: darkgrey !important;

Jetzt muss ich es nur noch “schön” machen.

4

keine Ahnung ob ich es verstanden habe, ich nutze auch die Bubblecard als “Header”

schaut so aus:
Bildschirmfoto 2025-01-27 um 17.31.59

im code sind alle css für farbe, größe etc.
deine Temp/ Luffeuchte kanst du in die beiden SubButtton unterbringen…

type: custom:bubble-card
card_type: button
button_type: name
styles: |
  /*Icon vorne Hintergrund */
  .bubble-icon-container {
      border-radius: 6px;
      border: 1px solid var(--divider-color);
    } 
    
  /*Icon vorne */
    .bubble-icon {
    color: peru !important;
    --mdc-icon-size: 20px !important;
    }

  /*Ganze Karte */
    .bubble-button-card-container {
      background: none !important;
      border-radius: 6px;
      border: 0px solid var(--divider-color);
      
    }  
  /*Titel der Karte */
    .bubble-name {
      font-size: 22px !important;
      font-weight: 500;
    }

  /*erster extra Button */        
  .bubble-sub-button-1 {
      background-color: cyan !important;
      font-size: 8px !important;
      color: red!important;
      height: 18px !important;
      min-width: 48px !important;
      margin-top: 0px 
    }

    }        
  /*zweiter extra Button */ 
  .bubble-sub-button-2 {
      font-size: 12px !important;
      color: grey!important;
    }
    
name: Licht Szenen
show_icon: true
sub_button: []
tap_action:
  navigation_path: ""
  action: call-service
  target:
    entity_id: input_boolean.kiosk_ipad
  service: input_boolean.toggle
button_action:
  tap_action:
    action: navigate
    navigation_path: ""
icon: mdi:string-lights
card_layout: normal
5

Wie oben schon beschrieben, habe ich die Hintergrundfarbe in den Unterüberschriften (Wohnzimmer, Küche, etc.) setzen können.
Die “Entity-Karten” sind in einem Grid angeordnet. Ich fände es cool, dieses Grid etwas eingerückt darzustellen. Leider funktioniert der folgende Code nicht:

  - type: grid
    columns: 2
    square: false
    card_mod:
      style: |
        ha-card {
          padding-left: 50px !important;
        }
    cards:

Hat da jemand ne Idee?