🔹 Card-mod - Add css styles to any lovelace card

Share your Projects! Dashboards & Frontend
2532

This is a good point! HA is a kind of hobby for many people))).
Btw, I have never been a CSS expert too, never been a web-programmer or designer))).
Everything is achieved step by step.

The code is not 100% correct.
See this:

изображение
изображение1830×211 28.5 KB

There are at least 2 ways of decreasing a row height:

  • remove margins between rows - 2nd column;
  • decrease a row’s height (40px → 25px) - 3rd column= for all rows, 4th column=for each row - up to you to decide which variant needs less of lines.
type: horizontal-stack
cards:
  - type: entities
    entities: &ref_0
      - entity: sun.sun
      - entity: sensor.cleargrass_1_co2
      - entity: input_boolean.test_boolean
      - entity: input_number.test_number
  - type: entities
    entities: *ref_0
    card_mod:
      style: |
        .card-content div {
          margin-top: 0px !important;
          margin-bottom: 0px  !important;
          color: red;
        }
  - type: entities
    entities: *ref_0
    card_mod: ### leave the code only for your rows (i.e. for sensors only if no other types are present)
      style:
        hui-simple-entity-row:
          $: |
            hui-generic-entity-row {
              color: red;
              height: 25px;
            }
        hui-sensor-entity-row:
          $: |
            hui-generic-entity-row {
              color: cyan;
              height: 25px;
            }
        hui-toggle-entity-row:
          $: |
            hui-generic-entity-row {
              color: magenta;
              height: 25px;
            }
        hui-input-number-entity-row:
          $: |
            hui-generic-entity-row {
              color: green;
              height: 25px;
            }
  - type: entities
    entities:
      - entity: sun.sun
        card_mod: &ref_1
          style: |
            hui-generic-entity-row {
              height: 25px;
            }
      - entity: sensor.cleargrass_1_co2
        card_mod: *ref_1
      - entity: input_boolean.test_boolean
        card_mod: *ref_1
      - entity: input_number.test_number
        card_mod: *ref_1

Also, to avoid listing all possible domain-dependent rows - use this:

card_mod:
  style:
    .card-content div:
      :first-child $: |
        hui-generic-entity-row {
          ...
        }
4 Likes