Just wanted to bump this once. Not trying to be annoying wonāt do it again.
Just canāt find the answer anywhere for something that should be so simple
The āexpander-cardā seems to be not widely used; have you tried to search a DEDICATED thread for this card? May be there are more chances to get answers thereā¦
I did and I didnāt get a response. I was hoping this was more of a card mod thing. I tried to hit F12 do the whole inspect thing, but Iām not very good at it. Was hoping that was all that needed to be to be done to target the icon Iām trying to change.
This is weird though. Different. Because assuming Iām doing it right which Iām probably not lol I can get it to change on the edit view before I hit save but as soon as I hit, save none of my changes show up so maybe itās just a garbage card and I need to try and find something new.
sometimes the simpler ā the better
Iām trying some advanced css to animate a custom svg icon, specifically a thermometer bar:
I am struggling to get to the shadow root/element for the bar:
the closest I get really, is that I can color the entire thermometer (red) in an overcomplicated way since the below code also just works when I reference ha-state-icon:
card_mod:
style:
ha-state-icon $ ha-icon $ ha-svg-icon $: |
svg {
color: red;
}
Can anyone help just getting the bar to assume a color, from there on I believe the animation is a breeze.
EDIT: I assume I will have to adjust the path values but there a so many that I was hoping thereās an easier way to do it
Yes this also happened on desktop browsers Chrome and Firefox.
Thanks for the tips, I adjusted the code.
Thanks for your detailed answer. Especially for the hint how to implement card_mod correctly.
I am going to test all suggestions in the next days and hopefully can find out what caused my problems.
Hi, I have following entity card, and I would like to change the color of āNowā entity. If the entityās state is more than 50%, then green color, if less than 50%, then red color. So, in this case, the number ā11%ā should be red.
Thank you
type: custom:mod-card
card:
type: horizontal-stack
title: Battery
cards:
- type: entities
entities:
- entity: sensor.tpj4cjm04k_statement_of_charge_2
name: Now
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
- entity: sensor.max_baterie_fve_dnes_2
name: Max today
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
show_header_toggle: false
card_mod:
style:
.: |
#states > * {
margin: 2px -10px !important;
margin-left: -25px !important;
font-size: 10.5px;
--mdc-icon-size: 18px;
}
This should work for youā¦
type: custom:mod-card
card:
type: horizontal-stack
title: Battery
cards:
- type: entities
entities:
- entity: sensor.tpj4cjm04k_statement_of_charge_2
name: Now
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.state {
color: {{'green' if states(config.entity) | int >= 50 else 'red' }}
}
why the mod-card, if you donāt mod the card inside it?
Great, it works, thank you 
Agreed, it was part of the original code and I let it be.
my question was not for you 
even the post of the ask, it already was doing nothing, and thats not a good thing with mod-card
I know it wasnāt for me. I was agreeing it was an issue.
Can I hijack tthis?
Iām using the minimalism theme and per card css works,
The theme already uses it, my (global) css wonāt come up
--
minimalist-desktop:
# Journal
state-icon-color: "rgb(var(--color-theme))"
border-radius: "20px"
...
# THEME-CSS
card-mod-theme: "minimalist-desktop"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# MY-CSS
card-mod-card: |
ha-card .heating #item1 .ellisis {display: none;}
ha-card .type-custom-simple-thermostat header .heating .header__title { color: red !important; }
For testing purposes alll titles should be red x)
I cant believe I overlooked this all of those yearsā¦ because of another thread, I just realized we can set an icon on core entities cardā¦
since entities isnt my main card for the most used views in my config, I suppose I didnt give it as much attention, and simply jotted my card-header class to them all.
However that icon detail is kind of nice. Ofc, when using that, one immediately wants to be able to make it dynamic
which is just as simple:
type: entities
title: Tijd
icon: [] # could probably also set a default here, but the template below has that already, so just the placeholder is required
card_mod:
class: class-header-margin # my overall entities header mod
style: |
.card-header {
{% set up = states('sun.sun') == 'above_horizon' %}
--card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
--card-mod-icon: mdi:weather-sunset{{'-down' if not up}};
}
entities:
or
--card-mod-icon: mdi:weather-sunset{{'-up' if up else 'down'}};
--card-mod-icon: mdi:weather{{'-sunny' if up else '-night'}};
nice touch (although thereās a bit too much space around the icon for my taste. Maybe set the padding/margin there, need to experiment a bit more)
given this is the default style:
a quick fix there could be:
.card-header .icon {
padding: 0;
}
or just a bit more:
.card-header .icon {
padding-left: 0px;
padding-right: 4px;
}
which to my eyes has a better balance.
so, let me try and add that to a card-mod classā¦
ha-card.class-header-icon .card-header .icon {
padding-left: 0px;
padding-right: 4px;
}
in card-mod-theme and now add that to the other class:
type: entities
title: Tijd
icon: []
card_mod:
class:
- class-header-margin
- class-header-icon
style: |
.card-header {
{% set up = states('sun.sun') == 'above_horizon' %}
--card-mod-icon-color: {{'gold' if up else 'var(--card-background-color)' }};
--card-mod-icon: mdi:weather-sunset{{'-up' if up else 'down'}};
}
works beautifully!
Never knew we could list classes like that either, so TIL, twice
Do I implement it right or could you show me where Iām failing?
# THEME_MODS
card-mod-theme: "minimalist-desktop"
card-mod-view-yaml: |
"*:first-child$": |
#columns .column > * {
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
}
# MY_CSS
card-mod-card: |
ha-card .heating #item1 .ellisis {display: none;}
ha-card .type-custom-simple-thermostat header .heating .header__title { color: red !important; }
Crossposted on github as I donāt know if this has to do with the vertical stack Iām using
So I am searching for hours now to find the correct css command to edit this slider.
Right now the slider looks like this:
And I want it to have thin lines like this:
But I canāt find out the right css names to edit the pixel width for the stroke. Can someone help me?
1 Like
It is the stroke-width you have to adjust in the different path elements/css classes
1 Like
Thought I would share here too - since the main part of the video is card-mod!
If your not already using fonts on your dashboard, its an easy way to really make an impact! Check out my tutorial - if you find it useful and would like to see more make sure to like, comment and subscribe to help the channel grow!
