in using the excellent mushroom-chips cards, Ive had success changing most elements of it through card mod, however one part I’ve struggled with and haven’t been able to come up with solution for, is how to reduce the white space between the state icon and the name of the entity.
I am able to make the change via chrome devtools ( see image below please, its via: margin-right: 0.0em; )
this is what im referring to:
here is the exact YAML im using (the regex / complexity is just to reduce the length of the light names):
- type: custom:auto-entities
show_empty: false
card_param: chips
card:
type: custom:mushroom-chips-card
alignment: left
tap-action:
action: more-info
card_mod:
style: |
:host {
--chip-padding: 0em 0.1em !important;
--chip-spacing: 0px 4px !important;
}
filter:
template: >
{% for entity in states.light if '_screen' not in
entity.entity_id and entity.state == 'on' %}
{%- set name = state_attr(entity.entity_id, "friendly_name") -%}
{%- if name not in ['Garage', 'None No Room', 'Driveway', 'workRm 2nd FL', ' Garage closet 800lm ', 'Motion color 800lm'] -%}
{%- set name = name | regex_replace(find='Exterior ', replace='') -%}
{%- set name = name | regex_replace(find=' Light', replace='') -%}
{%- set name = name | regex_replace(find=' Mains', replace='') -%}
{%- set name = name | regex_replace(find='Master Bedroom', replace='Bedroom') -%}
{%- set name = name | regex_replace(find=' Overhead', replace='') -%}
{%- set name = name | regex_replace(find=' Porchs', replace=' Porch') -%}
{%- set name = name | regex_replace(find='s 3x', replace='') -%}
{%- set name = name | regex_replace(find='Office', replace='Off.') -%}
{%- set name = name | regex_replace(find='Front Foyer ', replace='Foyer ') -%}
{%- set name = name | regex_replace(find='Alley Generator', replace='Alley Gen') -%}
{%- set name = name | regex_replace(find='Alley RainBird', replace='Alley Rain') -%}
{%- set name = name | regex_replace(find='ee h6076 lamp', replace='') -%}
{%- set name = name | regex_replace(find=' 1x', replace='') -%}
{%- set name = name | regex_replace(find='Family Room ', replace='') -%}
{%- set name = name | regex_replace(find='Front Porch', replace='Ft Porch') -%}
{{
{
'type': 'template',
'content_info': name,
'icon': 'mdi:lightbulb',
'icon_color': 'orange',
'content': name,
'entity': entity.entity_id
}
}},
{%- endif -%}
{%- endfor %}
sort:
method: friendly_name
reverse: false
and here are the various things ive tried (ive tried them one at a time, but to make it easier to read im putting them all in one) none of these seemed to effect the change im looking for:
card_mod:
style: |
::slotted(*:not(:last-child)) {
margin-right: 0.0em !important;
margin-left: -8px !important;
}
mushroom-icon {
margin-right: 0.0em !important;
}
.ha-state-icon {
margin-right: 0.0em !important;
}
ha-state-icon {
margin-right: -5px !important;
--chip-margin-right: 0.0em !important;
}
ha-card {
margin-right: -5px !important;
--chip-margin-right: 0.0em !important;
}
:host {
--chip-padding: 0em 0.1em !important;
--chip-spacing: 0px 4px !important;
margin-right: 0.0em !important;
--chip-margin-right: 0.0em;
margin-left: -8px !important;
}
any help would be greatly apprecaited. thank you!