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

[Ildar_Gabdullin]

@DrewXT

I get how to make the icon go green

Wrong. Your code is to make ALL icons to be green by changing a variable --paper-item-icon-active-color.
You should use a code to change a color by using DOM navigation for all entities or some entity (YOUR case since you want to rotate it next) - see again this topic:

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
        }
  - entity: sensor.cleargrass_1_co2

Then regarding rotation:

@DrewXT

    card-mod-glance:
    $: |
    state-badge {

What is that? Where did you take it?
Use same method as for entities - but apply it as the style for a changing color.

type: glance
entities:
  - entity: sensor.cleargrass_1_co2
    card_mod:
      style: |
        state-badge {
          color: red;
          animation: rotation 0.5s linear infinite;
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }
  - entity: sensor.cleargrass_1_co2

Seriously - you have got ready “bricks” of card-mod examples - and your task is just to combine them properly. This is not a matter of “knowing CSS” - basically this is a matter of “learning”, if talking about simple cases.

[Ildar_Gabdullin]

@Mariusthvdb

had this footer mod:

The code for the footer plz…
On my setup all these footer/header examples still work.

@Mariusthvdb

latest dev

I see, you are talking about dev HA version… Haven’t seen it yet.

[mateuszdrab]

Can someone give me a hint how I can add margin to the following card to increase the spacing between the value and the unit:

          - entity: input_number.bedroom_bedappliances_maximumruntime
            icon: mdi:alarm
            type: custom:numberbox-card
            border: false
            name: false  

I’ve just spent an hour if not two trying different options.
My dom tree looks like this:

I essentially need to add

margin-left: 10px

to

span.cur-unit

It’s 2.30am, I’ll , my brain is dead

[Mariusthvdb (Marius)]

some oddity. using a mod on an embedded markdown card

      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }

regularly changes the full card to use the size setting on the full entities card it is used in (except for the header). But including even the text in the fold-entity-row header, and fold itself:

  - type: entities
    title: Weather quick view
    card_mod: &header
      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:
        badges:
          - sensor.weather_animated_icon
          - sensor.badge_wind_compass
          - sensor.wind_compass
          - sensor.wind_bft
      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }
        content: >
          **Weersverwachting:**

          Voor vandaag, {{states('sensor.vandaag')}}:

          {{states('sensor.weather_animated_icon')}}, {{states('sensor.dark_sky_temperature')}}°


          <font color= {{states('sensor.temperature_color_name')}}>{{states('sensor.dark_sky_daily_summary')}}</font>
      - type: custom:fold-entity-row
        head:
          type: section
          label: Details
        padding: 0
        entities:
          - sensor.temp_current
          - sensor.mean_outdoor_temp
          - sensor.buienradar_feel_temperature
          - sensor.dark_sky_apparent_temperature
          - sensor.real_feel_temp

as it should be

but:

a mere reload of the page then fixes it, but still seems odd this keeps happening on first loads for Safari, Chrome still shows the enlarged card. Someone spots anything incorrect?

edit

adding ‘.type-markdown’:

      - type: custom:hui-element
        card_type: markdown
        card_mod:
          style: |
            ha-card.type-markdown {
              margin: 8px 0px -16px -0px;
              font-size: 20px;
              box-shadow: none;
            }

seems to fix it. Will check if that is permanent. Still want to understand why this is happening though…

[Mariusthvdb (Marius)]

yes correct, HA new version. footer code is:

   footer:
      type: buttons
      entities:
      - entity: script.garage_lamellen_open
        icon: mdi:arrow-up
#        name: Open
      - entity: script.garage_lamellen_my
        name: My
        show_icon: false
      - entity: script.garage_lamellen_close
        icon: mdi:arrow-down
#        name: Close

for now Ive added an extra stack with custom buttons:

      - type: custom:hui-element
        card_type: horizontal-stack
        cards:
          - type: custom:button-card
            entity: script.garage_lamellen_open
            icon: mdi:arrow-up
            show_name: false
#        name: Open
            aspect_ratio: 3/1
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
          - type: custom:button-card
            entity: script.garage_lamellen_my
            name: My
            show_icon: false
            aspect_ratio: 3/1
            styles:
              card:
                - color: orange
                - box-shadow: none
              name:
                - font-weight: bold
                - font-size: 40px
            tap_action:
              action: call-service
              service: script.toggle
              service_data:
                entity_id: entity
              haptic: light
            hold_action:
              action: more-info
              haptic: light
          - type: custom:button-card
            entity: script.garage_lamellen_close
            icon: mdi:arrow-down
            show_name: false
#        name: Open
            aspect_ratio: 3/1
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }

to get what I had before:

[Ildar_Gabdullin]

Styling custom:numberbox-card:

code

type: entities
entities:
  - type: section
    label: colored icon (2 options)
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: red;
        }
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        state-badge {
          color: cyan;
        }
  - type: section
    label: colored text
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left {
          color: red;
        }
        .grid-content.grid-right {
          color: magenta;
        }
        .grid-content.grid-left .secondary {
          color: cyan;
        }
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    secondary_info: default color
    card_mod:
      style: |
        .grid-content.grid-left {
          color: red;
        }
        .grid-content.grid-left .secondary {
          color: initial;
        }
  - type: section
    label: colored buttons, value & unit
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        .body .padr {
          color: red;
        }
        .body .padl {
          color: cyan;
        }
        .body .cur-num {
          color: orange;
        }
  - type: section
    label: colored value & opaque unit (diff.colors)
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        .body .cur-num {
          color: orange;
        }
        .body .cur-unit {
          color: cyan;
          opacity: 1;
        }
  - type: section
    label: spacings
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        .body .padr {
          padding-right: 32px;
        }
        .body .padl {
          padding-left: 32px;
        }
        .body .cur-unit {
          margin-left: 32px;
        }
  - type: section
    label: Full width
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    icon: false
    name: false
    card_mod:
      style: |
        .body .cur-box {
          display: grid;
          grid-template-columns: 1fr 10fr 1fr;
          place-items: center;
        }
  - type: section
    label: Bordered row
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    name: Bordered row
    border: true
    card_mod:
      style: |
        :host {
          --ha-card-box-shadow: 5px 5px 8px red, 10px 10px 8px green, 5px 5px 8px blue;
        }

---

Changed “on-edit” color:

Summary

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        .body .cur-num {
          color: cyan;
        }
        .body .upd {
          color: magenta;
        }
        .body .cur-unit {
          color: red;
        }

---

Vertically aligned buttons:

code

type: horizontal-stack
title: 1 column
cards:
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: start;
            }
            .body .padr {
              padding-left: 0px;
            }
            .body .padl {
              padding-left: 0px;
            }
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: end;
            }
            .body .padr {
              padding-right: 0px;
            }
            .body .padl {
              padding-right: 0px;
            }

---

Vertical spacing for buttons:

code

type: horizontal-stack
title: 1 column, vertical spacing
cards:
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }
            .body .padl {
              padding-bottom: 0px;
            }
            .body .padr {
              padding-top: 0px;
            }
  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }
            .body .padl {
              padding-bottom: 32px;
            }
            .body .padr {
              padding-top: 32px;
            }

---

Horizontal alignment for buttons & values:

code

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_number.test_number
    name: Threshold 1
  - type: custom:numberbox-card
    entity: input_number.test_number_2
    name: Threshold 2
  - type: custom:numberbox-card
    entity: input_number.test_number_3
    name: Threshold 3
card_mod:
  style:
    numberbox-card:
      $: |
        ha-card .body .cur-num-box {
          display: grid;
          width: 50px;
          text-align: center;
        }

---

Custom secondary_info:
Update 03.01.22: since ver. 3.2 it is possible to specify a plain text for secondary_info, so this trick is not required any more - at least for making a custom secondary_info. Note that conditional content in "secondary-info" is still possible only by using card-mod & “:before” method.

code

type: entities
entities:
  - type: custom:numberbox-card
    entity: input_number.wait_period_before_alarm_1_xiaomi_roborock_s50_mop_check
    name: Threshold 1
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
        }
        .grid-content.grid-left .info .secondary::before {
          color: orange;
          content: "Warning";
        }
  - type: custom:numberbox-card
    entity: input_number.wait_period_before_alarm_2_xiaomi_roborock_s50_mop_check
    name: Threshold 2
    secondary_info: last-changed
    card_mod:
      style: |
        .grid-content.grid-left .info .secondary ha-relative-time {
          color: transparent;
        }
        .grid-content.grid-left .info .secondary::before {
          color: red;
          content: "Critical\A Danger";
          white-space: pre;
        }

---

How to disable buttons:

code

type: entities
title: Locked control
entities:
  - entity: input_boolean.test_boolean
    name: Lock input_number
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    tap_action: none
    card_mod:
      style: |
        .body .padl {
          {% if is_state('input_boolean.test_boolean','on') %}
            color: var(--disabled-text-color);
          {% endif %}
        }
        .body .padr {
          {% if is_state('input_boolean.test_boolean','on') %}
            color: var(--disabled-text-color);
          {% endif %}
        }
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            pointer-events: none;
          {% endif %}
        }

---

How to disable whole row (a case with a toggle button):

code

  - type: custom:numberbox-card
    entity: input_number.test_parrots
    toggle_entity: input_boolean.test_boolean_2
    card_mod:
      style:
        ha-entity-toggle $:
          ha-switch $: |
            .mdc-switch .mdc-switch__thumb input {
              {% if is_state('input_boolean.test_boolean','on') %}
                pointer-events: none;
              {% endif %}
            }
          .: |
            ha-switch {
              {% if is_state('input_boolean.test_boolean','on') %}
                --switch-unchecked-button-color: var(--disabled-text-color);
                --switch-checked-button-color: var(--disabled-text-color);
              {% endif %}
            }
        .: |
          .padl {
            {% if is_state('input_boolean.test_boolean','on') %}
              color: var(--disabled-text-color);
            {% endif %}
          }
          .padr {
            {% if is_state('input_boolean.test_boolean','on') %}
              color: var(--disabled-text-color);
            {% endif %}
          }
          :host {
            {% if is_state('input_boolean.test_boolean','on') %}
              pointer-events: none;
              color: var(--disabled-text-color);
              --paper-item-icon-color: var(--disabled-text-color);
            {% endif %}
          }
          .grid-content {
            {% if is_state('input_boolean.test_boolean','on') %}
              color: var(--disabled-text-color);
            {% endif %}
          }

---

Colored background:
By default the background is not transparent.
There are a few ways to make it transparent as well as to change a color:

code

type: entities
title: background
card_mod:
  style: |
    ha-card {
      background: orange;
    }
entities:
  - type: section
    label: default
  - entity: sun.sun
  - type: custom:numberbox-card
    entity: input_number.test_parrots
  - type: section
    label: colored background
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        ha-card {
          background: pink;
        }
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        .grid {
          background: pink;
        }
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        :host {
          --ha-card-background: pink;
        }
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        ha-card {
          --ha-card-background: pink;
        }
  - type: section
    label: transparent background
  - type: custom:numberbox-card
    entity: input_number.test_parrots
    card_mod:
      style: |
        ha-card {
          background: transparent;
        }

---

Changing a size of “plus” & “minus” icons:
May be achieved by specifying an "--mdc-icon-size" variable.
To decrease the size for both icons:

code

      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body {
              --mdc-icon-size: 10px;
            }

To decrease the size for one icon only:

code

      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padr {
              --mdc-icon-size: 8px;
            }

To increase the size a user must be aware of top & bottom padding - otherwise the row may be higher than other rows; the row’s height should not be higher than 40px - i.e the icons’ height should not be higher than 40px.
Check this example:

code

type: horizontal-stack
cards:
  - type: entities
    entities:
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padr {
              --mdc-icon-size: 8px;
            }
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padl {
              --mdc-icon-size: 8px;
            }
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padl {
              --mdc-icon-size: 40px;
            }
      - type: section
  - type: entities
    entities:
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section

---

Here is how to fix the row’s height by setting zero "padding-top" & "padding-bottom":

code

type: horizontal-stack
cards:
  - type: entities
    entities:
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padr {
              --mdc-icon-size: 8px;
            }
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padl {
              --mdc-icon-size: 8px;
            }
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padl {
              --mdc-icon-size: 40px;
              padding-top: 0px;
              padding-bottom: 0px;
            }
      - type: section
  - type: entities
    entities:
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section
      - type: custom:numberbox-card
        entity: input_number.test_parrots
      - type: section

Another solution (simpler & more elegant) was provided by the author of this card here:
scale both icons:

      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body ha-icon {
              transform: scale(2);
            }

scale one icon:

      - type: custom:numberbox-card
        entity: input_number.test_parrots
        card_mod:
          style: |
            .body .padl {
              transform: scale(2);
            }

This method does not require changing paddings!

---

More examples are described here.

[DrewXT (Andrew)]

Thank you so much - I didn’t know how to bring the elements together, and I had my indents all wrong

I’ve got it to rotate when my switch is on (thank you for the other examples), but the color won’t change conditionally, yet it will change when I use it with an entitities card.

What causes this to change? Is it the way the glance card works?

e.g. this changes the icon color and rotates it:

entities:
  - entity: switch.night_light
    icon: mdi:fan
    style:
      hui-generic-entity-row:
        $: |
          state-badge {
              {% if is_state('switch.night_light', 'on') %}
              color: green;
              animation: rotation 1.5s linear infinite;
              {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(360deg);
            }
          }

yet this doesn’t turn the icon green… It’s completely lost me as to why that doesn’t work

type: glance
entities:
  - entity: switch.night_light
    icon: mdi:fan
    tap_action:
      action: toggle
    card_mod:
      style: |
        state-badge {
          {% if is_state('switch.night_light', 'on') %}
            color: green;
            animation: rotation 1.5s linear infinite;
          {% endif %}
          }
          @keyframes rotation {
            0% {
              transform: rotate(0deg);
            }
            100% {
              transform: rotate(359deg);
            }
          }
show_name: false

[Ildar_Gabdullin]

Read here again this part:

That means that you should:

• either to set state_color: false (note that “state_color” option is global for the whole card);
• or use another method (--paper-item-icon-active-color) to change the color.

[DrewXT (Andrew)]

@Ildar_Gabdullin

That means that you should:

• either to set state_color: false (note that “state_color” option is global for the whole card);

ahhhh… this was it - it also would explain why when I turned on the switch that the icon ever so briefly flashed green, then went to yellow.

Thank you so much for your patience and help on this - I’ve made a lot of notes as to where I was going wrong by my misinterpretation …

[Ildar_Gabdullin]

@DrewXT

Thank you so much for your patience and help on this

You’re welcome, learn it step by step))

[Ildar_Gabdullin]

Regarding styling numberbox-card - there is an issue on GitHub:

card-mod styling not working

If you try styling the card as a separate card (not inside Entities card) - there is a problem: the numberbox-card already has the ha-card element, but:

• card-mod styling does not work;
• there are errors in Code Inspector when you are using mod-card (the only way to style the card since ha-card does not work) - kind of “mod-card cannot be used with cards which have ha-card element”.

[sira87]

Hi i’m trying hard to vertically center the battery percentage to the phone image on its left with no success.

Here’s the YAML of the glance card I’m using (sorry if it’s a mess, I’m not a pro lol):

type: glance
show_name: false
show_state: true
style:
  div.entity:
    $: |
      state-badge {
        width: 75px;
        height: 75px;
        margin: 4px;
        background-color: rgba(47, 189, 79, 0.4)
      }
  .: |
    div.entity {
      margin-bottom: 0px;
    }
    div.entities {
      padding: 8px 8px 8px 8px;
    }
    div.entities.no-header {
      padding-top: 8px;
      padding-bottom: 0;
    }
    ha-card {
      box-shadow: none;
      backdrop-filter: blur(20px) saturate(150%);
    }
entities:
  - entity: person.carlo
    image: /local/carlo.png
    style: |
      div {
        display: table;
        white-space: pre;
        line-height: 0.5;
        padding: 8px 0 16px 0;
        align-items:center;
        vertical-align: middle;
      }
      div::after {
        content: "\a" url(/local/cellphone-charging_18px_padded.png) "{{ states('sensor.iphone_di_carlo_battery_level') }}%";
        font-size: 12px;
      }
  - entity: person.martina
    image: /local/marty.png
    style: |
      div {
        display: table;
        white-space: pre;
        line-height: 0.5;
        padding: 8px 0 16px 0;
        align-items:center;
        vertical-align: middle;
      }
      div::after {
        content: "\a" url(/local/cellphone-charging_18px_padded.png) "{{ states('sensor.iphone_di_martina_battery_level') }}%";
        font-size: 12px;
      }

Any help will be much appreciated!

Thank you.

[DrewXT (Andrew)]

@Ildar_Gabdullin

You’re welcome, learn it step by step))

very small steps in my case…

EDIT: had a typo… if anyone cares, this code produces this card, with rotating fan, for AC control and visual status

title: Sewing Room
mode: vertical
cards:
  - type: custom:simple-thermostat
    entity: climate.sewing_room_air_conditioner
    step_layout: row
    show_header: false
    name: study
    control: false
  - type: custom:stack-in-card
    mode: horizontal
    cards:
      - type: glance
        show_name: false
        state_color: false
        entities:
          - entity: switch.sewing_room_zone
            icon: mdi:fan
            tap_action:
              action: toggle
            card_mod:
              style: |
                state-badge {
                  {% if is_state('switch.sewing_room_zone', 'on') %}
                    color: green;
                    animation: rotation 1.5s linear infinite;
                  {% endif %}
                  }
                  @keyframes rotation {
                    0% {
                      transform: rotate(0deg);
                    }
                    100% {
                      transform: rotate(359deg);
                    }
                  }
      - type: custom:mini-graph-card
        entities:
          - entity: sensor.sewing_room
            name: Temperature
            smoothing: true
            show_fill: true
          - entity: sensor.sewing_target_temp
            name: Target
            smoothing: true
          - entity: switch.sewing_room_zone
            y_axis: secondary
            color: orange
            show_line: false
            show_points: false
            show_legend: false
            aggregate:func: max
            smoothing: false
        hours_to_show: 24
        points_per_hour: 4
        line_width: 2
        font_size: 90
        animate: true
        show:
          name: false
          icon: false
          state: false

[parautenbach (Pieter Rautenbach)]

Were you referring there to this change where one should explicity use a card_mod: section?

  - entity: binary_sensor.internet_connection
    card_mod:
      style:

I did some updates over the weekend and only tonight I noticed my badge icon colours not working anymore, similar to the user you replied to. I’ve searched quite a bit, but I’m struggling to find an answer. I’ve tried to retrace my steps.

This used to work:

  - entity: binary_sensor.internet_connection
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $:
                .value: |
                  ha-icon {
                    color: {{ "var(--state-icon-active-color)" if is_state(config.entity, 'on') }} !important;
                  }

The one change I made was the one referred to in the README, which is to include card-mod in the frontend section to get the performance improvements (I’ve installed via HACS):

frontend:
  themes: !include_dir_merge_named themes
  extra_module_url:
    - /local/custom.js
    - /hacsfiles/lovelace-card-mod/card-mod.js

I’ve removed the old module definition from resources:, I’ve cleared my cache and checked that I can reach card-mod.js via the browser, so that all seems to be working fine.

I don’t know what I’m missing and would appreciate any help.

[Ildar_Gabdullin]

@parautenbach

This used to work:

HA is changing, I am trying to keep my posts updated - see this post, it was updated a month ago.
If you open Code Inspector you will see that there is no ha-icon element an the value anymore.

Here are your solutions:
1st - your example, does not work
2nd, 3rd - from the post,
4th - one more, new solution.

type: custom:badge-card
badges:
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $:
                .value: |
                  ha-icon {
                    color: {{ "var(--state-icon-active-color)" if is_state(config.entity, 'on') }} !important;
                  }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style: |
        :host {
          --label-badge-text-color: magenta;
        }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $:
            ha-label-badge:
              $: |
                .badge-container .label-badge .value {
                  color: red;
                }
  - entity: binary_sensor.net_is_available_internet
    card_mod:
      style:
        ha-state-label-badge:
          $: |
            ha-state-icon {
              color: cyan;
            }

Please, for everyone:
These posts were made for a GOOD START, not to replace a self-learning and self-exploration )).

[kimus (alessandro)]

incredible work man… really impressive
thank you for the example…

about custom:numberbox-card…
I tried to change with card-mod the default red value when I press + o -.
If I try to color the unit, this value will be always colored… but I can’t change only the “set value”… i’m trying to have default color and a var-primary-color when press + o -.
can anyone try to do that?
thank you again

[kaylasiemon]

Hi everyone! I haven’t updated anything in my code but noticed today that my colors are not changing per state as they usually do. Does anyone know what I need to change to fix this? I’ve been working just fine for months

This is all within a picture-element for my floorplan dashboard:

  - type: picture-elements
    image: /local/ui/floorplan/Floors/NightNoOne.png
    style: |
        ha-card:first-child {
          background: rgba(42, 46, 48, 1)
        }
          ha-card {
          --my-icon-color: {% if states('sensor.garbage_waste')|int <= 1 %} #A36733 {% else %} darkgrey {% endif %}
          }
          ha-card {
          --my-recycle-color: {% if states('sensor.recycling')|int <= 1 %} #5C7AD3 {% else %} darkgrey {% endif %}
          }
          ha-card {
          --my-yard-color: {% if states('sensor.yard_waste')|int <= 1 %} #2A8059 {% else %} darkgrey {% endif %}
          } 

        - type: state-icon
          entity: sensor.recycling
          style:
            "--iron-icon-height": 1.7vw
            "--iron-icon-width": 1.7vw
            "--paper-item-icon-color": "var(--my-recycle-color)"
            align-items: center
            display: flex
            height: 3vw
            justify-content: center
            left: 56%
            margin-left: "-1.5vw"
            margin-top: "-1.5vw"
            top: 5%
            transform: scale(1.2)
            width: 3vw
          tap_action:
            action: none

[Ildar_Gabdullin]

@kimus

I tried to change with card-mod the default red value when I press + o -.

Se the updated post, section “Changed “on-edit” color”.

[Ildar_Gabdullin]

Disable a door control conditionally:

type: entities
title: Locked cover
entities:
  - entity: input_boolean.test_boolean
    name: Lock the door
  - entity: cover.garage_door
    tap_action:
      action: none
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
            color: var(--disabled-text-color);
            --paper-item-icon-color: var(--disabled-text-color);
            pointer-events: none;
          {% endif %}
        }

And similarly for other input controls, like for:

• input_select
• input_number (slider)
• input_number (box)
• input_text
• input_boolean, switch
• custom:numberbox-card

---

More examples are described here.

[kimus (alessandro)]

great man, so many thanks… of course it works…

now i’m triyng to spacing up and down the “+” and “-” in this setting:

  - type: entities
    entities:
      - type: custom:numberbox-card
        entity: input_number.test_parrots
        name: false
        icon: false
        card_mod:
          style: |
            .body .cur-box {
              display: grid;
              place-items: center;
            }

i don’t really understand how I can use padding and .body .cur-box