Can you not get it to change color at all, or just not make the color state dependent?
i can change icon color. Just unable to change color based on state dependency
Since you are inside a | block, the # will not be treated as a comment by the yaml parser. Remove the line instead.
Are you sure your script changes state? I think it must contain a delay to ever be âonâ.
I all else fails, add a space between ) and ]].
Oh, and use the browser object-inspector to see that the injected code is actually what you expect.
removed the # and added spaces but no luck
Iâm using rounded corners on my cards, but on the custom banner-card i had to enable âoverflow: hiddenâ to stop a greyed overlap in the bottom corners.
This seems to have stopped working since upgrading to version 4, has the method for this altered?
Hi All, Anyone have any idea how to turn custom:mini-graph-card background to transparent ?
Tried all kind of possibility but still canât get it work. any help will be appreciate. thanks
Tried this code also not working. With this code the background color not even change. I just wanted to turn it into transparent. 
style: |
ha-card {
ha-card-background: rgba(150, 150, 150, 0.1)
}
- type: entities
style:
.: |
ha-card {
--ha-card-box-shadow: none;
background-color: transparent;
}
"#states > div > mini-graph-card":
$: |
ha-card {
background-color: transparent;
}
entities:
- type: custom:mini-graph-card
entities:
- sensor.power_total
hours_to_show: 48
points_per_hour: 1
more_info: false
hour24: true
align_state: center
height: 110
line_color: var(--google-red-500)
line_width: 6
font_size: 120
show:
graph: bar
name: false
icon: false
extrema: true
labels: false
1 Like
oh man thank you very much !!! But i have a problem still canât figure it out. custome card is inside a card, can i make it the same size instead have an outer space ? And how to remove the round edge i try this but doesnât work
type: entities
style:
.: |
ha-card {
--ha-card-box-shadow: none;
background-color: transparent;
border-radius: none;
}
'#states > div > mini-graph-card':
$: |
ha-card {
background-color: transparent;
}
entities:
- type: 'custom:mini-graph-card'
entities:
- sensor.u_s_air_quality_index
hours_to_show: 48
more_info: false
hour24: true
align_state: center
height: 110
color_thresholds:
- value: 10
color: green
- value: 60
color: yellow
- value: 100
color: orange
line_width: 8
font_size: 120
show:
graph: bar
name: false
icon: true
extrema: true
labels: false
1 Like
@d3vilsim, try it
- type: entities
style:
.: |
ha-card {
background-color: transparent;
margin: 0px -16px -32px -16px;
}
"#states > div > mini-graph-card":
$: |
ha-card {
border-radius: none;
--ha-card-box-shadow: none;
background-color: transparent;
margin: 0px 0px 0px 0px;
}
entities:
- type: custom:mini-graph-card
entities:
Tell me, does this card-mod only work in YAML lovelace mode?
Will the code work through a raw editor?
It will work in any mode. But using it will make you unable to use the gui editors. Any card containing style: will only be editable as yaml in the editor.
Hi,
Iâm trying to build something that looks like a âsecond row sliderâ by using a default entity row and a slider-entity-row below of it in full_row mode.
To get the look in the screenshot, I need to set a negative top-margin on the device name in the default entitiy row.
I also need to set a negative top-margin to the slider-entity-row to move it up and a left and right margin to move it away from the icon and the switch.
I already have both styles for card-mod running, but I canât get them running at the same time.
If I add only one of the styles, this one is working fine.
But if I add both, only one is working.
Is ist because both styles are starting at â#states divâ?
Any suggestions how to get this fixed?
- type: entities
style:
"#states div":
slider-entity-row:
$: |
.flex {
margin-top: -40px;
margin-left: 40px;
margin-right: 40px;
}
"#states div":
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
show_header_toggle: false
entities:
- entity: light.flurlicht
- type: 'custom:slider-entity-row'
entity: light.flurlicht
step: 1
full_row: true
toggle: false
hide_state: true
Thanks you,
Tobias
1 Like
You need to combine them
style:
"#states div":
slider-entity-row:
$: ...etc...
hui-toggle-entity-row:
$: ...etc...
Otherwise the second "#states div" overrides the first one.
You can also apply the styles directly to the entity rows with the latest version of card-mod:
type: entities
entities:
- entity: light.flurlicht
style:
$:
hui-generic-entity-row: ...etc...
- type: custom:slider-entity-row
style:
$: |
.flex { ..etc...
...etc...
Hello Thomas,
thank you for your quick reply (and your awesome mod 
).
I also tried that yesterday but itâs also not working for meâŠ
It should look like that right?
style:
"#states div":
slider-entity-row:
$: |
.flex {
margin-top: -45px;
margin-left: 40px;
margin-right: 40px;
}
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
I still only see the first of the two adjustments.
If I switch the positions of the two, the other one gets visible.
Any idea why?
Thank you also for the other solution.
I guess this would work, but I have a lot dimmer in this entities card, so the general approach would save me a lot copy and paste. 
Try .wrapper instead of .flex in the first one.
Ok, .wrapper didnât work for my margins, the slider didnât move.
But I guess your idea is somehow based on a problem, that we shouldnât use the same identifiers for different selectors?
So I tried to alter my selector in a way that doesnât change it functionally:
"#states div":
slider-entity-row:
$: |
.flex:first-of-type {
margin-top: -40px;
margin-left: 40px;
margin-right: 40px;
}
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
This works fine. 
Can you explain why this happens, as it might help to avoid it for my next css modifications?
Iâm afraid I canât, because this works for me:
- type: entities
title: Test
debug_cardmod: true
entities:
- entity: light.bed_light
- type: custom:slider-entity-row
entity: light.bed_light
full_row: true
toggle: false
hide_state: true
style:
"#states div":
slider-entity-row:
$: |
.wrapper {
margin-top: -40px;
margin-left: 40px;
margin-right: 40px;
}
hui-toggle-entity-row:
$:
hui-generic-entity-row:
$: |
.flex .info {
margin-top: -20px;
}
Very neat idea, btw!
Try the debug_cardmod: true option and exploring the object inspector, btw. It usually helps to understand what is and isnât happening.
1 Like
as it happens, this was just what I was looking for, hoping to have the brightness and/or rgb_color on the second row.
Since you obviously like this idea @thomasloven, would be it be a viable feature request for the slider-entity-row card to enable the second row and set it on specific attributes?
Would prevent many many user errors!
Looking for something like this:
showing last_changed, or color attributes on the second line. Having the color temp on the badges wouldnât hurt either, but that might be pushing it a bit
1 Like
Please, help me to customize icon color of my battery_s7edge sensor depending on itâs state.
cards:
- cards:
- elements:
- entity: person.oleksandr
style:
color: cyan
left: 20%
top: 93%
type: state-label
- entity: sensor.battery_s7edge
style:
'--paper-item-icon-color': green
left: 65%
top: 94%
This doesât workâŠ
style: |
:host {
âpaper-item-icon-color:
{% if states(config.entity)|int < 20 %}
red
{% else %}
green
{% endif %}
;
type: state-icon
- entity: sensor.battery_s7edge
style:
color: white
left: 80%
top: 94%
type: state-label
image: /local/pics/card_oleksandr.png
style:
.: |
ha-card {
border-radius: 27px
border: 1px solid rgba(100,100,100,0.3);
overflow: hidden;
width: 97%;
box-shadow: 3px 3px 5px rgba(0,0,0,1);
}
type: picture-elements
type: horizontal-stack
type: vertical-stack
Elements in a picture-elements card canât be styled directly by card-mod.
What you can do is define a variable in the card itself:
type: picture-elements
style: |
ha-card {
--my-icon-color: {% if states('sensor.battery_s7edge')|int < 20 %} red {% else %} green {% endif %}
}
elements:
And then use that variable in the element style:
- type: state-icon
entity: sensor.battery_s7edge
style:
'--paper-item-icon-color': 'var(--my-icon-color)'
left: 65%
top: 94%
Unfortunately, you canât use config.entity with this.
6 Likes