With templates, with a conditional card and automations, it is
@Mattias_Persson I was able to add multiple additional custom icons to your custon_icon.js which works perfectly, but I was not able to make a more elaborate one with colors and such work.
How would you put a very long svg with multiple paths and fills inside your custom_icon.js string??
this is a simple 1 color svg icon, but let`s say i want to use a colored one.
'imac-alternative':
'M8 22l2-2h4l2 2H8zM24 4v13c0 1.1-.9 2-2 2H2c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h20c1.1 0 2 .9 2 2zm-2 0H2v11h20V4z',
https://materialdesignicons.com/
You can’t. There’s no color information, only a path. If you want multiple paths you have to compound them into one.
1 Like
In this picture for datorlampan you have a multicolour background for the action that opens the color picture. How did you manage to get that? I seem to be failing with light-popup card.
It took a while, but figured out how you did it. Used this from your themes.yaml
.action-holder>div:last-child>div:last-child>.color {
background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%),
conic-gradient(rgb(120, 39, 230), rgb(230, 34, 231), rgb(228, 5, 136), rgb(228, 25, 25),
rgb(229, 105, 30), rgb(232, 226, 46), rgb(125, 230, 41), rgb(52, 232, 40), rgb(51, 231, 92),
rgb(52, 232, 224), rgb(32, 125, 229), rgb(18, 39, 229), rgb(120, 39, 230));
border-width: 2px;
border-color: #e6e6e6;
--size: 4.4em !important;
}
1 Like
Yes, it’s a mess because we have multiple spotify accounts. I hope you can find what you need.
- prefix: Media
<<: *title
style:
top: 53.4%
left: 25.4%
<<: *title-style
- type: custom:swipe-card
template: base
parameters:
spaceBetween: 25
slideShadows : false
style:
top: 56.55%
left: 35.8%
width: 20.97%
height: 1px
--ha-card-border-radius: .88vw
cards:
- type: conditional
conditions:
- entity: media_player.spotify_mart
state_not: "idle"
card:
type: picture-elements
image: local/ui/background/overlay2.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.spotify_mart
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action: !include popup/media_spotify_mart.yaml
hold_action: !include popup/media_spotify_mart.yaml
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 0.8vw
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.spotify_mart
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
tap_action: !include popup/media_spotify_mart.yaml
hold_action: !include popup/media_spotify_mart.yaml
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0.8vw !important;
border-bottom-right-radius: 0.8vw !important;
height: 95px;
}
.entity__info {
max-width: 50% !important;
margin-left: 1px !important;
}
.entity__icon {
margin-right: 1px !important;
margin-left: -10px !important;
}
type: 'custom:mini-media-player'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_mart
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify_mart
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 100%
style:
right: 15%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: script.add_to_playlist
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 100%
style:
right: 1%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.spotify_mart
deviceID: this
haptic: medium
hold_action:
action: none
- type: conditional
conditions:
- entity: media_player.spotify_lussie33
state_not: "idle"
card:
type: picture-elements
image: local/ui/background/overlay2.svg
style: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
elements:
- aspect_ratio: 1/1
entity: media_player.spotify_lussie33
icon: 'mdi:speaker-multiple'
label: Google Cast
name: Badkamer
show_icon: false
show_label: false
show_last_changed: false
show_entity_picture: true
show_name: false
show_state: false
tap_action: !include popup/media_spotify_lucienne.yaml
hold_action: !include popup/media_spotify_lucienne.yaml
style:
height: 100%
width: 100%
top: 50%
left: 50%
state:
- styles:
entity_picture:
- filter: grayscale(100%) blur(4px)
- transition: all 0.5s ease
value: paused
styles:
card:
- padding: 0px
- background-color: var(--card-background-off) #the color when there is no artwork, change or remove to use own color
entity_picture:
- border-radius: 0.8vw
- height: 100%
- width: 100%
- position: absolute
- transition: all 0.5s ease
type: 'custom:button-card'
- type: 'custom:mod-card'
style:
'--mini-media-player-icon-color': var(--text-color) #change or remove to use own color
'--mini-media-player-base-color': var(--text-color) #change or remove to use own color
'--mini-media-player-accent-color': var(--music-accent-color) #change or remove to use own color
border-top-left-radius: 0px !important
border-top-right-radius: 0px !important
width: 100%
transform: 'translate(0%, -100%'
card:
artwork: none
entity: media_player.spotify_lussie33
group: false
hide:
controls: true
icon: false
name: false
power: true
runtime: false
source: true
volume: true
tap_action: !include popup/media_spotify_lucienne.yaml
hold_action: !include popup/media_spotify_lucienne.yaml
icon: 'mdi:speaker-multiple'
info: scroll
source: true
# change the styling variable below to the color and width of scrolling info you want. Change height or remove line for default.
style: |
.mmp-player {
background: rgba(0, 0, 0, 0.75) !important;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px !important;
border-bottom-left-radius: 0.8vw !important;
border-bottom-right-radius: 0.8vw !important;
height: 95px;
}
.entity__info {
max-width: 50% !important;
margin-left: 1px !important;
}
.entity__icon {
margin-right: 1px !important;
margin-left: -10px !important;
}
type: 'custom:mini-media-player'
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-next-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: '-5%'
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_next_track
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:skip-previous-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: 55%
top: 50%
height: 25%
width: 25%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_previous_track
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:pause-circle'
type: 'custom:button-card'
size: 100%
entity: media_player.spotify_lussie33
style:
right: 10%
top: 50%
height: 40%
width: 40%
state:
- styles:
icon:
- filter: opacity(100%)
- transition: all 0.5s ease
- color: '#FFFFFF' #color of button while paused
value: paused
icon: 'mdi:play-circle'
styles:
card:
- padding: 0px
- border-radius: 50%
icon:
- filter: opacity(70%)
- transition: all 0.5s ease
- color: var(--music-accent-color) #color of button while playing
tap_action:
action: call-service
service: media_player.media_play_pause
service_data:
entity_id: media_player.spotify_lussie33
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:heart-plus'
type: 'custom:button-card'
size: 100%
style:
right: 15%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: script.add_to_playlist_lu
haptic: medium
hold_action:
action: none
- aspect_ratio: 1/1
show_name: false
show_icon: true
icon: 'mdi:dots-horizontal-circle'
type: 'custom:button-card'
size: 100%
style:
right: 1%
top: 79.3%
height: 27.5px
width: 27.5px
styles:
card:
- padding: 0px
icon:
- color: var(--paper-item-icon-color,#44739e )
tap_action:
action: call-service
service: browser_mod.more_info
service_data:
entity_id: media_player.spotify_lussie33
deviceID: this
haptic: medium
hold_action:
action: none
- type: picture-elements
image: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' /%3E"
elements:
# KITCHEN SPEAKER
- type: custom:button-card
entity: media_player.kitchen
custom_fields:
icon: &icon_cast >
<svg viewBox="0 0 25 25"><path d="M1,18 L1,21 L4,21 C4,19.34 2.66,18 1,18 L1,18 Z M1,14 L1,16 C3.76,16 6,18.24 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z M1,10 L1,12 C5.97,12 10,16.03 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z" /></SVG>
style:
top: 23.9%
left: 23.8%
width: 47.7%
template: media
# BEDROOM SPEAKER
- type: custom:button-card
entity: media_player.bedroom_speaker
name: Bedroom
custom_fields:
icon: &icon_nest_mini >
<svg viewBox="0 0 50 50"><path d="M49.7 25c0 13.6-11.1 24.7-24.8 24.7C11.3 49.7.3 38.6.3 25S11.4.3 25 .3 49.7 11.4 49.7 25zm-33.9 0a2.22 2.22 0 0 0-2.2-2.2c-1.2 0-2.3 1-2.3 2.2a2.22 2.22 0 0 0 2.2 2.2c1.3.1 2.3-.9 2.3-2.2h0zm10.8 0c0 1.2.9 2.2 2.2 2.3 1.3 0 2.3-1 2.3-2.2 0-1.3-1-2.3-2.2-2.3-1.3 0-2.3.9-2.3 2.2zm-3.2 0a2.22 2.22 0 0 0-2.2-2.2c-1.2 0-2.3 1-2.3 2.2a2.22 2.22 0 0 0 2.2 2.2c1.3 0 2.3-.9 2.3-2.2h0zm13 2.2a2.22 2.22 0 0 0 2.2-2.2c0-1.2-1-2.3-2.2-2.3a2.22 2.22 0 0 0-2.2 2.2c0 1.3 1 2.3 2.2 2.3z" /></svg>
style:
top: 23.9%
left: 76.2%
width: 47.7%
template: media
# LIVING ROOM SPEAKER
- type: custom:button-card
entity: media_player.living_room
name: Living
custom_fields:
icon: *icon_cast
style:
top: 76.2%
left: 76.2%
width: 47.7%
template: media
# FM RADIO
- type: custom:button-card
entity: media_player.office
name: Office
custom_fields:
icon: *icon_cast
style:
top: 76.2%
left: 23.8%
width: 47.7%
template: media
Great thanks a lot for your help !
i have a family account so it should be the same 
Thanks again
Hey there,
That’s awesome! Could you share the code for the swiping?
Thanks & well done!
@Mattias_Persson Det här var den vackraste skapelsen jag skådat inom hemautomatisering!
Förvånad över att Apple inte har hört av sig till dig redan 
Jag började med HA igår och jag kan ärligt säga att jag inte har en aning om vad jag sysslar med.
Jag hade lätt betalat dig för att göra någon sån lösning åt mig!
Sorry! I’ll translate it just in case. Thanks for the heads up!
This was the most beautiful creation I’ve seen when it comes to HA. I’m actually surprised that Apple hadn’t reached out to you already 
I started with HA yesterday and I can honestly say that I don’t have a clue what I am doing.
I would have easily paid you to make a simular solution for me.
noted on this. will check this one, thank you!
Hey @Mattias_Persson (and other gurus in this thread),
Great work here! I try to replicate it with some alterations in my instance. However, I get the script error:
ButtonCardJSTemplateError: TypeError: undefined is not an object (evaluating 'entity.state') in 'const state = entity.state === 'on' ? 'animate' : null; [...]
… whenever (except for lights) I try to evaluate entity.state in the custom_fields: section in button-cards. Can you give me any direction on what might be the issue here?
Thanks! 
can anyone help me. I have a problem when I want to use the hold action. This is the message I get every time and I don’t know where it comes from now.
‘message: Could not call service browser_mod / popup Service not found.’
Do you have browser_mod addon installed?
Does someone found the problem why the popup with sliders don’t work on ipad.
When the popup for dimming lights is show there is no styling or slider there to change?
yes i have installed it, but i don’t no if he works i have all setup how it descripted in de github, is there a fast way to test it. so i can decide if it works en me niet hier druk om moet maken.
i’m new with home assistant i must learn the basic stuff a little bit.
i hope you can help me further.
Yes
Just try this:
It should open a popup with an entity card.