Zeigt her eure Dashboards!

Showroom
1052

Ich bin erste am Anfang und möchte ein Informationsboard für den Flur erstellen deswegen habe ich auch das Hintergrundbild angepasst. Leider sind die Fenster alle Schwarz was mich stört ich bekomme es aber auch nicht hin sie auf transparent umzustellen. wenn ich es mit style versuche bekomme ich eine Fehlermeldung oder es passiert nichts. Auch der Spruch funktioniert noch nicht richtig.

Ich bin für jeden Tipp dankbar aber ich bin noch Anfänger und verstehe nicht immer was ich wo machen muss. Ich habe Dank matze89 zwar den Beitrag für die KI für den Spruch des Tages gefunden aber noch nicht verstanden.

Mit freundlichen Grüßen
Sascha Melchers

image
image1920×1117 222 KB

1053

Hi, hast du dir mal Card-mod angeschaut?
Grundsätzlich sollte es aber auch im Style gehen …
z.B.

styles:
card:
- background-color: transparent !important;

1054

Danke

Aber an welcher stelle muss ich das ein fügen? wenn ich die Karten einzeln bearbeite sagt er mir einen yaml Fehler ich habe es auch über den RAW-Konfigurator versucht aber anscheinend an die Falsche Stelle eingetragen

  • Der Schlüssel „styles“ wird vom visuellen Editor nicht erwartet oder nicht unterstützt.
  • Der Schlüssel „card“ wird vom visuellen Editor nicht erwartet oder nicht unterstützt.

So nimmt er es im RAW Konfigurator zwar an aber es ändert nichts habe ich den falschen Punkt der Einrückung?

 cards: null
    header:
      card:
        styles:
          - background-color: transparent !important;
        type: markdown
        title: Spruch des Tages
        content: |
          # Hallo {{ user }}  
          ---
          # **{{ states('sensor.spruch_debug') }}**
1055

hier mal ein Beispiel aus der RAW Konfig

views:
  - title: Home
    sections:
      - type: grid
        cards:
          - type: heading
            heading: Neuer Abschnitt
          - type: custom:button-card
            entity: switch.esszimmer_hell_stateful_scene
            show_name: false
            tap_action: none
            show_entity_picture: false
            show_icon: false
            show_state: false
            show_label: false
            label: licht Essz.
            group_expand: true
            styles:
              card:
                - height: 265px
                - padding: 5px
                - background-color: transparent !important;
              custom_fields:
                headline:
                  - position: absolute
                  - left: 0px
                  - top: 0px
                  - height: 25px
                  - width: 170px
                light1:
                  - position: absolute
                  - left: 50px
                  - top: 60px
                  - font-size: 8px
                  - width: 140px
                  - font-weight: 100 !important;
            custom_fields:
              headline:
                card:
                  type: custom:button-card
                  label: Speisezimmer
                  card_title: speisezimmer
                  show_label: true
                  styles:
                    card:
                      - height: 25px
                      - background-color: var(--card-headline-background-color)
                      - color: var(--primary-text-color)
                      - font-size: 12px
                      - border-bottom-left-radius: 0px;
                      - border-bottom-right-radius: 0px;
                      - font-weight: 100 !important;
              light1:
                card:
                  type: custom:button-card
                  show_name: false
                  entity: switch.esszimmer_hell_stateful_scene
                  name: Hell
                  state:
                    - value: 'on'
                      icon: mdi:lightbulb-outline
                      color: var(--button-on-color)
                      background: var(--button-background-on-color)
                      styles:
                        card:
                          - background-color: var(--button-background-on-color)
                    - value: 'off'
                      icon: mdi:lightbulb-outline
                      color: var(--button-off-color)
                      background: var(--button-card-background-color)
                      styles:
                        card:
                          - background-color: var(--button-background-off-color)
                    - value: unknown
                      icon: mdi:lightbulb-outline
                      color: var(--button-off-color)
                      background: var(--button-card-background-color)
                      styles:
                        card:
                          - background-color: var(--button-background-off-color)
                  styles:
                    card:
                      - padding: 20%
                      - border-radius: 50%
                      - height: 70px
                      - width: 70px
                      - font-weight: 100 !important;
                      - border: 3px solid var(--button-border-color)
                    icon:
                      - width: 40px
                      - border-radius: 50%
                      - padding: 12px
                      - filter: >
                          [[[ return
                          states['switch.esszimmer_hell_stateful_scene'].state
                          == 'on' ? 'drop-shadow(0 0 0.15rem #caafa0)' : 'none';
                          ]]]
                    variables:
                      - sensor: switch.esszimmer_hell_stateful_scene
                      - name: Hell
                      - icon: mdi:lightbulb-outline
        column_span: 1.5
    badges: []
    header:
      layout: responsive
      badges_position: bottom

es geht aber auch so in de UI YAML Bearbeitung…

type: custom:button-card
entity: switch.esszimmer_hell_stateful_scene
show_name: false
tap_action: none
show_entity_picture: false
show_icon: false
show_state: false
show_label: false
label: licht Essz.
group_expand: true
styles:
  card:
    - height: 265px
    - padding: 5px
    - background-color: transparent !important;
  custom_fields:
    headline:
      - position: absolute
      - left: 0px
      - top: 0px
      - height: 25px
      - width: 170px
    light1:
      - position: absolute
      - left: 50px
      - top: 60px
      - font-size: 8px
      - width: 140px
      - font-weight: 100 !important;
custom_fields:
  headline:
    card:
      type: custom:button-card
      label: Speisezimmer
      card_title: speisezimmer
      show_label: true
      styles:
        card:
          - height: 25px
          - background-color: var(--card-headline-background-color)
          - color: var(--primary-text-color)
          - font-size: 12px
          - border-bottom-left-radius: 0px;
          - border-bottom-right-radius: 0px;
          - font-weight: 100 !important;
  light1:
    card:
      type: custom:button-card
      show_name: false
      entity: switch.esszimmer_hell_stateful_scene
      name: Hell
      state:
        - value: "on"
          icon: mdi:lightbulb-outline
          color: var(--button-on-color)
          background: var(--button-background-on-color)
          styles:
            card:
              - background-color: var(--button-background-on-color)
        - value: "off"
          icon: mdi:lightbulb-outline
          color: var(--button-off-color)
          background: var(--button-card-background-color)
          styles:
            card:
              - background-color: var(--button-background-off-color)
        - value: unknown
          icon: mdi:lightbulb-outline
          color: var(--button-off-color)
          background: var(--button-card-background-color)
          styles:
            card:
              - background-color: var(--button-background-off-color)
      styles:
        card:
          - padding: 20%
          - border-radius: 50%
          - height: 70px
          - width: 70px
          - font-weight: 100 !important;
          - border: 3px solid var(--button-border-color)
        icon:
          - width: 40px
          - border-radius: 50%
          - padding: 12px
          - filter: >
              [[[ return states['switch.esszimmer_hell_stateful_scene'].state ==
              'on' ? 'drop-shadow(0 0 0.15rem #caafa0)' : 'none'; ]]]
        variables:
          - sensor: switch.esszimmer_hell_stateful_scene
          - name: Hell
          - icon: mdi:lightbulb-outline
1056

Ich habe das jetzt noch mal nach deinen Vorgaben eingerückt und angepasst aber es bleibt immer noch schwarz im Hintergrund.

  cards: null
    header:
      card:
        styles:
          card:
            - background-color: transparent !important;
        type: markdown
        title: Spruch des Tages
        content: |
          # Hallo {{ user }}  
          ---
          # **{{ states('sensor.spruch_debug') }}**

wenn ich versuche das bei einer grid card einzufügen kommt

YAML kann nicht geparst werden: YAMLException: bad indentation of a mapping entry (31:11) 28 | grid_options: 29 | columns: full 30 | rows: 7 31 | styles: ----------------^ 32 | card: 33 | - background-color: transpa …

1057

Die styles option gibt es glaub ich nicht für markdown card. Das ist eine eigene syntax für die button card. Hast du card mod installiert? Wenn ja mach es mit

card_mod:
  style: 'ha-card {background: none;}'

Btw. Irgendwo muss du ein fehler bei der einrückung oder so haben

Das ‘null‘ gehört da nicht hin.

1058

Nein ich habe kein mod installiert. Ich habe gerade erste angefangen und Simon sagt man sollte auf Themes und mod verzichten so weit es geht. Ich dachte das es mit den Board mitteln möglich ist. Die Youtube Videos die ich finden sind halt alle noch für die alte Technik für das Dashboard. Jetzt sind das ja grid und im Header Markdown.

P.S.

ich habe das auch dem Editor kopiert und wahrscheinlich das ende der anderen Karte mit genommen.

1059

Ohne dem wirst du aber die Hintergründe der Karten nicht ändern können. :slight_smile: Außer du schreibst dein eigenes Theme. Und verzichten ist Quatsch, aber mit bedacht das Installieren was man auch wirklich nur nutzen möchte oder braucht. Nicht umsonst gibt es hier so viele schöne Dashboards von anderen Usern. Das ist mit den HA Boardmittlen kaum zu machen.

1060

Ja das habe ich jetzt auch schon verstanden. Ich wollte mir halt nicht so viel kaputt machen aber eure Dashboards sehen sooooo cool aus ich möchte das auch machen