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

[Johanvh (Johan Van Hoorde)]

Dear all,

I use shutters and want to customize the icon based on the shutters position.
First off all, by default, there are no icons available to show different states for shutters. (Only shutter fully open, fully closed or shutter alert exists).
After searching I found this solution: GitHub - g-kiss/Home-Assistant-custom-shutter-icons
By default a shutter entity gives this cardt:

The icon on the left changes based on the state open/closed.
The entity ‘State’ can be open (State not 0) or closed (State = 0).
The position is just the ‘Secondary information’, taken from the attribute ‘current_position’ of the entity.
That said, I have 2 issues:
1/ I changed the code to

card_mod:
     style: |
       :host {
         --card-mod-icon:
               {% if states(config.entity) == 'open' %}  csi:shutter-0
               {% else %}  csi:shutter-4
               {% endif %};

The left icon changes to an open shutter but also the 3 ‘operation’ buttons on the right change to this icon.

This is not intend to happen, so how can I get the ‘normal’ operation icons back?

2/ How should I change the code in order not to rely on the state open/closed but on the attribute ‘current_position’?

Thanks for your time and help!

[arganto]

For the left icon you only have to set device_class shutter to your cover. You do not need card-mod.

Either via customizing menu (if you are still on 2021.11.x or via yaml, if you are already on 2021.12.x. Could be, that you can change device_class in your shutter in the entity config as well (in 2021.12.x), but didn’t check this. If not:

In your configuration.yaml

homeassistant:
  customize: !include customize.yaml

And then in an additional customize.yaml

cover.rolladen_wohnzimmer_vorne_links:
  device_class: shutter

But of course, you then have still only open/closed.

[Johanvh (Johan Van Hoorde)]

Thanks for your reply but that doesn’t really helps me. My initial question was clear: icons based on shutter position:
I believe somewhere it should be defined like:
Position 0 = icon shutter-0
Position 1 - 30 = shutter-1
Position 31 - 60 = shutter-2
Position 61 - 99 = shutter-3
Position 100 = shutter-4
I am on 2021.12.X
Hope someone can help, maybe @thomasloven

[arganto]

@Johanvh

2/ How should I change the code in order not to rely on the state open/closed but on the attribute ‘current_position’?

e.g. as starting point

if state_attr('cover.alle_rolladen', 'current_position')|int(default=0) < 100

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