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)'
Thatâs 177 lines.
One Hundred And Seventy Seven
1 Like
iâm sorry @thomasloven , didnât noticed, please see 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
The style: option just styles the popup window itself (mainly the bar with the title and the closing button). If you want to style the card in the popup, you can use card-mod.
1 Like
already tried, but for some reason i canât get it to work, iâm using a lot with card mod.
i donât know what iâm doing wrong
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
style: |
ha-card {
color: AliceBlue;
}
.card-header {
color: AliceBlue;
}
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
Thanks for the help!
Thatâs not a problem with card_mod.
You should always try to get popup cards working as a normal card first.
In Lovelace, every card is an island. Almost entirely isolated from any attempts to modify it from the outside. As such, changing the CSS color property of your entities card, wonât affect the more-info-card inside it.
You have two options.
Either you add style: to each card in your card and style them separately, or you use the CSS variables:
style: |
ha-card {
--primary-text-color: AliceBlue;
}
2 Likes
trying to display a slider on a button card, which seems not possible, Ive tried to simulate the same form factor as follows:
- type: horizontal-stack
cards:
- type: custom:button-card
template: horizontal-filler
- type: entities
style: |
ha-card {
color: grey;
--paper-item-icon-color: green;
font-weight: bold;
font-family: Helvetica;
font-size: 13px;
}
# title: Don't show title
show_header_toggle: false
entities:
- input_number.ha_delayed_startup
- type: custom:button-card
template: horizontal-filler
which is almost as I want it:
@jimz011âs suggestion to take out the title works well.
Iâve made the icon green for now to have it stand out. What I would like to do is have the slider show on a dedicated line, and show the icon above the slider, and display the full name above that. In fact, like the buttons (true buttons) below it in the image.
Can I use card-mod for that to move the separate parts ?
thanks for having a look