đŸ”č 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

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

How would I do that?
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?

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.

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:
image

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;
            }

People, I really need a help with this:

Can anyone help me?

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


1 Like

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

Tested in 2024.7.1:

Untitled Project_st

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.

6 Likes

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):

Check here

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

This is not about lights, this is about entities.

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

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?

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

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

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.

It is explained, please read again:

I’ve made it like this :slight_smile:

  - 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