i made me a file with the name : person_marc.yaml
and its saved under /config/popups/person_marc.yaml
but when i try to make a include in the custom:button-card the editor says its not allowed…
unknown tag !<!include:> (24:44)
- type: custom:button-card
tap_action:
!include: popups/person_marc.yaml
or
- type: custom:button-card
tap_action:
!include: /config/popups/person_marc.yaml
what is there wrong?
tap_action: !include ...
not
tap_action:
!include: ...
same error, the editor cant handle this?
tap_action: !include popups/person_marc.yaml
you can only include in yaml, not the UI.
Okay that’s the problem, okay than I wait until i am ready with all.
Thx
Hi. Does anybody know what i did wrong here.
- type: vertical-stack
cards:
- type: custom:button-card
variables:
currentview: >
[[[
return window.location.pathname.split('/').slice(-1);
]]]
name: >
[[[
return variables.currentview;
]]]
color_type: card
color: >
[[[
if (variables.currentview == 'home') {
return '#FFFFFF60';
} else
return '#FFFFFF10';
]]]
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#FFFFFF"
tap_action:
action: navigate
navigation_path: /lovelace/home
- type: custom:button-card
name: Licht
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/lights
- type: custom:button-card
name: Klima
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/climate
- type: custom:button-card
name: Media
color_type: card
color: "#FFFFFF10"
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
- color: "#9EA0A2"
- margin-top: 10px
tap_action:
action: navigate
navigation_path: /lovelace/media
My plan is to highlight the current view in the navigation but the card color just doesn’t appear and i dont know why. As you can see at “name” the variable IS actually home.
hey @Nome200 , i would like to try this:
type: custom:button-card
variables:
currentview: |
[[[
return window.location.pathname.split('/').slice(-1);
]]]
name: |
[[[
return variables.currentview;
]]]
color_type: card
styles:
card:
- height: 3em
- border-radius: 15px
- align: center
#- color: '#FFFFFF'
- background-color: |
[[[
if (variables.currentview == 'neu4') {
return '#FFFFFF60';
} else
return '#FFFFFF10';
]]]
tap_action:
action: navigate
navigation_path: /lovelace/home
yeah okay it did work with the “- background-color” and not with the card coloring for whatever reason. Thanks for helping
Hey 
I would like to replace my entity in the if loop with “config.entity”. Unfortunately, it gives me an error… what am I doing wrong?
original:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if (states['binary_sensor.ty13600724840d8eae6714'].state == 'on') return 'mdi:garage-open';
return 'mdi:garage';
]]]
name: Garage
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
template:
- kt_card_1
and this is what i try:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if (states(config.entity) != 'on') return 'phu:panel-frontdoor-open';
return 'phu:panel-frontdoor-close';
]]]
name: Haustür
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
template:
- kt_card_1
That is the wrong code for this card - looks more like something from custom:template-entity-row.
From my reading of the documentation, you should be trying entity.state instead.
great! Thank you!
I hadn’t even thought about it… sometimes some things just go under ^^
then I noticed something else about my card… maybe you can help me with that too…
the code I’m using here is absolutely identical. also the entity is always the same.
If the state is on then all tiles will be shown correctly.
If I change the status to off, the icons only change in the first row. I don’t understand either.
I cleared cache!
If I copy the first row and add it again at the end, then the icons are also shown correctly here.
Here is a video where you can see it live again: Bildschirmaufnahme 2022-04-07 um 09.30.29
This is the code from the 1-1 Button (Haustür/Frontdoor) thats works:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if ((entity.state) == 'on') return 'phu:panel-frontdoor-open';
return 'phu:panel-frontdoor-close';
]]]
name: Haustür
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
and here is the code from the 2-1 Button (Küche/Kitchewindow) that doesnt work, when state is “off”:
type: custom:button-card
entity: binary_sensor.ty13600724840d8eae6714
icon: |
[[[
if ((entity.state) == 'on') return 'phu:double-window-open';
return 'phu:double-window-close';
]]]
name: Küche
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
show_state: true
maybe I have another way to change the icon?
I’m no JavaScript expert, but I think your if statements are missing an else, which might be why they only work when the sensor state is on.
Try:
icon: |
[[[
if (entity.state == 'on')
return 'phu:panel-frontdoor-open';
else
return 'phu:panel-frontdoor-close';
]]]
I don’t know why, but I think it’s because of the icon…?!
phu:panel-frontdoor-open == works
phu:double-window-open == DOESNT WORK
mdi:window-open == works
mdi:window-closed == works, too…
I’ll see if it works with a separate icon
Thanks again!
ok, with my own created icon works…
Can I make a round button if so how?
play with ha-card-border-radius: “15px” in the themes yaml or
styles:
card:
- border-radius: xxpx
but complete round is not possible without using css styling I guess.
border-radius: 50%
Using percentage makes a full rounded circle 
I have some circle img_cell elements in my button-card.
Thanks work perfectly.
Im building up a media player card which has a few elements in the grid however i cant seem to overlay them using “grid-columns-start: NAME” - this works in the inspector but not on the card for some reason?
Also best approach for having nested buttons, can the nested buttons use the entity id of the parent card to avoid duplication? From memory i dont think it can but just checking if something has changed or if what i am doing is wrong.
EDIT:
Ok, seems if i create my own custom_fields they are not added to the existing grid?? either way i got around my issue of layering using the existing name and label fields for other purposes. Next question is around animation, here is my media player card.
It basically i have an image of a vinyl, a handle and the picture entity from the media player. The vinyl record and icon both rotate 360deg when playing - this is fine. The handle should then rotate by 16deg to show its on top of the vinyl.
Issue i am having is the animation doesnt really play, it just sort of happens - maybe the delay is wrong. Also when the player is not playing the animation doesnt ease out back to normal, it just reverts. Am i asking too much from the card 
type: custom:button-card
aspect_ratio: 1/1
entity: media_player.forked_daapd_server
triggers_update: media_player.forked_daapd_server
entity_picture: '[[[ return (entity.attributes.entity_picture); ]]]'
show_entity_picture: true
show_name: true
icon: ' '
name: ' '
show_label: true
label:
- - - <img width=75% src="/local/images/record-player-handle.png"></img>
extra_styles: |
@keyframes record_rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes handle_rotation {
0% { transform: rotate(0deg); }
100% { transform: rotate(16deg); }
}
custom_fields:
bg: |
[[[
return " "
]]]
media_controls:
card:
type: custom:mini-media-player
entity: media_player.forked_daapd_server
scale: 1.5
hide:
name: true
icon: true
source: true
power: true
volume: true
mute: true
progress: true
group: true
card_mod:
style: >
ha-card > div.mmp-player > div.mmp-player__core.flex {
flex-direction: column !important;
}
ha-card > div.mmp-player > div.mmp-player__core.flex > div {
flex-direction: row !important;
margin-left: 8px !important;
margin-right: 8px !important;
}
ha-card > div.mmp-player > div.mmp-player__core.flex > mmp-powerstrip
{
margin-left: auto !important;
margin-right: auto !important;
justify-content: center;
}
ha-card > div.mmp-player > div.mmp-player__core.flex > div > div >
span.attr__media_title {
color: white;
text-shadow: 1px 1px 5px rgba(18, 22, 23, 0.9);
}
ha-card > div.mmp-player > div.mmp-player__core.flex > div > div >
span.attr__media_artist {
color: white;
text-shadow: 1px 1px 5px rgba(18, 22, 23, 0.9);
} button > mwc-ripple {
display: none !important;
}
styles:
grid:
- grid-template-areas: '"i n l" "media_controls media_controls media_controls"'
- grid-template-rows: 75% 25%
- grid-template-columns: 1fr 1fr 1fr
- margin: 0
- padding: 0
card:
- padding: 0
img_cell:
- grid-column: i / l
- padding: 0
- margin: 0
icon:
- z-index: 3
- clip-path: circle(50% at 50% 50%)
- transform: scale(0.8)
name:
- padding: 0
- margin: 0
- width: 65%
- height: 90%
- background: center center / cover no-repeat
- background-image: url("/local/images/vinyl-record2.png")
- z-index: 1
- grid-column: i / l
label:
- position: absolute
- top: 25px
- right: 25px
- z-index: 2
- grid-column: i / l
- transform-origin: 50px 35px
custom_fields:
bg:
- background: center center/cover no-repeat
- height: 100%
- width: 100%
- position: absolute
- z-index: 0
- margin: 0
- padding: 0
state:
- operator: template
value: |
[[[
var active_speaker_state = (entity.state);
if (active_speaker_state != "playing") return "True";
]]]
styles:
name:
- transition: all 2s ease-out
icon:
- transition: all 2s ease-out
label:
- animation-iteration-count: 1
- animation: handle_rotation 2s normal backwards
- operator: template
value: |
[[[
var active_speaker_state = (entity.state);
if (active_speaker_state == "playing") return "True";
]]]
styles:
name:
- animation-delay: 15s
- animation: record_rotation 4s infinite linear
icon:
- animation-delay: 15s
- animation: record_rotation 4s infinite linear
label:
- animation-delay: 15s
- animation-iteration-count: 1
- animation: handle_rotation 2s normal forwards
custom_fields:
bg:
- filter: blur(7px) brightness(0.6)
- background-image: |
[[[
return `url("${entity.attributes.entity_picture}")`
]]]
Can you show me code this card… thanks
Could you share the record player image/images?