thereās probably a reason Matthias move from that theme to his new version called ha-fusion, didnt he mention something in the repo?
Suppose this is a detailed question for his dedicated thread in the community, did you check there?.
If anything, itās not for this thread, maybe see whatās been done in the Themes topic for card-mod
Just posting in case anyone would like to replicate. If you want to have an inner shadow in the slider of the Tile card, but also have a background, the correct code to do this is:
card_mod:
style:
hui-card-features$:
hui-card-feature$:
hui-light-brightness-card-feature$:
ha-control-slider$: |
.slider {
box-shadow: inset 0.5px 0.5px 4px 0px #3b3b3b;
}
.: |
ha-card {
background-image:
{% if is_state('input_select.card_theme', "Blue Waves") %}
url("/local/card.png");
{% elif is_state('input_select.card_theme', "Dots 'n Gradients") %}
url("/local/card1.png");
{% elif is_state('input_select.card_theme', "Blood Shapes") %}
url("/local/card2.png");
{% elif is_state('input_select.card_theme', "Color Lines") %}
url("/local/card3.png");
{% elif is_state('input_select.card_theme', "Navy Gold") %}
url("/local/card4.png");
{%- endif %}
background-position: 0% 0%;
background-repeat: no-repeat !important;
background-size: cover;
}
In the above example, i have a dropdown helper and i have uploaded different background images which change based on the helper selection. It works with simple or gradient color as well though. Here is an example:
Notice that the inner shadow is applied on the slider background which was the intended visual.
Hope this helps
Have a query about using card-mod, specifically in a theme with the new āHeadingā card type added in 2024.10.
Iāve seen posts on how to style the cards individually, and using the examples in this thread that works great, but would prefer to apply the styles using the theme support (so it applies to all cards of that type and I donāt have to add to cards individually), but itās not obvious to me how to target the specific ātitleā or āsubtitleā cards separately (Iām no CSS/web developer).
In the DOM for my HA dashboard I see both title and subtitle cards present with:
<ha-card class="type-heading"> ... </ha-card>
and within that, the type of title set as either
<div class="content title"> ... </div>
or
<div class="content subtitle"> ... </div>
around the card icon and text.
I get that I could set CSS at the card level based on the ha-card class, but that would affect both title and subtitle cards, or I could set CSS on the div based on title/subtitle, but that would only apply to the card icon and text, and not the card itself.
Is there a way that I can select based on whether the content of the card is title/subtitle, but then apply CSS to the card as a whole?
Iām absolutely new to card-mod, tried copy-pasting stuff, but itās just not workingā¦
Situation:
- entity: input_text.empty
type: custom:multiple-entity-row
name: " "
icon: mdi:thermometer
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
- entity: sensor.aqara_kato_temp
name: "Kato"
format: precision1
unit: false
Iām displaying 2 temperature sensors with multiple entity-row (actually much more, but I simplified the example)
I have 2 entities containing the minimum temperature for each room
input_number.zv_thermostaat_lena
input_number.zv_thermostaat_kato
I want to color the sensors above red when:
sensor.aqara_lena_temp < input_number.zv_thermostaat_lena
sensor.aqara_kato_temp < input_number.zv_thermostaat_kato
But obviously 1 sensor can be above and the other can be below the required temperature, so I want the correct one to show red, for each sensor individually.
This is what I have now, but nothing happens:
(cut)
entities:
- entity: sensor.aqara_lena_temp
name: "Lena"
format: precision1
unit: false
style: |
:host {
color: {% if states('sensor.aqara_lena_temp') | float < states('input_number.zv_thermostaat_lena') | float %} red {% else %} white {% endif %};
}
(cut)
Just to clarify things: I want to color the temperature, not the icon in the beginning.
What am I doing wrong ?
I tried to understand the posibilities in the overview pages, but nope, Iām not getting it.
I just told you already about ā1st post ā link at the bottom ā styles for m-e-rā
About old-style badges.
We can NOT use card-mod to style badges (neither old-style badges, nor new ones).
(ok, we can do it by using card-mod-theme which is TOO cumbersome and not as flexible as it could be; but this thread is not about themes)
The only place where we can style them - a custom badge-card.
There is a post about this card.
After 2024.8 it became a bit different:
Assume we have a card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
To style a whole card - we used a mod-card :
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
card_mod:
...
To style a particular badge - we defined card-mod code below a particular entity (same what we could do for badges w/o badge-card):
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
card_mod:
...
(unrelated to card-mod) And we were able to customize a ānameā (also was supported for badges w/o badge-card):
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
- entity: sensor.xiaomi_cg_1_co2
name: xxxxxx
And same about changing an icon.
Now, after 2024.8:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card:
$: |
div#badges {
--label-badge-background-color: cyan;
}
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod: #does NOT work
style: |
ha-state-label-badge {
color: red;
}
We have to style from the cardās level (cumbersome):
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card $:
hui-state-badge-element:nth-child(2) $:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge .label span {
border-style: dashed;
border-color: green;
color: white;
background-color: magenta;
font-size: 12px;
}
.badge-container .label-badge .value {
font-size: 8px;
}
.badge-container .label-badge {
border-radius: 20% !important;
border-style: dotted;
border-width: 10px
}
.badge-container .title {
color: orange;
}
.: |
ha-label-badge {
--label-badge-background-color: yellow;
--label-badge-text-color: red;
--label-badge-red: cyan;
--ha-label-badge-title-width: 170px;
--ha-label-badge-title-font-size: 8px;
--ha-label-badge-size: 100px;
}
type: custom:mod-card
card:
type: custom:badge-card
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style:
badge-card $:
hui-state-badge-element:nth-child(2) $:
ha-state-label-badge $ ha-label-badge $ .badge-container: |
.title {
color: transparent;
line-height: 0px !important;
}
.title::before {
color: var(--primary-text-color);
content: "New name\A";
line-height: normal;
}
As for changing an icon - this might be possible by card-mod but too cumbersome.
Styling multiline-text-input-card
cardās repo
Default look:
type: entities
entities:
- type: custom:lovelace-multiline-text-input-card
entity: input_text.test_text_255
title: some long long long long long long long title
Header:
card_mod:
style: |
.card-header {
color: red;
background: yellow;
line-height: normal; /* needed for multiline title */
}
ha-card {
overflow: hidden; /* needed for colored header's background */
}
With resized font:
card_mod:
style: |
.card-header {
font-size: 40px;
}
Buttons:
max_length: 250
min_length: 10
...
card_mod:
style: |
.flex {
margin-top: 6px;
--mdc-icon-size: 48px;
}
.flex :nth-child(2 of .button) ha-icon {
--icon-primary-color: magenta;
}
.flex .button-disabled ha-icon {
--icon-primary-color: cyan;
}
Note: āmargin-top: 6pxā is needed due to this issue.
Labels:
max_length: 250
min_length: 10
...
card_mod:
style: |
.text-left {
color: cyan !important;
font-size: 20px !important;
}
.text-right {
color: orange !important;
font-size: 20px !important;
}
.text-right.text-red {
color: lightgreen !important;
}
Textarea:
card_mod:
style: |
.textarea {
border: 2px solid yellow !important;
background: red !important;
color: lightgreen !important;
min-height: 40px !important;
max-width: 100%;
min-width: 100%;
overflow-y: auto !important;
}
ha-card {
background: lightblue;
}
Notes:
Service message baloon:
autosave: true
...
card_mod:
style: |
.flex {
margin-top: 6px;
}
.flex #serviceMessage {
background: lightgreen;
border: 1px solid yellow;
color: red;
font-size: 20px;
}
I saw you answering in another post the same, āgo thereā.
How greatfull as I am that you try to help people, maybe just post the link itself.
Clearly this is not enough. Otherwise I would not make the same mistake.
When you are new to something, things might not be as clear as you think they are to them.
Maybe a personal solution for the person posing the question is an idea?
That way, I would get an idea on how this (card-mod) works, and grow from there.
The learning curve is high for Home Assistant, especially when you want to do more than just basic stuff. I really want to learn.
With a personal example, I might think: āoh, thatās how it worksā, now I still donāt understand, and just not using it. And I think the idea of the creator is to have as much people as possible enjoy what he created.
Thank you
come on Yves, what is so difficult about:
ā1st post ā link at the bottom ā styles for m-e-rā
Following that you might even find some other stuff you dont know about, which you would not have found by clicking a link.
Give it some effort
I usually spend home 6 days a month and some amount of this time have access to PC, rest of time answering from a mobile not sitting on a sofa, so finding an exact link may not be easy, describing āhow to find a linkā is easier, sorry for inconvenience, wanted to help.
Itās probably me, very sorry for this.
First post:
Links at the bottom
Not seeing itā¦
@Ildar_Gabdullin Again, I know you are trying to help, but hey, if I donāt see what you are trying to reffer toā¦
Yves, it is here:
Iāve try to modify the style of the section but it didnt work
type: grid
card_mod:
style:
.section { background: red !important; }
cards:
- type: heading
icon: mdi:sofa
heading: Zona Giorno
heading_style: title
badges:
- type: entity
entity: sensor.temperatura_zona_giorno
- type: heading
icon: mdi:fridge
heading: Cucina
heading_style: subtitle
- type: tile
entity: light.terra_cucina_faretti
name: Faretti
show_entity_picture: false
vertical: true
hide_state: false
state_content: state
tap_action:
action: toggle
icon: mdi:lightbulb-variant-outline
layout_options:
grid_columns: 2
grid_rows: 2
- type: tile
entity: light.lampadario_cucina
name: Lampadario
vertical: true
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
- type: tile
entity: light.shelly_terra_cucinaled
icon: mdi:lightbulb-variant-outline
tap_action:
action: toggle
icon_tap_action:
action: toggle
vertical: false
layout_options:
grid_columns: 4
grid_rows: 1
- type: heading
icon: mdi:television-classic
heading: Salone
heading_style: subtitle
- type: tile
entity: light.terra_salone_lampadetavolinopiano
icon: mdi:lamp-outline
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: tile
entity: light.terra_salone_lampadeangolodivano
name: Lampada Divano
icon: mdi:floor-lamp-torchiere-variant-outline
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_salone_colonne
name: Colonne
icon: mdi:pillar
vertical: true
tap_action:
action: toggle
layout_options:
grid_columns: 1
grid_rows: 2
- type: heading
icon: mdi:table-furniture
heading: Pranzo
heading_style: subtitle
- type: tile
entity: light.shelly_terra_vetrinetta
name: Vetrinetta
icon: mdi:glass-wine
vertical: true
tap_action:
action: toggle
- type: tile
entity: light.terra_pranzo_lampadario
name: Lampadario
icon: mdi:ceiling-light-multiple-outline
tap_action:
action: toggle
vertical: true
column_span: 1
this is the result that i want to reach
old-style badges FIX:
title: ...
path: ...
badges:
- entity: sensor.xiaomi_cg_1_co2
type: custom:hui-state-badge-element
card_mod:
style: |
:host {
color: orange;
--label-badge-text-color: red;
--label-badge-red: cyan;
--label-badge-background-color: yellow;
--ha-label-badge-label-color: green;
}
OR - open ācard-mod.jsā in editor and replace
hui-state-label-badge ā hui-state-badge-element
Ofc it may stop working some day )))
Unfortunately, there is no way to restore a āchange name/iconā functionality.
Can anyone help me to animate (spin) the icon of the Tile card (fan). Have tried many variant (including search/google 
) but canāt get it to work. Testing with display: none works, so I though I was on the right path, but canāt get it animated.
card_mod:
style: |
ha-state-icon {
animation: spin 2s linear infinite;
# display: none;
}
this is what I use for the tile fans
note you do need to declare the animation keyframes:
# tile_fan animate
style:
hui-card-features $:
hui-card-feature $:
hui-fan-speed-card-feature $:
ha-control-slider$: |
.container {
--control-slider-border-radius: var(--ha-card-border-radius);
}
.slider .slider-track-bar {
border-radius: var(--ha-card-border-radius) !important;
}
.slider .slider-track-bar::after {
border-radius: var(--ha-card-border-radius) !important;
}
.slider {
--control-slider-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
--control-slider-background:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{%- endif %}
{%- else %} var(--state-inactive-color)
{%- endif %};
}
.: |
ha-tile-icon {
--tile-color:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% if perc <= 15 %} lightblue
{%- elif perc <= 33 %} lightskyblue
{%- elif perc <= 67 %} dodgerblue
{%- else %} darkblue
{% endif %}
{% else %} var(--state-inactive-color)
{% endif %};
}
ha-state-icon {
animation:
{% if is_state(config.entity,'on') %}
{% set perc = state_attr(config.entity,'percentage')|int(0) %}
{% set base = 'rotation infinite linear' %}
{% if perc <= 15 %} 4s {{base}}
{%- elif perc <= 33 %} 3s {{base}}
{%- elif perc <= 67 %} 1.5s {{ base}}
{%- else %} 0.75s {{base}}
{% endif %}
{% else %} none
{% endif %};
}
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Got that to workā¦ Apparently spin doesnāt work, but rotation does ā¦
If you rename rotation to spin, spin will work 
@keyframes rotation {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
Guess I didnāt really/fully understood CSS, as this works for mushroom 
. Thought spin was a CSS definition
type: custom:mushroom-entity-card
entity: sensor.sensor
card_mod:
style: |
ha-state-icon {
animation: 2s spin infinite linear;
}