right, you mean the actual css sticky? How To Create a Sticky Element
I didnt get that to work at all before, and then went for the solution I posted above. Are you sure this is working in 2024.7? I must have missed the correct syntax for that completely 
have my own challengeā¦
before I had this working pn most graphs, like history-graph, statistics etc:
style:
$: |
.card-header {
background: var(--background-color-off);
font-weight: 400 !important;
font-size: 20px !important;
color: var(--text-color-off) !important;
padding: 0px 12px !important;
margin: 0px 0px 16px 0px !important;
}
.: |
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
but in 2024.8 this stopped working for history-graph. Did anyone else spot that yet? I guess theyāre redoing most cards and we have to be prepared for a lot moreā¦
otoh, this resource was Not changed in 9 months, so what the mod wont stick now, is a mystery
anyways, if someone can spot the error, or wrong Dom path here Iād be most grateful because I cant see a difference between the 2 cards here:
however, if I append the regular class ive created for .header, all is back to normalā¦
ha-card.class-header-margin .card-header {
background: var(--background-color-off);
font-weight: 400;
font-size: 20px;
color: var(--text-color-off);
padding: 0px 12px;
margin: 0px 0px 16px 0px;
}
so I can do this now:
- type: history-graph
title: Temperatuur - Verwarming
card_mod: #!include /config/dashboard/card_mods/card-header$.yaml
class: class-header-margin
style: |
.card-header ha-icon-button {
--card-mod-icon-color: var(--primary-color);
{{'display: none' if is_state('input_boolean.hide_history_graph_link','on')}};
}
It worked fine on 2024.6 and lower, it also works on some cards with some weird settings (I just figured that out), unfortunately I have not been able to fix it for entities card yet. But if I do I will post the solution here.
As for this card I did found a solution to make it sticky again. Maybe @ASNNetworks you can find something more with this.
type: markdown
card_mod:
style: |
.column>:not([hidden]) {
position: sticky !important;
top: 0;
z-index: 1;
}
content: >-
The **Markdown** card allows you to write any text. You can style it **bold**,
*italicized*, ~strikethrough~ etc. You can do images, links, and more.
For more information see the [Markdown
Cheatsheet](https://commonmark.org/help).
title: Test
Edit: after a refresh the above stopped working again. So disregard this post.
I need to follow up on this, as this is a tricky one no one could ever solve so far (itās been two years nowā¦):
Instead of having this:
created with this:
- entity: weather.dwd_weather
name: Wetter
tap_action:
action: navigate
navigation_path: temperatur-overview
icon: mdi:home
card_mod:
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.badge-container .label-badge .value {
#color: #DF4C1E;
#--ha-label-badge-title-width: 60px;
}
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity,'temperature') }} Ā°C";
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.2em;
font-size: 0.5em;
}
.: |
:host {
{% set weather = states(config.entity) %}
{% set icon =
{
'clear-night':'mdi:weather-night',
'cloudy':'mdi:weather-cloudy',
'fog':'mdi:weather-fog',
'hail':'mdi:weather-hail',
'lightning':'mdi:weather-lightning',
'lightning-rainy':'mdi:weather-lightning-rainy',
'partlycloudy':'mdi:weather-partly-cloudy',
'pouring':'mdi:weather-pouring',
'rainy':'mdi:weather-rainy',
'snowy':'mdi:weather-snowy',
'snowy-rainy':'mdi:weather-snowy-rainy',
'sunny':'mdi:weather-sunny',
'windy':'mdi:weather-windy',
'windy-variant':'mdi:weather-windy-variant'
} %}
--card-mod-icon: {{ icon[weather] if weather in icon else 'mdi:home' }};
--label-badge-text-color: #df4c1e;
}
I want to have the sensorās attribute (temperature) as label text and add a custom UoM text to the UoM field.
With
- entity: weather.dwd_weather
name: Wetter
tap_action:
action: navigate
navigation_path: temperatur-overview
icon: mdi:home
card_mod:
style:
ha-state-label-badge $:
ha-label-badge $: |
.badge-container .label-badge {
border-radius: 20% !important;
}
.badge-container .label-badge .value::after {
content: "{{ state_attr(config.entity,'temperature') }}";
--background-color: var(--ha-label-badge-color, var(--primary-color));
--color: var(--ha-label-badge-label-color, white);
--border-radius: 1em;
--padding: 9% 16% 8%;
--font-weight: 500;
--overflow: hidden;
--position: absolute;
--bottom: -1em;
--left: -0.2em;
--right: -0.2em;
--line-height: 1.2em;
--font-size: 0.5em;
}
.: |
ha-label-badge ha-state-icon {
display: none;
}
I get
where the OuM is clearly missing.
How can I show a custom UoM when the visible label text does not have one (because it is an attribute)?
The interesting thing is:
Once I add
background-color: var(--ha-label-badge-color, var(--primary-color));
color: var(--ha-label-badge-label-color, white);
border-radius: 1em;
padding: 9% 16% 8%;
font-weight: 500;
overflow: hidden;
position: absolute;
bottom: -1em;
left: -0.2em;
right: -0.2em;
line-height: 1.2em;
font-size: 0.5em;
to the .badge-container .label-badge .value::after (commented out in above snippet)
I get this:
So now the label text is missing.
Why canāt I have both - label text from a sensorās attribute and a custom OuM text?
Somethingās missing here - and I feel like itās just a small thingā¦
Driving me nuts as I spent so much time already on this, without any success 
@ASNNetworks Been playing some more and even tried to use chatgpt to find a solution, but alas nothing really works. When I add the code in the browser console it works fine with the code I shared earlier today, but as soon as I put it in the card itself then it simply wonāt do anything at all. Like it gets ignored.
I also tried creating a separate class in the home assistant theme files, but that also doesnāt seem to work (the class works as all other properties I tried do work fine).
I tried a ton of different selectors (but my knowledge of the shadowdom is mediocre) and I have tried the fixed method as described earlier, but when I fix the items, all other cards will just be rendered under the fixed card (meaning I would need to move all other cards down (which in my opinion is a stupid solution as sticky worked the charm).
I hope someone can answer this question because I donāt see the answers anywhere.
I used to be able to remove borders from cards like this:
- type: custom:mushroom-template-card
style: |
ha-card {
--ha-card-border-width: 0px
}
That doesnāt work for me anymore, any ideas? Using for example the custom:mushroom-template-card.
If style: is part of the mushroom customization, youāre not at the right place.
If style: is expected to be the card-mod styling, you missed a change a looooooong time ago (Dec 27, 2023) that require this as syntax
card-mod:
style:
Itās the second one, I did miss card-mod for some parts indeed, sharp. Amended it for the missing parts, sadly did not fix the issue though.
- type: custom:mushroom-template-card
card-mod:
style: |
ha-card {
padding-bottom: 14px !important;
--ha-card-border-width: 0px;
}
Can someone help me with why it does not work in the style but does in DevTools, what do i do wrong?
The first step would always be to show in code how you have tried to do it with card mod. we can then show you where you went wrong, what you are missing etc.
You should be able to just do
card_mod:
style: |
ha-card {
border: none !important;
}
That should be card_mod (underscore not hyphen)
Feel stupid now, thanks, that was it!
Itās only because Iāve been there myself - that was a lot of wasted energy that particular day!
Sorry i had my code only in the screenshot few post above.
Here is the whole code:
- type: thermostat
entity: climate.panasonic_wandmodel_woonkamer
show_current_as_primary: false
features:
- type: climate-hvac-modes
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
- 'off'
- type: climate-fan-modes
style: dropdown
- type: climate-swing-modes
style: dropdown
card_mod:
style: |
hui-card-features {
#width: 100px !important;
}
hui-climate-fan-modes-card-feature {
width: 200px !important;
display: block !important;
}
ha-control-select-menu {
display: inline-block !important;
position: absulute !important;
width: 300px !important;
}
Only the line:
hui-card-features {
#width: 100px !important;
}
Is working (if i remove the #, but it effects al below it also.
hui-climate-fan-modes-card-feature and ha-control-select-menu
have no effect in card mod.
You didnt have your code posted. you had it in a screenshot. no one will pick up your question if you dont post it properly.
Here is an example of how to target the specific element. as you can see it is not as simple as just writing the element. this is because the element that you want to affect is within a shadow root.
type: thermostat
entity: climate.ecobee
show_current_as_primary: false
features:
- type: climate-hvac-modes
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
- 'off'
- type: climate-fan-modes
style: dropdown
- type: climate-swing-modes
style: dropdown
card_mod:
style:
hui-card-features$: |
hui-card-feature:nth-child(2) {
width: 200px !important;
}
you can also see that i have used nth-child(2) this is to target the 2nd hui-card-feature within the hui-card-features$:
you can see from the inspect element that there are multiple elements called the same thing, so you have to tell it which one.
Thank you for the explanation 
So what is inside the shadow root can not be simply used in card mod with css?
I did not know about nth-child, thanks for the info.
Last question, what does this mean hui-card-features$: | and when to use this?
I normally use only style: | instead of element$: |
No you can access the stuff in shadow root, that is exactly what the $: | is for.
if you have multiple shadow roots you need to get through you would then do:
card_mod:
style:
hui-card-features$:
hui-card-feature:nth-child(2)$:
hui-climate-fan-modes-card-feature$:
ha-attribute-icon$:
ha-icon$: |
ha-svg-icon {
color: red !important;
}
to piggyback off my own comment - if you then want to combine something like this with something that doesnt need a shadow root - so just style: | you would use .: | like this:
card_mod:
style:
hui-card-features$:
hui-card-feature:nth-child(2)$:
hui-climate-fan-modes-card-feature$:
ha-attribute-icon$:
ha-icon$: |
ha-svg-icon {
color: red !important;
}
.: |
ha-card {
background: blue !important;
}
you can also write it like this if it makes it easier.
card_mod:
style:
.: |
ha-card {
background: blue !important;
}
hui-card-features$:
hui-card-feature:nth-child(2)$:
hui-climate-fan-modes-card-feature$:
ha-attribute-icon$:
ha-icon$: |
ha-svg-icon {
color: red !important;
}
Hi,
first of all I want to thank you, your examples did help me a lot while customizing my dashboards.
I have an additional question, as it seems most people are interested in changing the color of
the icons, Im not able to find a solution for my desire.
In my subview, for all devices, I use custom-brand-icons (I mention this as Im not sure if its the same for mdi:icons).
type: media-control
entity: media_player.skyq_deu21151114067081
name: Heimkino
card_mod:
style:
.player: null
.top-info: |
.icon-name {
color: grey;
}
.title-controls .media-info {
color: grey;
}
.more-info {
color: grey;
}
.title-controls .controls {
color: grey;
}
.background.no-image > * {
background-color: rgba(0, 0, 0, 1);
}
ha-card {
--mdc-icon-size: 50px;
}
ha-card {
--ha-card-background: #;
border-radius: 15px;
box-shadow: rgba(140, 20, 252,1) 0px 1px 50px;
}
ha-card {
--card-mod-icon: phu:sky-alt;
}
layout_options:
grid_columns: 4
grid_rows: auto
code is for upper card
My question is, how to change the icon in the top-left corner w/o changing the size of all other elements ?
If I change this part of the code
ha-card {
--mdc-icon-size: 100px;
}
all icons get bigger
I have tried using:
ha-card {
--iron-icon-width: 100px;
--iron-icon-height: 100px;
}
ha-tile-icon {
--mdc-icon-size: 100px;
}
ha-card {
--ha-svg-icon-size: 100px;
}
ha-svg-icon {
--mdc-icon-size: 100px;
}
None of those seems to affect icon sizes, which is probably more my fault.
In code inspector I somehow tracked the icon, thats why I tried option 4.
I am totally lost now and would appreciate any help given.
Thanks in advance.
EDIT:
Its working in a markdown card, as there are no other icons to resize.
type: markdown
content: '## <center><ha-icon icon="phu:sky-alt"></ha-icon> Receiver'
card_mod:
style: |
ha-card {
--primary-text-color: grey;
}
ha-card {
--mdc-icon-size: 50px;
}