Zeilenabstand verringern generell/einzeln pro Karte möglich?

andi55 · 24 Juni 2023

Hallo,
leider bekomme ich die Karte für die Anzeige meiner Fenstersensoren auf meinem Tablet nicht komplett ohne scrollen dargestellt.
Es wäre also hilfreich wenn ich den Zeilenabstand zwischen den einzelnen Einträgen etwas verringern könnte.
Welche Möglichkeiten gibt es dazu?
Kann ich den Zeilenabstand aller benutzter Karten auf einmal verringern oder geht das z.B. auch einzeln pro Karte?

Im englischen HA Forum habe ich zwar z.B. https://community.home-assistant.io...cing-between-entities-in-entities-card/475885 gefunden, blick da aber nicht wirklich durch.

Steevee · 24 Juni 2023

Du installierst über HACS card-mod und dann kannst du mit css das Aussehen der Karten verändern

Osorkon · 25 Juni 2023

Eine ander Möglichkeit wäre, sich nur die offene Fenster / Türen anzeigen zu lassen.
z.B. mit der Custom auto-entities Card

YAML:

card:
  show_header_toggle: false
  type: entities
filter:
  exclude:
    - state: unavailable
    - state: 'off'
  include:
    - attributes:
        device_class: door
    - attributes:
        device_class: window
show_empty: false
type: custom:auto-entities
unique: true

Steevee · 25 Juni 2023

Also wie gesagt: card-mod installieren und dann kann man css hinzufügen.

Hier mal ein Test:

Links die original-Karte und rechts mit css verändert:

YAML:

type: entities
entities:
  - entity: sensor.temperature1
    name: Temperature 1 (klein und rot)
  - entity: sensor.temperature2
    name: Temperature 2 (klein und rot)
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
      }
    .card-content div {
      margin-top: 0px !important;
      margin-bottom: 0px  !important;
      color: red;
      height: 25px;
     }

andi55 · 26 Juni 2023

Hallo,
Danke

mit

Code:

card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
      }
    .card-content div {
      margin-top: 2px !important;
      margin-bottom: 2px  !important;
      height: 30px;
      }

konnte ich es nach meinen Wünschen einstellent, man muß halt beachten den Code am Ende der Karte einzufügen. Noch ne Idee wie ich den Abstand zum Section Strich gleichmäßiger aufteilen kann?

Steevee · 1 Juli 2023

Versuch mal den Style für den ganzen card-content

CSS:

    .card-content {
      padding-top: 0px;
      }

Steevee · 1 Juli 2023

da ist dann auch der obere Abstand kleiner.

YAML:

type: entities
entities:
  - entity: sensor.zigbee_temp_humi_aussen_temperature
    name: Temperature 1 (klein)
  - entity: sensor.average_temperature
    name: Temperature 2  (klein)
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
    }
    .card-content div {
      margin-top: 0px !important;
      margin-bottom: 0px  !important;
      height: 25px;
    }
    .card-content {
      padding-top: 0px;
    }

andi55 · 1 Juli 2023

da ändert sich leider nur der Abstand zur Überschrift aber nichts an der Position vom Trennstrich. Kannst ja mal

Code:

- type: section

einfügen.

andi55 · 2 Juli 2023

ich habs jetzt erstmal über einen unsichtbaren divider gelöst

Code:

 - type: divider
            style:
              background-color: transparent

Ändert zwar nichts am Abstand aber der unsymetrische Strich ist weg

Steevee · 2 Juli 2023

Der Divider ist auch ein div und hat somit die Höhe wie die anderen Zeilen. Das muss gesondert verändert werden.

YAML:

type: entities
entities:
  - entity: sensor.zigbee_temp_humi_aussen_temperature
    name: Temperature 1 (klein)
  - type: divider
  - entity: sensor.average_temperature
    name: Temperature 2 (klein)
  - entity: sensor.average_temperature
    name: Temperature 2 (klein)
card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
    }
    .card-content div {
      margin-top: 0px !important;
      margin-bottom: 0px  !important;
      height: 25px;
    }
    .card-content div:nth-child(2) {
      margin-top: 10px !important;
      height: 0px;
    }
    .card-content {
      padding-top: 0px;
    }

Also in meinem Beispiel das 2. Kind

andi55 · 9 Juli 2023

Hallo,
ich bekomme das nicht auf meine Einstellungen umgesetzt.
Ich verstehe auch nicht wirklich wie die Zuordnung funktioniert. Wie wird festgelegt welche Parameter für den Divider sind? ist quasi der 2te Eintrag im Bereich "card_mod" für den 2ten Eintrag bei den entities darüber und somit für den Divider?.
Woher weis das System das

Code:

.card-content div:nth-child(2) {
      margin-top: 10px !important;
      height: 0px;

für den Divider gilt?
Ich hab ja 2-3 Divider in meiner Karte und derzeit die card_mod Einstellungen einmalig und am Ende der Karte. Reicht es dann wenn ich den Aufruf für den Divider einmalig am Ende der Karte mache oder muß diese bereits vorher und mehrmals erfolgen?

Steevee · 9 Juli 2023

andi55 schrieb:
.card-content div:nth-child(3)

Mach da mal ne 3 bei dir, denn es ist die 3. Zeile also das 3. div im Karteninhalt (nach Bad und Schlafzimmer).

andi55 · 30 Juli 2023

Hallo,
der erste Divider steht auf der 5 und mit

.card-content div:nth-child(5) {
margin-top: 12px !important;
height: 0px;

konnte ich den super einstellen. Jetzt hänge ich aber am 2ten divider, dieser steht auf der 12. Ich dachte ich kopier hierfür einfach den Code nochmal drunter und ändere ihn auf die 12 ab, dieser nimmt aber Änderungen in margin-top nicht an

Code:

card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
      }
    .card-content div {
      margin-top: 4px !important;
      margin-bottom: 4px  !important;
      height: 30px;
      font-size: 14px;
      }
    .card-content div:nth-child(5) {
      margin-top: 12px !important;
      height: 0px;
    .card-content div:nth-child(12) {
      margin-top: 12px !important;
      height: 0px;

andi55 · 30 Juli 2023

die abschließende Klammer hat gefehlt

letztendlich funktioniert es jetzt für meine 3 Divider mit

Code:

card_mod:
  style: |
    ha-card {
      --mdc-icon-size: 16px;
      }
    .card-content div {
      margin-top: 4px !important;
      margin-bottom: 4px  !important;
      height: 30px;
      font-size: 14px;
      }
    .card-content div:nth-child(5) {
      margin-top: 12px !important;
      height: 0px;
      }
    .card-content div:nth-child(12) {
      margin-top: 12px !important;
      height: 0px; 
      }
    .card-content div:nth-child(17) {
      margin-top: 12px !important;
      height: 0px;
      }

ak6812 · 2 Feb. 2024

Wie kann ich
1. die Höhe einer Zeile auch innerhalb einer Karte (bar-card) ändern (zwischen "Spannung Bord" und "SoC")
2. den Anstand zum oberen/ unteren Kartenrand verkleinern (z.B. über "Spannung Bord)
3. den Rahmen der Karte ändern (Farbe etc.) z.B. Rahmen um "Spannung Bord"
Vielen Dank

Code:

title: Batterie 1+2
type: entities
card_mod:
  style: |
    .card-header {
      font-size: 24px;
      padding: 2px 2px 10px 26px
    }
    .card-content {
        padding-top: 0px;
        padding-bottom: 0px;
        padding-left: 2px;
        padding-right: 2px;
      }
    ha-card {
      margin: 0px 0px 0px 0px;
      --mdc-icon-size: 30px;
    }
entities:
  - entity: sensor.batterie_ladung_2
    name: Ladestrom aktuell
    icon: mdi:lightning-bolt-circle
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .text-content:not(.info) {
              color:           
              {% if states(config.entity) | float < 0 %}
                coral !important
              {% else %}
                lime
              {% endif %}
              opacity: 50%
              ;
            }
            :host {
              padding-left: 20px;
              padding-right: 20px;
              padding-top: -20px;
              padding-bottom: -20px;
              --ha-card-background: white;
            }
  - type: custom:bar-card
    height: 20
    width: 100
    positions:
      value: inside
      indicator: 'off'
      icon: outside
      name: inside
    entities:
      - entity: sensor.spannung_starter_batterie
        decimal: 1
        name: Spannung START
        icon: mdi:rv-truck
        min: 10.5
        max: 12.9
        severity:
          - color: rgb(255, 127, 80, 0.4)
            from: 10.5
            to: 11.79999
          - color: rgb(255, 215, 0, 0.4)
            from: 11.8
            to: 12
          - color: rgb(50, 205, 50, 0.4)
            from: 12.000001
            to: 14
  - type: custom:bar-card
    height: 20
    width: 100
    positions:
      value: inside
      indicator: 'off'
      icon: outside
      name: inside
    entities:
      - entity: sensor.spannung_aufbaubatterie
        decimal: 1
        name: Spannung BORD
        icon: mdi:bed-king-outline
        min: 10
        max: 13.2
        severity:
          - color: rgb(255, 127, 80, 0.4)
            from: 10
            to: 12.49999
          - color: rgb(255, 215, 0, 0.4)
            from: 12.5
            to: 12.79999
          - color: rgb(50, 205, 50, 0.4)
            from: 12.80001
            to: 14
      - entity: sensor.soc
        decimal: 0
        name: SoC
        icon: mdi:battery-charging-60
        severity:
          - color: rgb(255, 127, 80, 0.4)
            from: 0
            to: 40
          - color: rgb(255, 215, 0, 0.4)
            from: 40
            to: 80
          - color: rgb(50, 205, 50, 0.4)
            from: 80
            to: 100

Zeilenabstand verringern generell/einzeln pro Karte möglich?

andi55

Member

Anhänge

Steevee

Active member

Osorkon

Active member

Steevee

Active member

andi55

Member

Anhänge

Steevee

Active member

Steevee

Active member

andi55

Member

andi55

Member

Steevee

Active member

andi55

Member

Steevee

Active member

andi55

Member

andi55

Member

ak6812

New member

Zurzeit aktive Besucher

Neueste Beiträge

Letzte Anleitungen

Statistik des Forums

Teilen