Hy everyone,
i would like reduce the title column width, but not function 
Can anyone help me? Thanks
- entity: sensor.soggiorno_temperatura
type: custom:multiple-entity-row
name: Soggiorno
show_state: true
icon: mdi:sofa
state_color: true
card_mod:
style: |
hui-generic-entity-row:
$: |
div.info.pointer.text-content:(.info) {
flex: 1 1 20%;
}
This is the class to modify
Hi together,
I try to remove the icon background for a custom:trash-card. I tried e.g., the following YAML but without success.
type: custom:trash-card
entities:
- calendar.abfallkalender
event_grouping: true
drop_todayevents_from: "10:00:00"
next_days: 30
pattern:
- icon: mdi:flower
color: brown
type: organic
pattern: Bioabfall
label: Bioabfall
- icon: mdi:newspaper
color: green
type: paper
label: Altpapier
pattern: Altpapier
- icon: mdi:recycle-variant
color: yellow
type: recycle
label: Gelber Sack
pattern: Gelber Sack
- icon: mdi:trash-can-outline
color: light-grey
type: waste
label: Restabfall
pattern: Restabfall
- icon: mdi:dump-truck
color: purple
type: others
day_style: counter
alignment_style: left
color_mode: icon
items_per_row: 2
refresh_rate: 60
with_label: true
filter_events: false
only_all_day_events: false
use_summary: false
hide_time_range: false
full_size: false
card_mod:
style: |
:ha-card {
tile-color: transparent !important;
}
Parts of my dashboard, red marked with the icon background (that I try to remove), green where I removed everywhere the background color already for all other cards.
Many thanks upfront!!!
hi! is it possible to change icon color based on state using mushroom climate card?
Hi together,
I found the CSS element but I do not understand how to handle this in card-mod properly. Can anybody help me please?! I need to make tile-color transparent.
Many thanks!!
card_mod:
style: |
:host {
--tile-color: transparent;
}
Many thanks, I tried but it is not working.
I read in the docu something to be handled differently in shadowroot.
Any idea?
I found it…
card_mod:
style: |
.container {
--tile-color: transparent !important;
}
Hover on a card - you will see a reddish background.
If you need a permanently displayed pure red background - another code is needed.
Oh I don’t see it when I hover tbh, but yes would like to know how to change the actual card background pls, I know there was code that made the tile card background match a light’s color but I can’t find that anymore tbh. Thanks.
![Screen Recording 2025-01-12 at 6.00.29 PM.mov [video-to-gif output image]](https://community-assets.home-assistant.io/original/4X/6/8/a/68a34573d53854efca086c97bf5fa91ee60ff2a7.gif)
I see, this happens because you are applying it to “container”.
I missed this.
Is it your code or just copy/pasted from somewhere? No idea why “container” is used here.
Go to 1st post → link at the bottom titled “fantastic” → Tile (use for learning)
No not my code I was copy/pasting from the above post. Also thanks I found your post and figured it out.
hi guys!
i’m using flex-horseshoe-card in combination with card mod to fit my needs. (really love both of them, thank you for creating!!).
unfortunately my coding skills are quite useless, most of my “creations” are results of copy/paste 
in my card the circle of the horseshoe card gets gradientcolor depending on entity state, works well.
show:
horseshoe_style: colorstopgradient
color_stops:
"0": grey
"1": red
"500": orange
"1500": green
i wanna colorize the title aswell und using this code to now:
card_mod:
style:
.container:
.card--filter-none:
.datagroup: |
text:nth-of-type(2) .state__value {
{% if states('sensor.inverter_eingangsleistung') | float >= 1500 %}
fill: green !important;
{% elif states('sensor.inverter_eingangsleistung') | float >= 500 %}
fill: orange !important;
{% elif states('sensor.inverter_eingangsleistung') | float >= 1 %}
fill: red !important;
{% else %}
fill: var(--primary-text-color) !important;
{% endif %}
}
result:
its okay, but i would be much better, when the text had some color like the gradientcolor from the card circle.
how can i achieve to “syncronize” the colors from the circle to the text?
thanks a lot in advance!
Thank you, finally implemented this, almost a year after, and got my badges back . Meanwhile, did anyone find a solution for the “change name” part, using card_mod or any other solution??? Tryed to browse answers, but did not find. Thanks in advance!
1st post → link at the bottom → picture elements.
This is same badge which is STILL used in picture-elements - so it behaves same way.
Thank you, gonna check that out. I was trying to add as normal badges, maybe I need this different approach. 
Yes, and same you will do - not inside picture-elements.
Hi everyone, is there any way to combine these 2 pieces of code? I’ve tried many methods with no success
card_mod:
style:
ha-dialog$: |
@media (max-width: 450px), (max-height: 500px) {
div.mdc-dialog div.mdc-dialog__container {
align-items: start;
padding-top: 0px;
--mdc-dialog-min-height: auto !important;
--ha-dialog-border-radius: 0 0 90px 30px !important;
backdrop-filter: blur(0.2em) brightness(0.75) !important;
}
}
card_mod:
style: |
ha-card {
border: 0px !important;
}
1st post - link at the bottom - other stuff - combining
Hey Guys, i have a question how can i remove the margin from the marked posistion (see picture)? where i need to add it and what exactly?
my current code is this, but i dont find a solution to remove this states margin, maybe i add it wrong
type: custom:expander-card
title: Erweiterte Einstellungen
cards:
- type: entities
entities:
- entity: input_boolean.heizperiode
name: Heizperiode
icon: mdi:thermostat-box-auto
show_state: false
state_color: true
tap_action:
action: none
type: custom:multiple-entity-row
entities:
- entity: automation.advanced_heating_control_wohnzimmer
name: Automatik
toggle: true
styles:
width: 85px
- entity: input_boolean.heizperiode
name: Heizperiode
toggle: true
card_mod:
style:
hui-generic-entity-row .entities-row div.entity:
ha-entity-toggle:
$: |
ha-switch {
padding-top: 5px !important;
padding-bottom: 0px !important;
}
- type: custom:mushroom-select-card
entity: input_select.advanced_heating_control_scheduler
name: Scheduler
icon: mdi:calendar-month-outline
layout: horizontal
secondary_info: none
card_mod:
style: |
ha-card {
--ha-card-border-width: 0px;
--card-primary-font-weight: normal;
padding: 0px !important;
}
mushroom-shape-icon {
--shape-color: none !important;
--icon-color: #44739e !important;
}
ha-state-icon {
width: 36px;
}
state_color: true
show_header_toggle: false