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

Ildar_Gabdullin · March 4, 2021, 11:01pm

A bit later I will review our old badge styling (which we discussed 1-2 months ago) with the new "--ha-label-badge-label-color" method.
Regarding your flickering - I myself facing some problems on my setup like “loosing a style” - sometimes a style is not applied, it works after refreshing a page. Cannot explain it((.

e1miran · March 5, 2021, 5:24am

Card-mod v3.0 is not working

The following is not working for me:

type: markdown
content: '## Hello'
card_mod:
  style: |
    ha-card {
      background: transparent;
      text-align: center;
    }

But the syntax from prior to card-mod v3.0 still works:

type: markdown
content: '## Hello'
style: |
  ha-card {
    background: transparent;
    text-align: center;
  }

I uninstalled and re-installed card-mod in HACS, and it still only responds to pre- v3.0 syntax. I’m at a loss.

anon36468094 · March 5, 2021, 9:19am

Searching for days but can’t find a solution. Is it possible to change the icon on a state?

card:
  type: horizontal-stack
  cards:
    - type: entity
      entity: media_player.samsung_tv_remote
      icon: 'mdi:monitor'
      style: |
        ha-card {
          --state-icon-color: {% if is_state('media_player.samsung_tv_remote', 'on') %} #50A14F {% else %} #5591c2 {% endif %};
          }
      name: TV living```

Ildar_Gabdullin · March 5, 2021, 10:52am

Cannot check "background" but "text-align" works:

type: vertical-stack
title: >-
  card-mod 2 vs card-mod 3
cards:
  - type: markdown
    content: |-
      text text text text text text
      text text text text text text
    card_mod:
      style: |
        ha-card {
          text-align: center;
        }
  - type: markdown
    content: <h1>Example</h1><h2>Hello</h2><h3>World</h3>
    style: |
      ha-card {
        text-align: center;
      }

thomasloven · March 5, 2021, 10:55am

That’s 100% a caching issue.
Make sure your browser console says you’re using card-mod 3.
Otherwise, try this: https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins#clearing-cache

Ildar_Gabdullin · March 5, 2021, 12:20pm

Styling stock Media player card

Colored player’s name & icon:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player:
    .top-info: |
      .icon-name {
        color: red;
      }

Colored player’s name:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player:
    .top-info: |
      .icon-name div {
        color: red;
      }

Colored player’s icon:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player:
    .top-info: |
      .icon-name ha-state-icon {
        color: red;
      }

Colored movie’s title:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player: |
    .title-controls .media-info {
      color: red;
    }

Colored music album’s title & artist (different colors):
Note: the upper style (red) will be used for movie’s title too.

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player: |
    .title-controls .media-info {
      color: red;
    }
    hui-marquee {
      color: green;
    }

Colored “more-info” button:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player:
    .top-info: |
      .more-info {
        color: red;
      }

Colored bottom buttons:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player: |
    .title-controls .controls {
      color: red;
    }

Colored botom control buttons:

Code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style:
    .player: |
      .title-controls .controls ha-icon-button:not(.browse-media) {
        color: red;
      }

Colored “power” button:

Code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style:
    .player: |
      .title-controls .controls ha-icon-button:nth-child(1) {
        color: red;
      }

Colored botom control buttons (different colors):

Code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style:
    .player: |
      .title-controls .controls ha-icon-button:nth-child(1) {
        color: cyan;
      }   
      .title-controls .controls ha-icon-button:nth-child(2) {
        color: green;
      }   
      .title-controls .controls ha-icon-button:nth-child(3) {
        color: red;
      }   
      .title-controls .controls ha-icon-button:nth-child(4) {
        color: magenta;
      }

Colored “browse media” button:

Code

type: media-control
entity: media_player.kodi_rpi_1
style:
  .player: |
    .browse-media {
      color: red;
    }

Colored progress-bar:

Code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style: |
    .player mwc-linear-progress {
      --mdc-theme-primary: magenta !important;
      --mdc-linear-progress-buffer-color: cyan !important;
    }

Colored background:
When a media with a defined cover art is played, then the "background-color" is automatically set dependingly on the cover:

Otherwise a standard color is displayed (also when the player is idle):

How to change the color:

Code

type: media-control
entity: media_player.kodi_iiyama
card_mod:
  style: |
    .background.no-image > * {
      background-color: cyan;
    }

More examples are described here.

e1miran · March 5, 2021, 1:39pm

Thanks for the wiki resource. The ?v=n version trick worked in this case for me.

Ildar_Gabdullin · March 5, 2021, 3:41pm

Styling History Graph card:

Warning: at least in 2023.7 styling the card is very UNSTABLE.

Colored title:

Code

type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Colored title
card_mod:
  style: |
    ha-card {
      color: red;
    }

More formats for a title:

Code

type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: >-
  The quick brown fox jumps over the lazy dog The quick brown fox jumps over the
  lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps
  over the lazy dog
card_mod:
  style: |
    .card-header {
      color: red;
      font-size: 10px;
      line-height: 1.2;
    }

Colored legend:

Code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend
card_mod:
  style:
    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend li {
            color: red !important;
          }

Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code

card_mod:
  style:
    state-history-charts $ .entry-container:nth-child(n):
      state-history-chart-line $ ha-chart-base $: |
        .chartLegend li {
          color: red !important;
        }

Colored legend (different colors):

Code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
  style:
    .content state-history-charts $:
      div:nth-child(1):
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend li {
            color: red !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend li {
            color: orange !important;
          }

Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code

card_mod:
  style:
    state-history-charts $ .entry-container:nth-child(1):
      state-history-chart-line $ ha-chart-base $: |
        .chartLegend li {
          color: red !important;
        }
    state-history-charts $ .entry-container:nth-child(2):
      state-history-chart-line $ ha-chart-base $: |
        .chartLegend li {
          color: orange !important;
        }

Colored legend (different colors for different sensors):

Code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Colored legend (different colors)
card_mod:
  style:
    .content state-history-charts $:
      div:nth-child(1):
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend li:nth-child(1) {
            color: red !important;
          }
          .chartLegend li:nth-child(2) {
            color: cyan !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend li {
            color: magenta !important;
          }

Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code

    card_mod:
      style:
        state-history-charts $ div:nth-child(1):
          state-history-chart-line $ ha-chart-base $: |
            .chartLegend li:nth-child(1) {
              color: red !important;
            }
            .chartLegend li:nth-child(2) {
              color: cyan !important;
            }
        state-history-charts $ div:nth-child(2):
          state-history-chart-line $ ha-chart-base $: |
            .chartLegend li {
              color: magenta !important;
            }

Colored header: unit & legend (different colors):
Note: does not work since HA 2021.7.

Obsolete code

type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Colored header (different colors)
style:
  .content state-history-charts:
    $:
      'state-history-chart-line:nth-child(1)':
        $:
          ha-chart-base:
            $: |
              .chartHeader .chartTitle {
                color: red;
              }
              .chartHeader .chartLegend {
                color: cyan;
              }
      'state-history-chart-line:nth-child(2)':
        $:
          ha-chart-base:
            $: |
              .chartHeader {
                color: orange;
              }
              .chartHeader .chartLegend {
                color: magenta;
              }

Hiding legend:

Code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
  - entity: sensor.xiaomi_cg_2_co2
  - entity: sensor.xiaomi_cg_1_temperature
hours_to_show: 8
refresh_interval: 0
title: Hidden legend
card_mod:
  style:
    .content state-history-charts $:
      div:
        state-history-chart-line $ ha-chart-base $: |
          .chartLegend {
            display: none;
          }

Update 21.09.22: the code above does not work in MacOS & iOS 15.x, use this code (works in Win, iOS 15.x, MacOS):

Code

    card_mod:
      style:
        state-history-charts $ div:nth-child(n):
          state-history-chart-line $ ha-chart-base $: |
            .chartLegend {
              display: none;
            }

Tooltip: colored text:
Note: does not work since HA 2021.7.

Obsolete code

type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-line:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  color: orange;
                  font-size: 10px;
                }
                .chartTooltip .title {
                  color: red;
                  font-size: 20px;
                }

Obsolete code

type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-timeline:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  color: orange;
                  font-size: 10px;
                }
                .chartTooltip .title {
                  color: red;
                  font-size: 20px;
                }
                .chartTooltip .beforeBody {
                  color: cyan;
                 font-size: 15px;
                }

Tooltip: changed background:
Note: does not work since HA 2021.7.

Obsolete code

type: history-graph
entities:
  - entity: sensor.cleargrass_1_co2
  - entity: sensor.cleargrass_2_co2
  - entity: sensor.cleargrass_1_temp
hours_to_show: 8
refresh_interval: 0
title: Tooltip (text)
style:
  .content state-history-charts:
    $:
      state-history-chart-line:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  background-color: rgba(0,0,255,0.7);
                }

Obsolete code

type: history-graph
entities:
  - entity: sun.sun
    name: Sun
  - entity: binary_sensor.net_is_available_internet
    name: Internet
hours_to_show: 8
refresh_interval: 0
title: Tooltip (background)
style:
  .content state-history-charts:
    $:
      state-history-chart-timeline:
        $:
          ha-chart-base:
            $:
              '#chartTarget div': |
                .chartTooltip {
                  background-color: rgba(0,0,255,0.7);
                }

Colored scale:

Code

type: vertical-stack
cards:
  - type: history-graph
    entities:
      - entity: sun.sun
        name: Sun
      - entity: binary_sensor.net_is_available_internet
        name: Internet
    hours_to_show: 8
    refresh_interval: 0
    title: Colored scale
    card_mod:
      style: |
        .content {
          --secondary-text-color: red !important;
          --divider-color: cyan !important;
        }
  - type: history-graph
    entities:
      - entity: sensor.xiaomi_cg_1_co2
        name: CO2
    hours_to_show: 8
    refresh_interval: 0
    title: Colored scale
    card_mod:
      style: |
        .content {
          --secondary-text-color: red !important;
          --divider-color: cyan !important;
          
        }

More examples are described here.

rnot · March 6, 2021, 2:43am

I am using card-mod 3 and I converted all of my style: keys to be underneath the new card_mod: key. Everything works fine EXCEPT when I’m using the Home Assistant iOS app and off-network via Home Assistant Cloud to view my dashboard. Under this condition, all of the new card_mod: styles are not taking affect at all. I can revert one or more of them back to the old method, Save, Reload, and those styles return.

Again, this is only happening on the iOS app via Home Assistant Cloud (nabu case). When I’m on-net it works fine. On my desktop browser, it works both on-net and via Cloud.

Anybody else having this issue?

KTibow · March 6, 2021, 2:44am

It’s caching.

rnot · March 6, 2021, 2:45am

I can revert one or more of them back to the old method, Save, Reload, and those styles return. Edit it back to new method, they break again. Does caching save between versions of the dashboard?

KTibow · March 6, 2021, 2:46am

Caching is caused by your browser. Google “how to clear cache [however you view ha]”.

rnot · March 6, 2021, 2:46am

Okay, reset Front End cache worked. You probably mean its caching the old version of card-mod.

DavidFW1960 · March 6, 2021, 2:47am

Reset the frontend cache in the iOS app. I don’t see any issues with the app and card mod 3 and I reworked all my cards for the new syntax yesterday. They all work fine.

rnot · March 6, 2021, 2:48am

Yep that did it. Didn’t consider caching because it worked when on-network, only broke when I turned off wifi to enable HA Cloud. Wierd. Thanks for the help @KTibow and @DavidFW1960.

DavidFW1960 · March 6, 2021, 2:52am

Honestly the whole caching thing is a bitch on iOS. I can delete all website data in the Chrome app and it will still load the old card until I reset the frontend cache in the app which should not be related anyway.
I also find on my PC chrome I need to go to dev-tools and then right click refresh and select empty cache and hard reload and then do a CTRL+F5 TWICE before everything will work reliably and properly. I thought the point of using HACS and a non-caching endpoint for resources was supposed to prevent this kind of BS…

AdmiralStipe · March 6, 2021, 1:37pm

Although I believe, that this mod only styles cards, I’m still interested, is it possible to use it somehow to style the background of the dashboard… I would like to use this script, can it be done in any way?

KTibow · March 6, 2021, 3:05pm

That script uses JS, and creates additional elements, both of which card-mod cannot do on its own.

AdmiralStipe · March 6, 2021, 3:11pm

Thought so, thx for reply .

not_a_coder · March 7, 2021, 7:35am

I would like to be able to change the font size of everything in the Lovelace dashboard that uses font-size: var(--paper-font-body1_-_font-size); to a font size of 24px. If I have to use card-mod for every single entity I am fine with that but I am unable to get card-mod to override font-size: var(--paper-font-body1_-_font-size);

First I attempted formatting just one of the entities in an entities card. Then I tried formatting the whole entities card. Neither attempt was successful.

Here is one of my attempts

type: entities
entities:
  - entity: sensor.samjin_water_75430b01_temperature
    card_mod:
      style: |
        :host {
          font-size: 24px;
          }  
  - entity: sensor.inovelli_unknown_type_000d_id_0001_temperature
  - entity: switch.smartswitch_on_off

Here is another attempt

type: entities
card_mod:
  style: |
    ha-card {
    font-size: 24px;
    }
entities:
  - entity: sensor.samjin_water_75430b01_temperature
  - entity: sensor.inovelli_unknown_type_000d_id_0001_temperature
  - entity: switch.smartswitch_on_off

Am I formatting the card incorrectly in both attempts? Is there something different I should be doing if I want all of the fonts that use font-size: var(--paper-font-body1_-_font-size); to be set to 24px?

I have multiple Lovelace dashboards and only want one of them to have all fonts that use font-size: var(--paper-font-body1_-_font-size); to have 24px so I don’t want to adjust a theme unless I need to make a new theme and have just this dashboard use the adjusted theme.

edit: I had a test dashboard and the first example started to work at some point. I’m not sure when or why since I haven’t been visiting the page. I have now applied the setting to my Wallmount dashboard. It’s pretty nice.