Ok. So I have it this way:
- entity: cover.estores_sala_cover
name: Sala
state: cover.estores_sala_cover
statePath: attributes.current_position
But the button shows if it’s open or close and not the percentage:
Hi @Flavio_Afonso,
You sure you updated the card? maybe reload sources or clear cache? it works for me with same configuration.
Cleared cache it worked!. Thanks!
Hey @DBuit hope all is going well as a new daddy!
Can’t get the hide function to work. I want the tile to be hidden if no music is playing, so added this:
[[[
if (states['media_player.spotify_mart'].state == 'idle';
]]]
But it doesnt do anything. Can you help me out?
2nd issue: The padding is messing with the content of the cards. Is it possible to have the padding (so not nopadding-true), but stretch content of the card in the full tile? If not plugin-changeable, maybe with some CSS tweaks for us? Hope you can help 
Hi @martheijnen
maybe it is not always idle, my sonos are also paused when not playing.
This is working for me:
hide: >
[[[
var state = states['media_player.keuken'].state ;
return (state == 'idle') || (state == 'paused');
]]]
Is it possible to put colored borders around the buttons?
I was waiting for this feature! Thank you!
Will be possible to set the space between rows?
maybe in the future
I think you can do it with the style option and add some css to get colored borders
Edit: can’t get it to work. What’s wrong with this:
- column: 2
tileOnRow: 4
entities:
- title: Muziek
entities:
- card: "custom:mini-media-player"
hide: >
[[[
var state = states['media_player.spotify_mart'].state ;
return (state == 'idle') || (state == 'paused');
]]]
wider: true
higher: true
popup:
settings: true
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
hold_action:
action: popup
entity: media_player.spotify_mart
cardStyle: |
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
.button {
padding: 0px !important;
margin: 3px 2px !important;
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
cardOptions:
artwork: full-cover
entity: media_player.spotify_mart
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
and what about the padding in the content of cards? thanks!
where to place the widersize setting? is it on the place of the wider: true or in a higher level? When i replace wider: true with widersize: 4, it’s getting smaller (the normal 1 size)
Hi,
strange your code works for me…
in developer tools in hass what does it say that the state is of media_player.spotify_mart?
@martheijnen the problem was that hide and conditionalClass options where never added for card tiles and custom tiles. I fixed this and just released update for the card.
If you update it should work!
Thanks, gonna check it right now
I think it’s the same with wider/higher configuration. As you can see, it does on a “somewhat normal” type of card, but not on the mini media player for example, where the settings for wider and higher are exactly the same… All black rounded squares should be 3 width and height, but only 1 has.
Can you share your config?
All card tiles work with the same code so if it works for one card it should work for all
Yes, of course.
sorry for the double post, deleted the other 1
This is the one for the weather:
- column: 2
tileOnRow: 2
entities:
- title: Outside
entities:
- card: weather-forecast
wider: true
higher: true
widerSize: 3
higherSize: 3
noPadding: true
cardOptions:
entity: weather.darksky
This is the one that works (so the spotify select thing)
- card: custom:layout-card
wider: true
higher: true
widerSize: 3
higherSize: 3
cardOptions:
cards:
- type: entities
show_header_toggle: false
align: right
title: Select playlist & speaker
entities:
- type: divider
style:
height: 1px
width: 100%
margin-left: auto
margin-right: auto
background: '#62717b'
- entity: input_select.spotify_playlist
icon: mdi:playlist-music
style: |
ha-card {
--ha-card-background: rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: none !important;
font-size: 13px;
font-weight: bold;
text-align: center;
color: var(--name-color-off);
font-family: Helvetica;
}
paper-listbox{
overflow: hidden !important;
width: 150px;
}
- entity: input_select.spotify_source
style: |
ha-card {
--ha-card-background: rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: none !important;
font-size: 13px;
font-weight: bold;
color: var(--name-color-off);
font-family: Helvetica;
}
paper-listbox{
overflow: hidden !important;
width: 150px;
font-size: 13px;
font-weight: bold;
color: var(--name-color-off);
font-family: Helvetica;
font-size: 13px;
font-weight: bold;
color: var(--name-color-off);
font-family: Helvetica;
}
- type: divider
style:
height: 1px
width: 100%
margin-left: auto
margin-right: auto
background: '#62717b'
- type: "custom:button-entity-row"
buttons:
- entity: script.spotify_music
name: Start playing on device
style:
width: 100%;
background: rgba(29,185,84,0.7);
border-radius: 15px;
text-color: black;
font-size: 13px;
font-weight: bold;
font-family: Helvetica;
icon: "mdi:spotify"
style: |
ha-card {
--ha-card-background: rgba(255, 255, 255, 0.1) !important;
border-radius: 12px !important;
box-shadow: none !important;
font-size: 13px;
font-weight: bold;
color: var(--name-color-off);
font-family: Helvetica;
}
This is the one from mini media player
- column: 2
tileOnRow: 4
entities:
- title: Muziek
entities:
- card: "custom:mini-media-player"
hide: >
[[[
var state = states['media_player.spotify_mart'].state ;
return (state == 'idle') || (state == 'paused');
]]]
wider: true
higher: true
widerSize: 3
higherSize: 3
noPadding: true
popup:
settings: true
type: custom:media_player-popup-card
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-next
hold_action:
action: popup
entity: media_player.spotify_mart
cardStyle: |
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
.button {
padding: 0px !important;
margin: 3px 2px !important;
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
cardOptions:
artwork: full-cover
entity: media_player.spotify_mart
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
Can you try removing the noPadding, i think this is not working yet in combination with the new widerSize stuff
@DBuit That works! but will mess up the card since it will make the media player not fully visible inside of the card (borders around it). there are corners on the inside now and not fully spread around the full tile… p.s. the hide works now for the card!
