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

[Ildar_Gabdullin]

One more post for beginners - styling Glance card.

Colored text:

code

type: glance
title: Colored text
style: |
  ha-card {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

---

Colored title:

code

type: glance
title: Colored title
card_mod:
  style:
    $: |
      .card-header {
        color: red  !important;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

stopped working in the end of 2022

Before this change:

type: glance
title: Colored title
style: |
  ha-card .card-header {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

---

Colored name & value (all entities):

code

type: glance
title: Colored name & value
style: |
  ha-card .entities {
    color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored name & value (1st entity):

code

type: glance
title: Colored name & value (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Colored name (all entities):

code

type: glance
title: Colored name
style:
  .entities .entity:
    $: |
      .name {
        color: red;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored name (1st entity):

code

type: glance
title: Colored name (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host .name {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

Colored state (all entities):

code

type: glance
title: Colored states
style:
  .entities .entity:
    $: |
      div:not(.name) {
        color: red;
      }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

Colored state (1st entity):

code

type: glance
title: Colored state (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      div:not(.name) {
        color: red;
      }
  - entity: sensor.cleargrass_1_co2

---

Colored icons:
By default for entities like "sensor" (same for "device_tracker", "person", "zone", …) an icon’s color does not depend on the entity’s state.
There are two methods for changing a color:

• using a "--paper-item-icon-color" variable;
• using a "color" CSS property.

Method #1 (using a "--paper-item-icon-color" variable):
For all entities:

code

type: glance
title: Colored icons
style: |
  ha-card {
    --paper-item-icon-color: red;
  }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

For some entity:

code

type: glance
title: Colored icon (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        --paper-item-icon-color: red;
      }
  - entity: sensor.cleargrass_1_co2

Method #2 (using a "color" CSS property):

code: For all entities

type: glance
card_mod:
  style:
    .entity:
      $: |
        state-badge {
          color: red;
        }
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2

code: For some entity

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
        }
  - entity: sensor.cleargrass_1_co2

---

By default for entities like "binary_sensor", "sun.sun", "switch", "input_boolean" - an icon’s color DOES depend on the entity’s state - if the property "state_color: true" is set for the card. If it is set to "false", then the color DOES NOT depend on the state - use same Methods #1, #2 as for the "sensor" (described above).
There are two methods for changing a color:

• using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables;
• using a "color" CSS property.

Method #1 (using "--paper-item-icon-color" and "--paper-item-icon-active-color" variables):

code

type: glance
state_color: true
style: |
  ha-card {
    --paper-item-icon-color: red;
    --paper-item-icon-active-color: cyan;
  }
entities:
  - entity: binary_sensor.service_on_value
  - entity: binary_sensor.iiyama_2_ping_availability_status

Method #2 (using a "color" CSS property) - identical to the Method #2 described for the "sensor" entity above.

How to implement conditional color dependently on state for "binary_sensor" using Method #2 (may be used for "sun.sun" & others too with some corrections):

code

type: glance
entities:
  - entity: binary_sensor.iiyama_2_ping_availability_status
    card_mod:
      style: |
        state-badge {
          {% if is_state(config.entity,'on') %}
            color: red;
          {% else %}
            color: blue;
          {% endif %}
        }

---

Wrapped text (all entities):

code

type: glance
title: Wrapped text
style:
  .entities .entity:
    $: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped

Wrapped text (1st entity):

code

type: glance
title: Wrapped text (1st entity)
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
    style: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: sensor.cleargrass_1_co2
    name: Not wrapped Not wrapped Not wrapped Not wrapped

+some alignment:

code

type: glance
title: Wrapped text (1st entity) + aligned
card_mod:
  style: |
    .entities {
      align-items: end !important;
    }
entities:
  - entity: sensor.cleargrass_1_co2
    name: Wrapped wrapped wrapped wrapped wrapped wrapped
    style: |
      .name {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: sensor.cleargrass_1_co2
    name: Not wrapped Not wrapped Not wrapped Not wrapped

Wrapped values (all entities):

code

type: glance
title: Wrapped values
style:
  .entities .entity:
    $: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
entities:
  - entity: input_text.test_text
    name: Wrapped
  - entity: input_text.test_text
    name: Wrapped

Wrapped value (1st entity):

code

type: glance
title: Wrapped value (1st entity)
entities:
  - entity: input_text.test_text
    name: Wrapped
    style: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: input_text.test_text
    name: Not wrapped

+some alignment:

code

type: glance
title: Wrapped value (1st entity) + aligned
card_mod:
  style: |
    .entities {
      align-items: start !important;
    }
entities:
  - entity: input_text.test_text
    name: Wrapped
    style: |
      div:not(.name) {
        text-overflow: unset !important;
        white-space: unset !important;
      }
  - entity: input_text.test_text
    name: Not wrapped

---

Resizing icons:
For the whole card:

code

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_1_co2
style: |
  ha-card {
    --mdc-icon-size: 60px;
  }

For some row:

code

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    style: |
      :host {
        --mdc-icon-size: 60px;
      }
  - entity: sensor.cleargrass_1_co2

---

Changing font-size:

code

type: vertical-stack
title: font-size
cards:
  - type: glance
    style:
      .entities .entity:
        $: |
          .name {
            font-size: 20px;
          }
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
      - entity: sensor.cleargrass_1_co2
        name: Changed font
  - type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
      - entity: sensor.cleargrass_1_co2
        name: Changed font
        style: |
          :host .name {
            font-size: 20px;
          }
  - type: glance
    style:
      .entities .entity:
        $: |
          div:not(.name) {
            font-size: 20px;
          }
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
      - entity: sensor.cleargrass_1_co2
        name: Changed font
  - type: glance
    entities:
      - entity: sensor.cleargrass_1_co2
        name: Changed font
        style: |
          div:not(.name) {
            font-size: 20px;
          }
      - entity: sensor.cleargrass_1_co2

---

Make a square entity_picture:

code

type: glance
entities:
  - entity: person.ildar
    card_mod:
      style: |
        state-badge {
          border-radius: 10%;
        }

---

Math operations, replacing a value:
post

---

More examples are described here.