šŸ”¹ Card-mod - Add css styles to any lovelace card

Hello @Ildar_Gabdullin, Iā€™d like to change all icons of all chips within one card if they are ON

Then take a variable for switches from the link I gave you and apply it only for a particular card.

Iā€™ve seen this but it just about the colour. I want to change the icons, eg when state is ON mdi:lightbulb and when state is OFF mdi:lightbulb-outline.

Ohhh, sorry, forgot this part.
If you need to change icons for all chips:

type: entities
entities:
  - 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 {
            --card-mod-icon: mdi:car;
          }

If for some particular chip/chips - see code I gave you above.

Hello @Ildar_Gabdullin, unfortunately you are still not getting my point: I know how to set the same icon for all chips, wrote that in my question.

What Iā€™d like to know is there a way to adapt exactly that code to something like

if ON than mdi:car ELSE mdi:dog

  1. Please do not tag people by @. Not appreciated.
  2. If you need a dynamic style - use templates:
          ha-assist-chip:nth-child(3) {
            {% if is_state('switch.aaa','on') -%}
              --card-mod-icon: mdi:xxx;
            {%- else -%}
              --card-mod-icon: mdi:yyy;
            {%- endif %}
          }
          ha-assist-chip:nth-child(4) {
            {% if is_state('switch.bbb','on') -%}
              --card-mod-icon: mdi:xxx;
            {%- else -%}
              --card-mod-icon: mdi:yyy;
            {%- endif %}
          }

This style must be added for EVERY chip (which you need to customize) and for every chip you must use a particular entity_id.
This can be a little shortened by using a macro like

          {% from "xxxxx.jinja" import set_icons %}
          ha-assist-chip:nth-child(3) {
            {{set_icons('switch.aaa')}}
          }
          ha-assist-chip:nth-child(4) {
            {{set_icons('switch.bbb')}}
          }

where the macro is

{% macro set_icons(input_SWITCH) -%}
  {%- if is_state(input_SWITCH,'on') -%}
    --card-mod-icon: mdi:xxx;
  {%- else -%}
    --card-mod-icon: mdi:yyy;
  {%- endif -%}
{%- endmacro %}
1 Like

Unfortunately my question has been completely lostā€¦ Can anyone help me?

Well, Iā€™ll have to do it one by one, then. I hoped there is a way around it. But the idea with the macro is cool, Iā€™ll test that. Thx

Thx for the help, here. THis is what Iā€™ve done now (peace of the code):

title: Lichter
type: entities
entities:
  - type: buttons
    entities:
      - entity: switch.single_switch_2_17
        name: Sarah links
      - entity: switch.single_switch_2_16
        name: Sarah rechts
    card_mod:
      style:
        hui-buttons-base $: |
          ha-assist-chip {
            --ha-assist-chip-filled-container-color: white;
            border: 0px solid steelblue;
            --state-switch-off-color: steelblue;
          }
          ha-assist-chip:nth-child(1) {
            --card-mod-icon: {{ iif(is_state('switch.single_switch_2_17', 'off'), 'mdi:lightbulb-outline', 'mdi:lightbulb-on-10') }};
          }
          ha-assist-chip:nth-child(2) {
            --card-mod-icon: {{ iif(is_state('switch.single_switch_2_16', 'off'), 'mdi:lightbulb-outline', 'mdi:lightbulb-on-10') }};
          }
show_header_toggle: false
state_color: true

I tried also to change the size of the icon. With the code inspector I found out that it is a ha-svg-icon within ha-assist-chip/state-badge/ha-state-icon/ha-icon but I have no clue how to apply this knowledge here :frowning: What must i put into ha-assist-chip section to change the icon size to 24px (or 24x24)?

edit, 21.05.2024: tried this as well, but it didnā€™t work:

    card_mod:
      style:
        hui-buttons-base $: |
          state-badge $: |
            ha-state-icon $: |
              ha-icon $: |
                ha-svg-icon {
                  --mdc-icon-size: 24px;
                }

can you help me with my code?

this was my latest try without success
without any condition, just to test if something changesā€¦

name: GƤstemodus
type: custom:secondaryinfo-entity-row
secondary_info: '[[ binary_sensor.bewegungsmelder_bad.state ]]'
card_mod:
  style:
    hui-generic-entity-row:
      $:
        state-badge:
          $:
            ha-state-icon:
              $: |
                info pointer {
                  color: red;
                } 

and

         ...ha-state-icon:
              $: |
                element.style {
                  color: red;
                }

If you donā€™t have special requirements for the custom secondary-info-entity-row, just remove it and use the standard one. For this and the coloring take this as starting point:

type: entities
entities:
  - entity: sun.sun
    secondary_info: true
    card_mod:
      style:
        hui-generic-entity-row:
          $: |
            .info .secondary::before {
              content: "{{ states('sun.sun') }}";
              color: red;
            }
            {% if states('sun.sun') == 'on' %}
              state-badge { color: red; }
            {% else %}
              state-badge { color: green; }
            {% endif %}               `

image

Hi!

I have a challenge (at my level!) which causes me trouble, in a regular ā€˜entitiesā€™ card:

- type: entities
    card_mod:
     somethingmagic
    entities:
      - type: 'custom:template-entity-row'
      ...
      - type: 'custom:template-entity-row'

I can manage whatever I want for each row and for the global card itself using card_mod, but there is a padding of 16px that I cannot change:

Itā€™s probably obvious when you know the trick, but when you knowā€¦
If someone can point me what to do, it would be much appreciated!

Umberto,
Im pretty new to everything home assistant so bear with me. What is that editor on the right hand side of the picture? Seems like an easier way to edit the ui.
Thank you
Seth

That is not an editor, itā€™s Chromeā€™s Dev Tool . F12 will launch the tool if itā€™s enabled.

Hello

i am working on a custum room-card which use horizontal-stack card and muhsroom.
I face an issue with alignement of elements.
I would like to left align the chips, close to the left border. I tried margin with absolute pixel but it does not work for all my devices (PC, smartphone).

My horizontal stack is divided in 2 or 3 mushroom template cards. The default width for each is 1/2 or 1/3. How to reduce width to only visible elements?
Thanks

type: custom:vertical-stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        primary: Etage
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: 66px;
              --card-primary-font-size: 15px;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volets_etage
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:bed
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_enfants_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_enfants_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_enfants_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_enfants_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_enfants_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_enfant
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:desk
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_bureau_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_bureau_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_bureau_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_bureau_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_bureau_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_bureau_nord
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
          - type: template
            entity: cover.volet_roulant_bureau_est
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:stairs
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        card_mod:
          style: |
            ha-card {
              width: max-content;
              padding-top: 12px;
              padding-bottom: 0px;
            }
        chips:
          - type: entity
            entity: sensor.sensor_temp_tremie_temperature
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_tremie_temperature')|int < 20 %} rgb(52,152,219); {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 24 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 22 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_temperature')|int >= 20 %} green; {% endif %}
                }
            tap_action:
              action: more-info
          - type: entity
            entity: sensor.sensor_temp_tremie_humidity
            card_mod:
              style: |
                ha-card {
                  --chip-font-size: 16px;
                  --text-color: 
                    {% if states('sensor.sensor_temp_tremie_humidity')|int < 40 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 70 %} red; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 55 %} orange; {% endif %}
                    {% if states('sensor.sensor_temp_tremie_humidity')|int >= 40 %} green; {% endif %}
                }
            tap_action:
              action: more-info
      - type: custom:mushroom-chips-card
        chips: null
        alignment: end
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }
  - type: horizontal-stack
    cards:
      - type: custom:mushroom-template-card
        icon: mdi:bathtub-outline
        icon_color: grey
        primary: null
        layout: horizontal
        card_mod:
          style: |
            ha-card {
              box-shadow: none;
              border-radius: revert-layer;
              border: none;
              width: fit-content;
            }
        tap_action:
          action: none
      - type: custom:mushroom-chips-card
        chips:
          - type: template
            entity: cover.volet_roulant_sdb
            card_mod:
              style: |
                ha-card {
                  --chip-icon-size: 25px;
                }
            tap_action:
              action: toggle
            icon: |-
              {% if is_state(entity, 'open') %} 
               mdi:window-shutter-open
              {% elif is_state(entity, 'closed') %} 
               mdi:window-shutter
              {% else %}
               mdi:window-shutter-alert
              {% endif %}
            icon_color: |-
              {% if is_state(entity, 'open') %} 
               green
              {% elif is_state(entity, 'closed') %} 
               grey
              {% else %}
               orange
              {% endif %}
        card_mod:
          style: |
            ha-card {
              padding-top: 10px;
              padding-bottom: 0px;
              padding-right: 8px;
            }

mushroom chips have a native alignment, have you tried that for the chips.

type: custom:mushroom-chips-card
chips:
  - type: entity
    entity: person.xxxx
alignment: start

ohhh i see. Can you actually edit the home assistant UI with it? I pulled it up. pretty neat. Appreciate you replying!

No, only to see, what HA is creating.

1 Like

Hello
yes i tried with alignement, no success.
I read that i could use:

card-mod:
  style: |
    :host {
    flex: xxxx !important ;
}

but i donā€™t understand the flex parameters?

I am not the best with css, but it is like this.

display: flex;
align-items: left;