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

[Mariusthvdb (Marius)]

@jmfargas

you suggest a better place to post it

Lovelace: Button card

Button card Lovelace Button card for your entities. -> github [all] Features works with any toggleable entity 3 actions on tap toggle, more_info and service state display (optional) custom color for on and off state (optional) custom state definition with customizable color (optional) custom size (optional) custom icon (optional) custom css style (optional) automatic color for light (optional) custom default color for lights (when color cannot be determined) (optional) 2 color types icon :…

[Nik_Fiend]

Could someone point me in the right direction? I’m trying to fix two issues with input_text entity rows on my dashboard.

Issue 1 - Spacing between label and value

I previously used this to add spacing between the input label and value, but it has stopped working:

card_mod:
  style:
    hui-input-text-entity-row $:
      ha-textfield $: |
        .mdc-text-field__input {
          padding-top: var(--input-text-padding-top) !important;
        }

Issue 2 - “(empty value)” placeholder text

Previously when an input_text helper was empty it just showed the label with nothing below it. Since 2026.4 it now shows “(empty value)” as placeholder text. I would like to either remove it or colour it white so it appears invisible.

Any help would be greatly appreciated!

[888home]

I can’t figure out icon colors. I want the plugged-in icon gray when unplugged and yellow when connected.

Here’s my current setup:

Main card:

type: entities
entities:
  - entity: sensor.dining_room_shade_battery_level
    name: Dining Room
  - entity: sensor.kitchen_shade_battery_level
    name: Kitchen
  - entity: sensor.lr1_battery_level
    name: Living Room 1
  - entity: sensor.lr2_battery_level
    name: Living Room 2
  - entity: sensor.lr3_battery_level
    name: Living Room 3
  - entity: sensor.lr4_battery_level
    name: Living Room 4
  - entity: sensor.office_1_battery_level
    name: Office 1
  - entity: sensor.office_2_battery_level
    name: Office 2
  - entity: sensor.office_3_battery_level
    name: Office 3
  - entity: sensor.office_4_battery_level
    name: Office 4
  - entity: sensor.office_5_battery_level
    name: Office 5
  - entity: sensor.office_6_battery_level
    name: Office 6
  - entity: sensor.laundry_shade_battery_level
    name: Laundry Room
state_color: true
layout_options:
  grid_columns: 3
  grid_rows: auto

Plug status card:

type: entities
entities:
  - type: custom:template-entity-row
    entity: binary_sensor.dining_room_shade_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.dining_room_shade_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.kitchen_shade_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.kitchen_shade_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.lr1_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.lr1_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.lr2_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.lr2_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.lr3_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.lr3_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.lr4_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.lr4_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_1_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_1_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_2_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_2_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_3_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_3_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_4_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_4_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_5_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_5_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
  - type: custom:template-entity-row
    entity: binary_sensor.office_6_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.office_6_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }  
  - type: custom:template-entity-row
    entity: binary_sensor.laundry_shade_ac_mains_re_connected
    name: ""
    state: ""
    card_mod:
      style: |-
        :host {
          {% if is_state("binary_sensor.laundry_shade_ac_mains_re_connected", "on") %}
          --state-icon-color: var(--state-active-color);
          {%- else -%}
          --state-icon-color: var(--state-inactive-color);
          {%- endif %}
        }
state_color: true
layout_options:
  grid_columns: 1
  grid_rows: auto
card_mod:
  style: |-
    ha-card {
      column-span: 1 !important;
      background: none;
      border: none;
      width: 60px !important;
      margin-left: -20px;
      }   

Here’s what I want but I can’t figure out how to change the icon colors:

type: entities
entities:
  - entity: sensor.dining_room_shade_battery_level
    type: custom:multiple-entity-row
    name: Dining Room
    format: precision1
    state_color: true
    unit: "%"
    entities:
      - entity: binary_sensor.dining_room_shade_ac_mains_re_connected
        name: " "
        icon: true
        card_mod:
          style: |-
            :host {
              {% if is_state("binary_sensor.dining_room_shade_ac_mains_re_connected", "on") %}
              --state-icon-color: var(--state-active-color);
              {%- else -%}
              --state-icon-color: var(--state-inactive-color);
              {%- endif %}
            }
  - entity: sensor.lr4_battery_level
    type: custom:multiple-entity-row
    name: Living Room 4
    format: precision1
    state_color: true
    unit: "%"
    entities:
      - entity: binary_sensor.lr4_ac_mains_re_connected
        name: " "
        icon: true
        card_mod:
          style: |-
            :host {
              {% if is_state("binary_sensor.lr3_ac_mains_re_connected", "on") %}
              --state-icon-color: var(--state-active-color);
              {%- else -%}
              --state-icon-color: var(--state-inactive-color);
              {%- endif %}
            }
  - entity: sensor.office_4_battery_level
    type: custom:multiple-entity-row
    name: Office 4
    format: precision1
    state_color: true
    unit: "%"
    entities:
      - entity: binary_sensor.office_4_ac_mains_re_connected
        name: " "
        icon: true
        card_mod:
          style: |-
            :host {
              {% if is_state("binary_sensor.office_4_ac_mains_re_connected", "on") %}
              --state-icon-color: var(--state-active-color);
              {%- else -%}
              --state-icon-color: var(--state-inactive-color);
              {%- endif %}
            }
  - entity: sensor.office_5_battery_level
    type: custom:multiple-entity-row
    name: Office 5
    format: precision1
    state_color: true
    unit: "%"
    entities:
      - entity: binary_sensor.office_5_ac_mains_re_connected
        name: " "
        icon: true
        card_mod:
          style: |-
            :host {
              {% if is_state("binary_sensor.office_5_ac_mains_re_connected", "on") %}
              --state-icon-color: var(--state-active-color);
              {%- else -%}
              --state-icon-color: var(--state-inactive-color);
              {%- endif %}
            }

[Mariusthvdb (Marius)]

Can you reduce all of that to 1 single entity in a card and not full configs?

And explain what you want? What are we supposed to be seeing there ? Icons are changing colors

if you want to colorize the icon, I believe you do need to use the updated template-entity-row version by Darryn

this one does allow the coloring of the icon again. (original had a few issues there, not sure of they are fixed already)

next you can just set a template to the ‘color’ option, no need to use card_mod at all.

(example I use in an auto-entities)

            - entity_id: 'sensor.*_sensor_illuminance'
              options: &template
                type: custom:template-entity-row
                color: >
                  {% set ill = states(config.entity)|float %}
                  {% if ill < 1 %} black
                  {% elif ill < 2 %} firebrick
                  {% elif ill < 10 %} orange
                  {% elif ill < 50 %} green
                  {% elif ill < 150 %} gold
                  {% elif ill < 350 %} teal
                  {% elif ill < 700 %} dodgerblue
                  {% elif ill < 2000 %} lighskyblue
                  {% elif ill < 10000 %} lightblue
                  {% else %} lightcyan
                  {% endif %}

[Mariusthvdb (Marius)]

@Nik_Fiend

Issue 2 - “(empty value)” placeholder text

Previously when an input_text helper was empty it just showed the label with nothing below it. Since 2026.4 it now shows “(empty value)” as placeholder text

seems this is not as planned, and might even be an issue.
why not open it as such in the Frontend repo, and see where that goes

I did post this in the release thread 2026.4: Infrared never left the chat - #221 by Mariusthvdb

how can this be considered to be anything but a bug, and please let it not be considered as user friendly feedback in the UI…

[boheme61]

Try this inside multi-entity-row
add
state_color: true ( On the entity ) under entities

then in line with
entities:
card-mod

style:
  hui-generic-entity-row:
    .: |
      div.entity:nth-child(1) state-badge {
        color: grey;
      }

And skip the whole cumbersome :host style (on the Entity)

[888home]

Thanks, but that didn’t apply any color.

The bit using :host is to toggle the active/inactive color of the ac_mains_re_connected icon. That’s what worked in the “Plug status card” in my original setup, but doesn’t have any effect in multipe-entity-row.

[boheme61]

@888home

The bit using :host is to toggle the active/inactive color of the ac_mains_re_connected icon. That’s what worked in the “Plug status card” in my original setup, but doesn’t have any effect in multipe-entity-row.

I have no idea what your talking about, the code i suggested works fine in my multiple-entity-row
with both switches(plugs) and binary-sensors etc inside

[dcapslock (Darryn Capes-Davis)]

@888home

The bit using :host is to toggle the active/inactive color of the ac_mains_re_connected icon. That’s what worked in the “Plug status card” in my original setup, but doesn’t have any effect in multipe-entity-row.

Difference is that card_mod (or uix) does not patch entities in multiple-entity-row as they are div items.

So you need to style multiple-entity-row items from the multiple-entity-row, applying style to the div.entity like @boheme61 shows, updating nth-child(1) to whatever multiple entity it is.

[Daniel_Reimer]

And he is back… Sorry to go on your nerves again… I have a little problem with the new iteration of the Your Name theme by Nihvel and my modifications to transparency:

Check the sidebar and how it’s background plus the top left background of the “Home Assistant” is way darker than the top bar. I was sure that our unset last time fixes this, but it does not…

yourname_card_mod/themes/yourname_cardmod.yaml at c70d3c501c485b596792ee25fa4a9e1557675e09 · dreimer1986/yourname_card_mod · GitHub line 172 I mean. It seems like there are again a few layers that cause this mess on top of each other… The background, or at least one of the layers, that causes the problems can be found under :host when you check the sidebar in dev tools and I thought this was unset by that lines, but nope it’s not. Any idea what is missing here again? The theme file above resembles the new Frosted Glass base from Nihvel where I got my former base theme from, too. It looks almost perfect with my animated backgrounds when I add my changes to the new base, but this darker sidebar… It’s just not right that way.

[VietNgoc (Ngoc John)]

To make it transparent, you need to modify ha-drawer too…

card-mod-drawer: |
  :host aside.mdc-drawer {
    background-color: transparent;
}

[Daniel_Reimer]

@VietNgoc

card-mod-drawer: |
  :host aside.mdc-drawer {
    background-color: transparent;
}

Sorry, but this does not change anything on my sidebar. Maybe I did something wrong though…

This “background-color” under “host:” is the one I have to competely disable to get the sidebar the way I need it to be:

[VietNgoc (Ngoc John)]

Because you still need to add a modification to the ha-drawer element.

I don’t know if there’s a patch for the drawer for card-mod as well? @dcapslock

[dcapslock (Darryn Capes-Davis)]

@VietNgoc

I don’t know if there’s a patch for the drawer for card-mod as well? @dcapslock

Not for card_mod. Only in UIX.

[VietNgoc (Ngoc John)]

@dcapslock

Not for card_mod. Only in UIX.

@Daniel_Reimer Well, too bad… it’s time to switch to UIX

[Daniel_Reimer]

@dcapslock

UIX

OK, so it’s not possible with Card-Mod to change that background-color value, right? If so… Then I really have to check UIX