That did the trick! Thanks!
1 Like
Hi, hope this is the right place for this request. I have the icon name (mdi:xxxx) in a sensor. How can I use it to change the icon in picture-elements? Thru card.mod? How? Thanks
Gio
1st post → link at the bottom titled “fantastic” → picture-elements
Additional label on Gauge card
code
type: vertical-stack
cards:
- type: entities
entities:
- input_boolean.test_boolean
- input_number.test_level_1
- type: gauge
entity: input_number.test_level_1
name: Battery
card_mod:
style: |
.name:after {
{% if is_state('input_boolean.test_boolean','on') -%}
{%- set STATUS = 'Charging' -%}
{%- set COLOR = 'var(--accent-color)' -%}
{%- else -%}
{%- set STATUS = 'Discharging' -%}
{%- set COLOR = 'var(--red-color)' -%}
{%- endif -%}
content: "\A {{STATUS}}";
white-space: pre;
color: {{COLOR}};
}
Alternatively - use auto-entities (but it has own issues).
3 Likes
Hi, Does somebody know how i can manage this:
I want to use a tilecard which shows a dropdown entity, when the dropdownentity has a defined value then the icon in the tilecard is mdi:fan and when not, there is the icon mdi:account
is it possible to make the background of a custom:mushroom-template-badge trasparent with a small boarder?
type: custom:mushroom-template-badge
content: ""
icon: mdi:arrow-left-bold
color: ""
tap_action:
action: navigate
navigation_path: /dashboard-home/1
hold_action:
action: none
double_tap_action:
action: none
Based on this way:
- type: tile
entity: ...
card_mod:
style: |
ha-card {
{% if ... -%}
--card-mod-icon: mdi:fan;
{%- else -%}
--card-mod-icon: mdi:account;
{%- endif %}
}
Card Mod 3.4.4 and latest HA. Regular entities card.
I’m trying to change the color of the entity value but not the entity name. This used to work but I think something changed in 3.4.4. Not sure what to change. The original is the second entity. I’ve been experimenting with the first one.
- entity: sensor.yahoofinance_amzn
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set value=state_attr('sensor.yahoofinance_amzn',"trending") %}
{% if value=="up" -%}
#00DF00
{% elif value=="down" -%}
#D50000
{% else %}
var(color)
{% endif %}
}
:host {
color:
{% set value=state_attr('sensor.yahoofinance_amzn',"trending") %}
{% if value=="up" -%}
#00DF00
{% elif value=="down" -%}
#D50000
{% else %}
var(color)
{% endif %}
}
- entity: sensor.yahoofinance_asan
card_mod:
style: |
:host {
--paper-item-icon-color:
{% set value=state_attr('sensor.yahoofinance_asan',"trending") %}
{% if value=="up" -%}
#00DF00
{% elif value=="down" -%}
#D50000
{% else %}
var(color)
{% endif %}
}
:host .text-content {
color:
{% set value=state_attr('sensor.yahoofinance_asan',"trending") %}
{% if value=="up" -%}
#00DF00
{% elif value=="down" -%}
#D50000
{% else %}
var(color)
{% endif %}
}
Can you see that the 2nd “:host” definition overwrites the 1st one?
I doubt that it ever worked.
Go to 1st post → link at the bottom titled “fantastic” → Entities card
I would like to move Frigate from the sidebar to the topbar. I have added a panel card and added an iframe with the Frigate url. This works, however I would like to remove the extra Frigate bar.
When I inspect the elements, and delete div class=“header” it dissapears perfectly.
Can card-mod block or delete that particular element?
Hey, what card_mod code is the right one? currently i try to optimize my codes 
type: custom:stack-in-card
title: ""
mode: vertical
keep:
background: true
border_radius: true
card_mod:
style: |
ha-card {
border: none;
height: 70px !important;
}
type: custom:stack-in-card
title: ""
mode: vertical
keep:
background: true
border_radius: true
card_mod:
style: |
.type-custom-stack-in-card {
height: 70px !important;
border: none;
}
I’ve found the part is the CSS but don’t know how to change.
type: custom:mushroom-template-badge
card_mod:
style: |
.badge {
background-color: rgba(0,0,0,0);;
}
content: ""
icon: mdi:arrow-left-bold
color: ""
tap_action:
action: navigate
navigation_path: /dashboard-home/1
hold_action:
action: none
double_tap_action:
action: none
This should be good for adding styles for stack-in-card’s ha-card:
type: custom:stack-in-card
...
card_mod:
style: |
ha-card {
...
}
The “.type-custom-stack-in-card” may be used (never tested myself with THIS particular card - but it should be OK) in card-mod themes like
card-mod-card-yaml: |
.: |
ha-card.type-custom-stack-in-card {
...
}
to apply global styles for all stack-in-cards (card-mod themes are discussed here).
1 Like
I have been trying to change a value in the root class of the vertical-stack card. I am wondering if it is not possible to change:
type: custom:decluttering-card
card_mod:
style:
hui-vertical-stack-card $: |
div#root hui-card > * {
--ha-card-border-width: 0px;
}
.: |
hui-vertical-stack-card {
--stack-card-gap: 0px;
}
template: custom_area_card_template
variables:
- area-name: Master Bedroom
- area-icon: mdi:bed-double
- navigation_path: master-bedroom
- area-energy: sensor.energy_meter_master_bedroom
- area-fan1: fan.master_bedroom_fan
- area-fan1-icon: mdi:fan
Any advice would be great! Thank you in advance!
Warning, this might be an issue.
Got a very interesting case:
Happens with any variables.
Styles with explicit colors do work.
More interesting case:
It works in 2025.1 blank test setup (only card-mod installed):
Could be other reasons, may be I messed up somewhere.
Can you post the first example as code as well? Don’t want to type.
For me it looks that there are different types of - in the screenshot.
1 Like
type: entities
entities:
- entity: sun.sun
card_mod:
style: |
ha-card {
color: var(--red-color);
}
@arganto
Super! Keen eye!
Yes, the 1st code with a wrong “-” was taken from another user’s post in Community.
He claimed that my advices were not working.
I took his code, pasted it in my setup - and then oops.
Can root classes be modified?