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

[Ildar_Gabdullin]

I am still a beginner and when I started learning card-mod for me it was not easy since I was not able to find a full info for all the possible cards))).
Let me post sometimes little instructions for different cards.

First, it will be an Entity card:

NOTE:
Do not forget to add a "card_mod:" keyword before "style:" (new in card-mod 3).

sensor:

type: entity
entity: sensor.cleargrass_1_co2
style: |
  .header .name {
    color: green;
  }
  ha-card {
    color: red;
  }
  .info .measurement {
    color: orange;
  }
  .header .icon {
      color: cyan;
  }

binary_sensor:

type: entity
entity: binary_sensor.service_on_value
style: |
  .header .name {
    color: green;
  }
  ha-card {
    color: red;
  }
  .header .icon {
      color: cyan;
  }

As for the icon - it will be always cyan, for ON & OFF.
Here is an example for OFF (device_class: connectivity):

The code below changes the icon’s color dependently on the sensor’s state (here & below - styling for text is removed) - if the sensor is ON, then the icon is yellow (standard theme’s active color):

type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
  .header .icon {
  {% if is_state(config.entity,'on') %}
    color: var(--paper-item-icon-active-color);
  {% else %}  
    color: var(--state-icon-color);
  {% endif %}  
  }

Also we can change the “active” & “inactive” colors:

type: entity
entity: binary_sensor.iiyama_2_ping_availability_status
style: |
  .header .icon {
  {% if is_state(config.entity,'on') %}
    color: red;
  {% else %}  
    color: brown;
  {% endif %}  
  }

Changing a font-size & icon’s size:

type: entity
entity: sensor.cleargrass_1_co2
style: |
  .header .name {
    color: green;
    font-size: 10px;
  }
  .info .value {
    color: blue;
    font-size: 8px;
  }
  .info .measurement {
    color: orange;
    font-size: 30px;
  }
  .header .icon {
    color: cyan;
  }
  ha-card {
    --mdc-icon-size: 60px;
  }

Changing a background:

type: vertical-stack
cards:
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      ha-card {
        background-color: orange;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .info {
        background-color: orange;
        padding-top: 16px !important;
      }
      ha-card {
        overflow: hidden;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .header {
        background-color: orange;
      }
      .info {
        padding-top: 16px !important;
      }
      ha-card {
        overflow: hidden;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      ha-card {
        background-image: url("/local/images/blue_low_2.jpg");
        background-size: 100% 100%;
        height: 250px !important;
      }
  - type: entity
    entity: sensor.xiaomi_cg_1_co2
    style: |
      .info {
        padding-top: 16px !important;
        background-image: url("/local/images/Stan_small.png");
        background-repeat: no-repeat;
        background-position: right;
      }
      ha-card {
        overflow: hidden;
      }

---

More examples are described here.