Hallo zusammen,
ich bastle gerade wieder an meinem Dashboard. Ich nutze Abschnitte/Sections jetzt schon eine weile mit Room_Card und bin eigentlich recht zufrieden damit. Ich hätte aber gerne die Überschriften/Heading bearbeitet, so dass EG, OG usw größer und mittig ist.
Per Card-Mod konnte ich den Rahmen anpassen usw. Aber die Schrift kann ich nicht anpassen. Habt ihr da ne Idee?
Ich kann dir die Mushroom-Titel Card für sowas empfehlen. Damit kannst du ziemlich viel anstellen. Community HA Hier kannst du gucken was du damit machen kannst.
Hi Markus, Mushroom Card kenne ich, aber ich bin mir gerade nicht sicher ob die mir dabei hilft die Überschriften zu bearbeiten. Hast Du da eine konkrete Idee.
Danke vorab.
Was ist denn das z.B. für eine Karte die du für EG benutzt? Ist das die normale Überschriften Karte aus HA? Sehe gerade, das die Mushroom Title Card keine Icons unterstützt. Das wird also nicht der richtige weg sein. Sorry deswegen. Denke eine Custom Button Card könnte funktionieren. Die normalen Title Karte von HA unterstützt meines Wissens nach keine Textausrichtung und ist immer linksbündig.
Ja genau, das ist die Standard Überschriftskarte aus dem “neuen” Abschnitte modus. Hätte eigentlich nur gerne das EG größer und mittig.
card_mod funktioniert zwar - so hab ich den Rahmen angepasst, aber die Schrift EG reagiert nicht auf
card_mod:
style: |
.card-header {
So schaut es aktuell aus:
type: heading
heading: EG
heading_style: title
icon: mdi:home-floor-1
badges:
- type: entity
show_state: true
show_icon: true
entity: vacuum.bonny
tap_action:
action: more-info
card_mod:
style: |
ha-card {
background: none !important;
box-shadow: 0px 0px 5px 1px gray !important;
}
ja wie ich geschrieben habe, die Karte ist immer linksbündig. ich teste gerade mal mit der custom button card herum
Auf die Schnelle bekomme ich leider nichts besseres hin. Vielleicht setzte ich mich morgen nochmal ran.
type: custom:button-card
styles:
card:
- height: auto
- padding: 2px 8px 2px 8px
- background-color: transparent
- box-shadow: none
grid:
- grid-template-areas: "\"icon n s\""
- grid-template-columns: 45% 1fr 20%
- align-items: center
custom_fields:
icon:
- height: 80%
- justify-self: end
- align-items: center
- color: black
name:
- justify-self: left
- font-size: 24px
- align-items: center
- font-weight: bold
state:
- justify-self: end
- color: grey
- font-size: 10px
- align-items: center
entity: binary_sensor.fenster_sensor_badezimmer_contact
name: EG
show_state: true
show_icon: false
show_name: true
custom_fields:
icon: >
<ha-icon icon="mdi:home-assistant" style="width: 20px; height:
20px;"></ha-icon>
Wow vielen Dank. Das sieht schonmal sehr gut aus!
Hätte gern, dass die Karte von der Höhe noch schmaler ist. Hatte ich aber bisher nicht realisieren können.
Einfach show_icon: true … nicht logisch aber geht.
Optisch passt das mit so ganz gut, aber jetzt ist es es halt ne enitätskarte getarnt als Überschrift. Zudem ist der Text nicht ganz mittig. Ich vermute hier spielt die entität rechts mit rein.
Wenn ich Dich richtig verstanden habe, kann mann die Heading card nicht weiter bearbeiten/customizen.
Sehr gut.
Du kannst dir die Größe des Icons und der Schrift individuell anpassen für die Schrift musst du beispielsweise die font-size ändern.
- font-size: 24px
Das kannst du beheben, indem du mit den Prozenten ein bisschen spielst. Hatte das nur optisch für mich auf ungefähr Mitte gebracht.
- grid-template-columns: 45% 1fr 20%
Genau, die ist immer linksbündig.