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

[andreever (André Eversköld)]

Hi there,

Trying to modify a hui-element as I have begin to replace the “custom:hui-” trick.

            - type: custom:hui-element
              card_type: horizontal-stack
              card_mod:
                style:
                  hui-horizontal-stack-card$: |
                    #root {
                      justify-content: center;
                      margin-bottom: 1em;
                    }

With the dirty hack it worked before.

I’m trying to achieve what this image shows (cannot upload more than one media file):
Basically trying to center custom:button-card under the custom:light-popup-card.

[Ildar_Gabdullin]

Styling “chip” buttons:

Distribution of buttons in a row:

code

type: entities
title: distribution
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: flex-end;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: center;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: space-between;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: space-evenly;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: space-around;
          }

---

Distribution for all rows (same method may be used for other styles):

code

type: entities
title: distribution for all rows
entities:
  - &ref_buttons
    type: buttons
    entities:
      - &ref_button
        entity: sun.sun
        show_name: true
        show_icon: true
      - *ref_button
      - *ref_button
      - *ref_button
  - *ref_buttons
  - *ref_buttons
card_mod:
  style:
    hui-buttons-row:
      $ hui-buttons-base $: |
        .ha-scrollbar {
          justify-content: center;
        }

---

Colored background, border & text, rectangular shape (for all buttons and for some button), 3D-shape (+ changed styles on hover & select):

code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --ha-assist-chip-filled-container-color: yellow;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip:nth-child(3) {
            --ha-assist-chip-filled-container-color: yellow;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --ha-assist-chip-filled-container-color: yellow;
            --_label-text-color: red;
            border: 1px solid cyan;
            border-radius: 4px;
            --_label-text-weight: 800;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --_focus-label-text-color: cyan;
            --_hover-label-text-color: white;
            --_pressed-label-text-color: green;
            --_hover-state-layer-color: red;
            --_hover-state-layer-opacity: 0.5;
            --_pressed-state-layer-color: cyan;
            --_pressed-state-layer-opacity: 0.5;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
          }

before 2023.12

Code

type: entities
title: colors & shape
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style: |
        :host {
          --ha-chip-background-color: yellow;
          --ha-chip-text-color: red;
        }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar: |
          ha-chip:nth-child(3) {
            --ha-chip-background-color: yellow;
            --ha-chip-text-color: red;
          }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              border: 1px solid red !important;
              border-radius: 4px !important;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:nth-child(3):
          $: |
            .mdc-chip {
              border: 1px solid red !important;
              border-radius: 4px !important;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
              border-radius: 4px !important;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              box-shadow: var( --ha-card-box-shadow, 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12) ) !important;
              border-radius: 4px !important;
              --ha-chip-background-color: transparent;
            }
            .mdc-chip__ripple {
              border-radius: 4px !important;
            }

---

Colored icon:

code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sensor.processor_use
        name: sensor
        show_name: true
        show_icon: true
      - entity: binary_sensor.service_off_value
        name: 'binary_sensor: off'
        show_name: true
        show_icon: true
      - entity: binary_sensor.service_on_value
        name: 'binary_sensor: on'
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip:nth-child(1) {
            --state-sun-below_horizon-color: green;
            --state-sun-above_horizon-color: magenta;
          }
          ha-assist-chip:nth-child(2) {
            --secondary-text-color: red;
          }
          ha-assist-chip:nth-child(n+3) {
            --state-binary_sensor-on-color: green;
            --state-binary_sensor-off-color: cyan;
          }

before 2023.12

Code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sensor.cleargrass_1_co2
        show_name: true
        show_icon: true
      - entity: binary_sensor.service_off_value
        show_name: true
        show_icon: true
      - entity: binary_sensor.service_on_value
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style: |
        :host {
          --paper-item-icon-active-color: magenta;
          --secondary-text-color: cyan;
        }
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar: |
          ha-chip:nth-child(3) {
            --paper-item-icon-active-color: magenta;
            --secondary-text-color: cyan;
          }

---

Changed width:

code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: zone.home
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            width: 110px;
          }

before 2023.12

Code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sensor.cleargrass_1_co2
        show_name: true
        show_icon: true
        name: CO2 value
      - entity: zone.home
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip span {
              width: 60px;
            }
        hui-buttons-base $: |
          .ha-scrollbar {
            justify-content: center;
          }

---

Changed width + centered icon & text:

code

type: entities
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sensor.xiaomi_cg_1_co2
        show_name: true
        show_icon: true
        name: CO2
      - entity: zone.home
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ ha-assist-chip:
          $: |
            .container {
              justify-content: center;
            }
          .: |
            ha-assist-chip {
              width: 120px;
            }

before 2023.12

Code

type: entities
title: centered icon & text
entities:
  - type: section
    label: default
  - type: buttons
    entities: &ref_buttons
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sensor.cleargrass_1_co2
        show_name: true
        show_icon: true
        name: CO2
      - entity: zone.home
        show_name: true
        show_icon: true
  - type: section
    label: card-mod
  - type: buttons
    entities: *ref_buttons
    card_mod:
      style:
        hui-buttons-base $ .ha-scrollbar ha-chip:
          $: |
            .mdc-chip {
              width: 120px;
              justify-content: center;
            }

---

Disabling a button:

code

type: entities
entities:
  - entity: input_boolean.test_boolean
    name: disable
  - type: buttons
    entities:
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
      - entity: sun.sun
        show_name: true
        show_icon: true
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip:nth-child(2) {
            {% if is_state('input_boolean.test_boolean','on') %}
              pointer-events: none;
              opacity: 0.2;
            {% endif %}
          }

---

More examples are described here.

[klogg]

Nice.

Are these buttons a new option for entities?

I have been creating something similar with a custom button template for some time now and wondered if I might pose a different kind of question? Rather than ask how to do something I can’t do, I am interested in whether there is a better way to achieve this. I have my method which I’m happy to share but I wonder if these (new?) buttons allow for a simpler method?

Both are based on an input_boolean…

these are ‘on’

these are ‘off’

Note the use of a second checkbox icon and different entity icon and labels based on state

[Ildar_Gabdullin]

@klogg

Are these buttons a new option for entities?

No, they are standard buttons with a new design.

@klogg

I have my method which I’m happy to share but I wonder if these (new?) buttons allow for a simpler method?

I will look at this case a bit later.

[Olivier1974 (Olivier Toussaint)]

Hello all,

With 2021.12.0 and up, the style seems to be broken :’(
Here is a style that was working perfectly in 2021.11.5

type: custom:mod-card
style: |
  ha-card {
    background-image: url('/local/ww90t554aaw-s2.jpg');
    background-size: 145% 100%;
    --ha-card-background: rgba(255,255,255,0);
    --primary-text-color: #000000;
    --secondary-text-color: #E0E0E0;
    --paper-item-icon-color: #44739E;
card:
  (...)

It was showing all my texts in black on white background (–primary-text-color), independantly of the selected theme, which was what I wanted.

But since the latest version of HA, if I select a dark theme (or in the companion app in dark mode), the text is white, as configured in the theme css file and as a consequence my text, on a white background, is unreadable.

Is it possible that the classes had changed?
What are the new names?

Please help me.

[Ildar_Gabdullin]

@Olivier1974

ha-card {

1. Closing bracket is missing.
2. Why using mod-card? What card are you talking about?

[Olivier1974 (Olivier Toussaint)]

It is not missing in my config, it is in the copy/paste that I screwedup.
Let me post the full card, it will make more sense probably. As I’m using a light background image, I’m using mod-card to force the text in black and icons in blue (default HA color scheme).

type: custom:mod-card
style: |
  ha-card {
    background-image: url('/local/ww90t554aaw-s2.jpg');
    background-size: 145% 100%;
    --ha-card-background: rgba(255,255,255,0);
    --primary-text-color: #000000;
    --secondary-text-color: #E0E0E0;
    --paper-item-icon-color: #44739E;
  }
card:
  type: custom:vertical-stack-in-card
  cards:
    - type: glance
      title: Samsung EcoBubble
      entities:
        - entity: sensor.samsung_machine_state
        - entity: sensor.samsung_washing_time
          icon: mdi:clock-outline
          name: Fin du programme
        - entity: sensor.samsung_prog_state
          icon: mdi:debug-step-over
          name: Etape du programme
    - type: iframe
      url: https://localhost/HomeAssistant/EcoBubble/index.html
      aspect_ratio: 78%
    - type: glance
      entities:
        - entity: sensor.lave_linge_energy_daily
          name: Aujourd'hui
          icon: mdi:calendar-today
        - entity: sensor.lave_linge_energy_weekly
          name: Cette semaine
          icon: mdi:calendar-week
        - entity: sensor.lave_linge_energy_monthly
          name: Ce mois-ci
          icon: mdi:calendar-month

With the default HA theme

But in dark mode:

[Ildar_Gabdullin]

Again:

@Ildar_Gabdullin

Why using mod-card?

Does the vertical-stack-in-card have ha-card element?
Do you see changes in Code Inspector?

[Olivier1974 (Olivier Toussaint)]

@Ildar_Gabdullin

Again:

@Ildar_Gabdullin

Why using mod-card?

If “Always need black text and blue icons because of the background image I’ve set” doesn’t answer that question then obviously I did not understand the question. Or, you try to tell me that there is another way to achieve my goal but how then?

Does the vertical-stack-in-card have ha-card element?
Do you see changes in Code Inspector?

I don’t see any change, especially because this was working in 2021.11.5 and no longer in 2021.12.0 (and 2021.12.1, 2021.12.2 and 2021.12.3).
Nothing was updated but HA core (neither mod-card, neither vertical-stack-in-card)

vertical-stack-in-card is just vertical-stack without separators. And replacing it with the regular vertical-stack doesn’t change my issue.

Obviously, mod-card is working, as I’ve the requested background
background-image: url('/local/ww90t554aaw-s2.jpg');

but the text remains white, despite the
--primary-text-color: #000000;

[Ildar_Gabdullin]

@Olivier1974

did not understand the question.

Do you understand a difference between card-mod and mod-card? The latter is supposed to be used only for cards w/o ha-card. That is why I asked you about ha-card.

[reste_narquois (Chris Warne)]

I think you would greatly benefit from re-reading the documentation on GitHub.

Judging from your code, there have been significant changes that you need to catch up with.

[Olivier1974 (Olivier Toussaint)]

Yes, probably, my code is from a very old version of the card/module.
I did the change to “load it as a module” in the frontend section when it was advised.
Using the new way of working, I managed to change my text to black again, keeping my background.
Thanks

[anon36468094]

Is it possible to change the border thickness of the person icon/badge on the maps card? I see it’s in the .marker style but can’t find a way to change it with card_mod.

[Ildar_Gabdullin]

Small tricks for multiple-entity-row, added to the main post.

[Mariusthvdb (Marius)]

haha, thats wild for Sylvester . And yes, Ive been using gifs for buttons since forever, btw, also as entity_picture. use

for my app device_trackers

Was wondering if you could help me fix this glowing Christmas card I tried…

Pulsating lights automation

cleaned that up a bit…: [Dec-18-2021 15-13-07] type: custom:button-card entity: input_boolean.pulsate_light variables: duration: > [[[ return states['input_number.transition_time'].state; ]]] tooltip: > [[[ return entity.state == 'on'? 'Fixed lights' :'Breathing lights'; ]]] show_name: false size: 95% aspect_ratio: 1/1 state: - value: 'on' icon: mdi:hexagram styles: card: - background-color: ivory - animation: > [[[ return 'glow ' + variables…

Id like it to appear glowing from the background of the card, but for now managed to set the box-shadow like this.

[Mariusthvdb (Marius)]

can we at all use word wrap on an individual glance state (3d (last) one, Prediction)?

type: entities
title: Buienradar Iungo
card_mod:
  style: |
    .card-header {
      background-color: var(--background-color-off);
      color: var(--text-color-off);
      padding-top: 0px;
      padding-bottom: 0px;
      margin: 0px 0px 16px 0px;
    }
entities:
  - type: custom:hui-element
    card_type: glance
    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
    entities:
      - sensor.temp_current
      - sensor.windspeed
      - sensor.prediction. # <--- needs word-wrap 
  - type: custom:fold-entity-row

I checked the examples for word-wrap but probably missed it, and this is what is actually in the state:

[Ildar_Gabdullin]

@Mariusthvdb

word wrap on an individual glance state

Post

[Mariusthvdb (Marius)]

geez, really did a word search for that… still, doesnt work out of the box (the mod still has the old style though, so I used it as:)

    card_mod:
      style: |
        ha-card {
          box-shadow: none;
          margin: 0x -16px 0px -16px;
        }
        .entities .entity:
          $: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

no change unfortunately nor does

      - entity: sensor.prediction
        card-mod:
          style: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }

work

[Ildar_Gabdullin]

@Mariusthvdb

no change unfortunately

try this (not tested):

    card_mod:
      style:
        .entities .entity:
          $: |
            div:not(.name) {
              text-overflow: unset !important;
              white-space: unset !important;
            }
        .: |
          ha-card {
            box-shadow: none;
            margin: 0x -16px 0px -16px;
          }

@Mariusthvdb

geez, really did a word search for that…

That post contained examples for wrapped names only, I just added examples for values - specially for @Mariusthvdb )))

@Mariusthvdb

card-mod:

!!!

[Mariusthvdb (Marius)]

better:

though now the last child is shifted upwards …