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

Styling vertical-stack (horizontal-) card.

Styling a title:
image
Method #1:

type: 'custom:mod-card'
style: |
  ha-card {
    --ha-card-header-color: red;
    --ha-card-header-font-size: 10px;
  }
card:
  type: vertical-stack
  title: Changed font for title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Method #2:

type: 'custom:mod-card'
style:
  hui-vertical-stack-card$: |
    .card-header {
      font-size: 10px !important;
      color: red !important;
    }
card:
  type: vertical-stack
  title: Changed font for title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Colored header:
image

type: 'custom:mod-card'
style:
  hui-vertical-stack-card$: |
    .card-header {
      background-color: green;
    }
card:
  type: vertical-stack
  title: Some title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Colored background:
image

type: 'custom:mod-card'
style: |
  ha-card {
    background-color: red;
  }
card:
  type: vertical-stack
  title: Colored background
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Using an image for the background:
image
Notes:

  1. The "--ha-card-background" variable is used to style the child cards.
  2. The background image is stretched to fit the card’s size.
type: 'custom:mod-card'
style: |
  ha-card {
    background-image: url('/local/images/blue_low_2.jpg');
    background-size: 100% 100%;
    --ha-card-background: rgba(50,50,50,0.3);
  }
card:
  type: vertical-stack
  title: Image for background
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Using an image for the header:
image

type: 'custom:mod-card'
style:
  hui-vertical-stack-card$: |
    .card-header {
      background-image: url('/local/images/blue_low_2.jpg');
      background-size: 100% 100%;
    }
card:
  type: vertical-stack
  title: Image for background
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

More styles for vertical-stack:

type: custom:mod-card
card_mod:
  style:
    hui-vertical-stack-card $: |
      hui-card:nth-of-type(1) {
        --ha-card-background: rgba(50,50,50,0.7);
        margin: 0px 150px 150px 20px;
      }
      hui-card:nth-of-type(2) {
        --ha-card-background: rgba(50,50,50,0.1);
        margin: 0px 20px 20px 150px;
      } 
    .: |
      ha-card {
        background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
        --ha-card-header-color: white;
        --ha-card-header-font-size: 40px;
        height: 500px !important;
        border: 4px solid black;
      }
card:
  type: vertical-stack
  title: Some title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

More styles for horizontal-stack:
Example #1:
image

type: 'custom:mod-card'
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 10px !important;
      margin-bottom: 10px !important;
      --ha-card-background: rgba(50,50,50,0.1);
    }
    hui-entity-card {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      --ha-card-background: rgba(50,50,50,0.7);
    }
  .: |
    ha-card {
      background-color: lightblue;
    }
card:
  type: horizontal-stack
  title: Some title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Example #2:
image

type: 'custom:mod-card'
style:
  hui-horizontal-stack-card$: |
    hui-entities-card {
      margin-left: 10px !important;
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      width: 150%;
      flex: auto !important; 
    }
    mini-graph-card {
      margin-right: 10px !important;
      margin-bottom: 10px !important;
      flex: auto !important; 
    }
  .: |
    ha-card {
      background-color: lightblue;
      --ha-card-background: rgba(50,50,50,0.1);
    }
card:
  type: horizontal-stack
  title: Some title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
        - entity: sun.sun
    - type: 'custom:mini-graph-card'
      entities:
        - sensor.cleargrass_1_co2
      hours_to_show: 12
      points_per_hour: 60
      show:
        name: false
        icon: false

Example #3:
изображение

type: custom:mod-card
card_mod:
  style:
    hui-horizontal-stack-card $: |
      div#root > :first-child > * {
        width: 30%;
        flex: auto; 
      }
      div#root > :last-child > * {
        width: 70%;
        flex: auto; 
      }
card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: sun.sun
    - type: custom:tabbed-card
      tabs:
        ...

Align a title: (added in 2024.6)
изображение

type: custom:mod-card
card_mod:
  style: |
    ha-card {--ha-stack-title-text-align: end;}
card:
  type: vertical-stack
  title: xxxxxxxxxx
  cards:
    - type: entity
      entity: sun.sun
    - type: button
      entity: sun.sun

More examples are described here.

3 Likes