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

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:

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 {
      --ha-card-header-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:
WARNING: not working after 2025.2.

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 $: |
          .chart-legend li {
            color: red !important;
          }

Update 21.09.22: the code above may 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 $: |
        .chart-legend li {
          color: red !important;
        }

Colored legend (different colors):
WARNING: not working after 2025.2.

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 $: |
          .chart-legend li {
            color: red !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: orange !important;
          }

Update 21.09.22: the code above may 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 $: |
        .chart-legend li {
          color: red !important;
        }
    state-history-charts $ .entry-container:nth-child(2):
      state-history-chart-line $ ha-chart-base $: |
        .chart-legend li {
          color: orange !important;
        }

Colored legend (different colors for different sensors):
WARNING: not working after 2025.2.

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 $: |
          .chart-legend li:nth-child(1) {
            color: red !important;
          }
          .chart-legend li:nth-child(2) {
            color: cyan !important;
          }
      div:nth-child(2):
        state-history-chart-line $ ha-chart-base $: |
          .chart-legend li {
            color: magenta !important;
          }

Update 21.09.22: the code above may 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 $: |
            .chart-legend li:nth-child(1) {
              color: red !important;
            }
            .chart-legend li:nth-child(2) {
              color: cyan !important;
            }
        state-history-charts $ div:nth-child(2):
          state-history-chart-line $ ha-chart-base $: |
            .chart-legend li {
              color: magenta !important;
            }

Colored header: unit & legend (different colors):
WARNING: not working after 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:
WARNING: not working after 2025.2.

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 $: |
          .chart-legend {
            display: none;
          }

Update 21.09.22: the code above may 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 $: |
            .chart-legend {
              display: none;
            }

Tooltip: colored text:
WARNING: not working after 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:
WARNING: not working after 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:
(05.01.25: may be not persistent)

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 {
          --primary-text-color: red !important;
          --divider-color: cyan !important;
          
        }

Colored “axis pointer” line:

code

type: history-graph
entities:
  - entity: sensor.xiaomi_cg_1_co2
card_mod:
  style: |
    ha-card {
      --info-color: yellow;
    }

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.

parautenbach · March 7, 2021, 8:13am

I’m on my phone but have a look or search for overriding the CSS variable in a custom.js file instead. It will set it globally, for all themes.

not_a_coder · March 7, 2021, 8:15am

I would like to edit just one dashboard or just one theme and apply it to just this one dashboard

NdR · March 7, 2021, 8:59am

Hello guys, I just realized that probably i wronged place where to ask my question (another thread), so I’m pasting here the same comment:

Hello guys, I need your help.

I’m trying to hide the header of this popup.
I’m using the code with “more-info”, so I cannot use the hide_header: true setting.

This is the style I’m applying to this card:

  climate.daikin_camera:
    large: true
    title: Clima
    style:
      $: |
        .mdc-dialog {
          backdrop-filter: blur(17px);
          -webkit-backdrop-filter: blur(17px);
          background: rgba(0,0,0,0.25);
        }
        .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
          background: none !important;
          box-shadow: none;
          border-radius: 0px;
        }

        .mdc-top-app-bar {
          background: none !important;
        }
    card:
      type: 'custom:layout-card-griddier'

How dan I remove the Header?

EDIT:
I found out that if I uncheck the background-color: var(--secondary-background-color); the header background disappear. But I don’t know how to set this up on my code.

KTibow · March 7, 2021, 3:19pm

Make a custom theme and only apply it to those views.