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
- Please do not tag people by @. Not appreciated.
- 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 
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 %} `
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;