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
Can you paste this to my code? I tried unsuccessfullyâŠ
Thanks a lot. Spent several hours trying to figure it out on his own. It turned out that it was enough to ask))
The latest release of card_mod adds the ability to use tap_action with rows in entities-cards.
type: entities
entities:
- entity: light.bed_light
tap_action:
action: toggle
since youâve mentioned specific styling impossibilities using a picture-entity card, please let me ask if I can blink a picture-entity card. Trying this:
- type: horizontal-stack
cards:
- type: picture-entity
style: |
@keyframes blink {
50% }
ha-card {
animation: blink 2s linear infinite;
border-radius: 0px;
}
entity: sensor.trash_today
name: Vandaag
show_state: false
state_image:
'gft': /local/mijnafvalwijzer/gft3.png
'papier': /local/mijnafvalwijzer/papier3.png
'restafval': /local/mijnafvalwijzer/restafval3.png
'plastic': /local/mijnafvalwijzer/plastic.png
'Geen': /local/mijnafvalwijzer/kliko_geen.png
but no blinkingâŠif possible I would even like to make that conditional
using an extra button for that now with:
- type: conditional
conditions:
- entity: persistent_notification.trash_notification
state: notifying
but would be awesome if I could do that with the picture-entity card.
Please have a look?
You also need to specify what your keyframes do.
https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp
1 Like
ok thanks, but I only want it to blink 
nothing else⊠not even a red background, simply blink the available image.
even copying the exact code from your docs doesnt blik the picture:
- type: picture-entity
style: |
@keyframes blink {
50% {
background: red;
}
}
ha-card {
animation: blink 2s linear infinite;
border-radius: 0px;
}
1 Like
Thatâs because the background canât be seen on a picture-entity card since thereâs a picture in the way, and also because background has no default value.
Youâll have to find some other property that works to change.
understand the background getting covered by the picture. Are you saying then this cant be done? I cant set the picture to be blinking? and have a default background set to a color?
using a button I can blink like this:
- type: conditional
conditions:
- entity: persistent_notification.trash_notification
state: notifying
card:
type: custom:button-card
style: |
ha-card {
border-radius: 0px;
}
aspect_ratio: 3/1
entity: sensor.afval_vandaag
show_entity_picture: true
label: >
[[[
return entity.state
]]]
styles:
label:
- font-weight: bold
- color: black
card:
- animation: blink 2s ease infinite
or, moving the blink to the style (card-mod) part, like:
type: custom:button-card
style: |
ha-card {
border-radius: 0px;
animation: blink 2s ease infinite;
}
would have hoped to use the same effect on the picture-entity somehow
No, Iâm saying
I wonât do your research for you.
wasnât asking you to⊠sorry if you got that impression.
otoh, it would be very nice if you could share the config of the blinking cat 
as to make my research somewhat more focussed on possibilities, rather than on the issues I run into momentarily.
about the condition: this works alright:
- type: picture-entity
style: |
ha-card {
animation: {% if is_state('persistent_notification.trash_notification', 'notifying') %} wiggle 1s linear infinite alternate;
{% else %} none
{% endif %}
}
@keyframes wiggle {
0% {
-webkit-transform: rotate(5deg);
transform: rotate(5deg);
}
100% {
-webkit-transform: rotate(-5deg);
transform: rotate(-5deg);
}
}
or
style: |
ha-card {
animation: blink 2s linear infinite;
border-radius: 0px;
}
@keyframes blink {
50% {border-radius: 50px;}
}
cant find a property though that blinks the pictureâŠ
1 Like
anyone else maybe that can help me find the correct property to make a blinking picture-entity card possible? Ive checked most of the available properties on https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp as Thomas suggested, but canât seem to find the correct one.
I used opacity. It takes a nubmer between 0 and 1.
yes! thank you very much!
style: |
ha-card {
border-radius: 0px;
animation: {% if is_state('persistent_notification.trash_notification', 'notifying') and
states('sensor.trash_tomorrow') != 'Geen' %} blink 2s linear infinite;
{% else %} none
{% endif %}
}
@keyframes blink {
50% {opacity: 0;}
}
blinking nicely
100% makes for an even better effect, like a siren loopâŠ
thanks again!
3 Likes
Hi, i need some help changing color to AliceBlue,
iâm using browser mode with fold entity row, i canât figured out how to change the text color to AliceBlue, please see picture below:
code:
plugpop:
card:
type: 'custom:button-card'
color: auto
size: 30%
icon: '[[icon]]'
entity: '[[entity]]'
show_last_changed: true
aspect_ratio: 1/1
show_state: true
name: '[[name]]'
show_label: true
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: Devices
style:
background: var(--background-image)
color: AliceBlue
border-radius: 15px
--ha-card-border-radius: 15px
--ha-card-background: '#646464'
card:
type: entities
entities:
- type: custom:fold-entity-row
head:
type: section
label: Climate
open: false
entities:
- type: custom:more-info-card
entity: climate.mzgn_slvn
title: Living Room
- type: custom:more-info-card
entity: climate.mzgn_khdr_shynh
title: Bedroom
# - type: divider
- type: custom:fold-entity-row
head:
type: section
label: Fan
open: false
entities:
- entity: fan.ceiling_fan
- entity: fan.xiaomi_smart_fan
- entity: switch.sonoff_10006ceeab
name: Corner Fan
icon: mdi:fan
# - type: divider
# - type: divider
- type: custom:fold-entity-row
head:
type: section
label: TV
open: false
entities:
- type: custom:more-info-card
entity: media_player.living_room_tv
title: TV Living Room
- type: custom:more-info-card
entity: media_player.bedroom_tv
title: TV Bedroom
- type: custom:fold-entity-row
head:
type: section
label: Computers
open: false
entities:
- entity: switch.desktop
icon: mdi:desktop-tower
- entity: switch.mini_pc
icon: mdi:desktop-tower
style: |
ha-card {
--paper-item-icon-color: AliceBlue;
color: AliceBlue;
}
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- box-shadow: '0px 0px 3px 2px var'
# - opacity: 0.3
label:
- color: 'AliceBlue'
name:
- color: 'AliceBlue'
state:
- color: 'AliceBlue'
icon:
- color: 'AliceBlue'
id: off-icon
deviceID:
- this
- dashboard
hold_action:
action: more-info
haptic: success
styles:
card:
- padding-left: 10px
# - background-color: 'rgba(255,255,240,0.9)'
# - background-color: '#fff5bc'
- background-color: 'rgb(100,100,100)'
- border-radius: 15px
name:
- justify-self: start
- font-weight: bold
- font-size: 13px
- color: AliceBlue
label:
- font-size: 11px
- font-family: Helvetica
- padding: 0px 10px
- justify-self: start
state:
- font-size: 11px
- font-family: Helvetica
- padding: 1px 10px
- justify-self: start
- text-transform: capitalize
- font-weight: bold
grid:
- grid-template-areas: '"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
icon:
- color: AliceBlue
state:
- value: 'on'
styles:
card:
- box-shadow: 0px 0px 3px 2px var
name:
- color: AliceBlue
state:
- color: AliceBlue
label:
- color: AliceBlue
id: on-icon
- value: 'off'
styles:
card:
- opacity: 0.3
label:
- color: AliceBlue
icon:
- color: AliceBlue
name:
- color: AliceBlue
state:
- color: AliceBlue
id: off-icon
- value: unavailable
styles:
card:
- opacity: 0.2
- color: grey
- '--paper-item-icon-color': grey
label:
- color: 'rgba(0, 0, 0, 0.0)'