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

Share your Projects! Dashboards & Frontend
1328

Styling a card inside ‘custom:config-template-card’:

1.Styling a row - there are 2 options:

Option 1 - styling must be done from the "config-template-card":
image
Stopped working - see the issue; was fixed later.

code 
type: entities
title: config-template (row)
entities:
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level
    card_mod:
      style: |
        div#card {
          color: orange;
        }
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level (many shadowRoots)
    card_mod:
      style:
        div#card :first-child $:
          hui-generic-entity-row $: |
            state-badge {
              color: red;
            }
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: from CTC level (:host)
    card_mod:
      style: |
        :host {
          color: orange !important;
        }

Option 2 - styling must be done from the "Entities card":
image

code 
type: entities
title: config-template (row) (outside)
entities:
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
  - type: custom:config-template-card
    entities:
      - sun.sun
    row:
      entity: sun.sun
      name: config-template
card_mod:
  style:
    config-template-card $:
      div#card :first-child $ hui-generic-entity-row $: |
        .text-content:not(.info) {
          color: orange;
        }

2.Styling a card - must be done from the card itself:
изображение

code 
type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  title: config-template (card inside)
  card_mod:
    style: |
      .card-header {
        color: green;
      }
  entities:
    - entity: sun.sun
      card_mod:
        style: |
          :host {
            color: red;
          }

One more example:
изображение

code 
type: custom:config-template-card
entities:
  - sun.sun
card:
  type: entities
  title: config-template (card inside)
  card_mod:
    style:
      hui-sensor-entity-row:
        $ hui-generic-entity-row $: |
          state-badge {
            color: cyan;
          }      
  entities:
    - entity: sensor.xiaomi_cg_1_pm25
    - entity: sensor.xiaomi_cg_1_co2

More examples are described here.