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

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:
afbeelding
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.
afbeelding
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!

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. :wink:

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

e.g. as starting point

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

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.

Styling “chip” buttons:

Distribution of buttons in a row:

image

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

image

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

image

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

image

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.

8 Likes

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’
image

these are ‘off’
image

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

No, they are standard buttons with a new design.

I will look at this case a bit later.

1 Like

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.

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

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:

Again:

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

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?

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;

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.

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.

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

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.

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

1 Like

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

ha_animated_home
ha_animated_not_home

for my app device_trackers :wink:

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

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

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:

1 Like