🔹 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:
Example #1:

Note: the "--vertical-stack-card-margin" variable is used to define margins for the child cards.

type: 'custom:mod-card'
style: |
  ha-card {
    border-style: solid;
    border-width: 5px;
    border-radius: 10px;

    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;

    --vertical-stack-card-margin: 0px 20px 190px 20px;

    --ha-card-background: rgba(50,50,50,0.3);
  }
card:
  type: vertical-stack
  title: Some title
  cards:
    - type: entities
      entities:
        - entity: sun.sun
        - entity: sun.sun
    - type: entity
      entity: sun.sun

Example #2:

type: 'custom:mod-card'
style:
  hui-vertical-stack-card$: |
    hui-entities-card {
      --ha-card-background: rgba(50,50,50,0.7);
      --vertical-stack-card-margin: 0px 200px 190px 20px;
    }
    hui-entity-card {
      --ha-card-background: rgba(50,50,50,0.1);
      --vertical-stack-card-margin: 0px 20px 0px 200px;
    }
  .: |
    ha-card {
      border-style: solid;
      border-width: 5px;
      border-radius: 10px;

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

---

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

[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).
Here two sticky cards - top & bottom:

type: vertical-stack
cards:
  - type: glance
    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
    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