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

[Ildar_Gabdullin]

Styling vertical-stack (horizontal-) card.

Styling a title:

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:

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:

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:

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:

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:

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:

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.

[KTibow (Kendell R)]

You need to shadow-root for that, I think.

[Klex1404]

How would I do that?
Nothing is working. Is the markdown card even stylable?

[Ildar_Gabdullin]

@Klex1404

Nothing is working. Is the markdown card even stylable?

This is what I got with your code:

Is it what you expect?
If yes - may be you do not have card-mod installed.
If no - what is wrong?

[Klex1404]

It is working now, thanks.
The verification of the code helped me to look elsewhere.
It seemed there was issue with my hacs key for github.
Thanks for your help.

[Ildar_Gabdullin]

An example of using "card-mod" for "multiple-entity-row" to display a "last-changed" for items:

Described here

---

Same method may be used to display ANY text below items.
Even for icons:

code

      - type: custom:multiple-entity-row
        entity: sun.sun
        show_state: false
        entities:
          - entity: sun.sun
            icon: true
            name: false
          - entity: sun.sun
            icon: true
            name: false
          - entity: sun.sun
            icon: true
            name: false
        card_mod:
          style: |
            .entities-row div.entity:nth-child(1) div::after  {
              color: var(--secondary-text-color);
              font-size: 0.7rem;
              content: "\A label";
              white-space: pre;
            }
            .entities-row div.entity:nth-child(2) div::after  {
              color: var(--secondary-text-color);
              font-size: 0.7rem;
              content: "\A {{states('sun.sun')}}";
              white-space: pre;
            }
            .entities-row div.entity:nth-child(3) div::after  {
              color: var(--secondary-text-color);
              font-size: 0.7rem;
              content: "\A {{state_attr('sun.sun','elevation')}}";
              white-space: pre;
            }

[Ildar_Gabdullin]

People, I really need a help with this:

Card-mod - Add css styles to any lovelace card

I gonna ask some probably silly questions (sorry for broken English). I have HA on RPi 3 (docker). My HA setup includes 3 dashboards (for HA itself, for testing things, for testing card-mod), each dashboard includes lots (~10…20) of views. This is all edited in UI, not in yaml files (I know nothing about yaml-mode, it is in my plans). And I use an old card-mod syntax in most cases (99%). Every time when I work with Inspector (Chrome, Win10x64) with views with card-mod, I observe a high CPU …

Can anyone help me?

[DavidFW1960 (David)]

I think it’s all browser related on the PC you are viewing it on and doesn’t impact HA apart from querying HA for the data for that view…

[Ildar_Gabdullin]

Meanwhile trying to create sticky cards (credits to @ASNNetworks).

Tested in 2024.7.1:

title: sticky
path: sticky
cards:

  - type: custom:mod-card
    card_mod:
      style:
        hui-vertical-stack-card $: |
          div#root > :first-child,
          div#root > :last-child {
            z-index: 999;
            position: sticky;
            position: -webkit-sticky;
          }
          div#root > :first-child {
            top: var(--header-height);
          }
          div#root > :last-child {
            bottom: 0;
          }
    card:
      type: vertical-stack
      cards:
        - &ref_glance_4
          type: glance
          entities:
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun

        - &ref_glance
          type: glance
          entities:
            - entity: sun.sun
        - *ref_glance
        - *ref_glance

        - type: entities
          entities:
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun
            - entity: sun.sun

        - *ref_glance_4

before 2024.7

Here two sticky cards - top & bottom:

type: vertical-stack
cards:
  - type: glance
    card_mod:
      style: |
        :host {
          z-index: 999;
          position: sticky;
          position: -webkit-sticky;
          top: var(--header-height);
        }
        ha-card {
          border-style: solid;
          border-radius: 15px;        
        }
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: glance
    entities:
      - entity: sun.sun
  - type: glance
    entities:
      - entity: sun.sun
  - type: glance
    entities:
      - entity: sun.sun
  - type: entities
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
  - type: glance
    card_mod:
      style: |
        :host {
          z-index: 999;
          position: sticky;
          position: -webkit-sticky;
          bottom: 0;
        }
        ha-card {
          border-style: solid;
          border-radius: 15px;        
        }
    entities:
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun
      - entity: sun.sun

Note that "ha-card" styles used for the sticky card itself (borders, background etc), ":host" styles used for the subcontainer inside the main container to make it sticky (sorry if this is not true-CSS-language).
To repeat the same test - copy this code and paste it into the only card into some view.

For the top card I have to set:

        top: var(--header-height);

Works on desktop (Chrome, Win10x64, 1920x1200) and on iPhone 5S as well.

[SebastianMtl (Sébastian)]

Hi
I use card mod for change color of my icons depending it state , but I have an issue.

When I toggle state with Chrome on my PC no problem, When I do it on Safari on my mac or Safari on my iphone the color don’t change until I refresh.
this is the result ( Mac, iPhone safari and HA companion for macOS):

[Ildar_Gabdullin]

Check here

[SebastianMtl (Sébastian)]

Nice job, but I don’t see any problem with my code ?
Have you code to share me with my lights ?

[Ildar_Gabdullin]

@SebastianMtl

my lights ?

This is not about lights, this is about entities.

[SebastianMtl (Sébastian)]

Ok but how can you suggest me with that :

 - type: entities
            entities:
              - entity: light.plafonnier
                card_mod:
                      style: |
                        :host {
                          --card-mod-icon-color: {% if is_state('light.plafonnier', 'on') %} yellow {% else %} white {% endif %}
                        }  
                name: Plafonnier
              - entity: light.lampe_buffet
                card_mod:
                      style: |
                        :host {
                          --card-mod-icon-color: {% if is_state('light.lampe_buffet', 'on') %} yellow {% else %} white {% endif %}
                        }  
                name: Buffet

[Ildar_Gabdullin]

@SebastianMtl

--card-mod-icon-color

I do not know what it is - "--card-mod-icon-color", tried to search it here , it is in your posts only.
What do you want to achieve? Is it not covered by that post?

[petro]

I replied to you on facebook and you ignored me… You need to use --paper-item-icon-color.

[SebastianMtl (Sébastian)]

I want to make cooler icon responsive compared to a entity state
E.g: if lampe_buffet is on , I want Yellow if not I want white icon color

If I use —paper-item-icon-color , it doesn’t work with conditions

[petro]

Yes, and it’s because you’re copying —paper-item-icon-color from facebook! Like I said on facebook.

Type it out instead of copy/paste.

[Ildar_Gabdullin]

@SebastianMtl

it doesn’t work with conditions

It is explained, please read again:

[SebastianMtl (Sébastian)]

I’ve made it like this

  - entity: light.lampe_bureau 
                card_mod:
                      style: |
                        :host {
                          --paper-item-icon-color: red
                          --paper-item-icon-active-color: green
                        }  
                name: Lampe bureau

It’s Okay becaus I really don’t understand