No problem. I will rollback to V7.01 so I don’t have that “apply” stuff anymore.
I thought the latest version got rid of the Apply, after I noticed it when upgrading to 7.1, but it seems mandatory.
I took a quick look, and realised it was less messy than expected. So please try it out in this beta and let me know how it works for you. v7.2.0
Installed 7.20. First it installed 7.20.beta4 (while I selected the 7.20), then Hacs notified there was a updat for the Sonos card to 7.20. I installed that. (Hacs confirmed 7.20 is installed now).
Then tried to select the second option in my list “JOE NL”. (See picture I send you yesterday). Then the Sonos card get me “JOE Easy” the first one on the list and again “Apply”. I can’t select any other options, because the card doesn’t seems to react on that selection. I can still pause the stream and turn up the volume tho.
And when I go to the favorites page, I can switch to another radio station.
Is there something I can test or do to solve this?
Can you create an issue on GitHub? And then we dig deeper into what you are experiencing
Ok I will do that.
Good afternoon everyone. No matter how much I try to set the new artworkAsBackground: true option, I can’t get it to work. Some other option must be eliminated so that it can be seen. Thanks in advance to everyone. All the best.
type: custom:sonos-card
artworkAsBackground: true
mediaBrowserItemsPerRow: 3
mediaBrowserTitle: PLAYLIST
sections:
- player
- grouping
- media browser
- groups
predefinedGroups:
- name: ZONA 1
entities:
- media_player.bano_rojo
- media_player.bano_negro
- media_player.habitacion_blanca
- media_player.habitacion_negra
- name: ZONA 2
entities:
- media_player.bano_rojo
- media_player.bano_negro
- media_player.habitacion_blanca
- media_player.habitacion_negra
- media_player.salon
mediaArtworkOverrides:
- mediaTitleEquals: TV
imageUrl: /local/fondo/sonos.gif
- ifMissing: true
imageUrl: /local/fondo/sonos.gif
widthPercentage: 90
entityId: media_player.habitaciones
dynamicVolumeSlider: true
heightPercentage: 105
labelWhenNoMediaIsSelected: BWHOUSE
hideGroupCurrentTrack: false
title: BWHOUSE HI-FI
showVolumeUpAndDownButtons: false
hideBrowseMediaButton: true
mediaBrowserShowTitleForThumbnailIcons: true
card_mod:
style:
sonos-media-browser$ sonos-media-browser-icons$: |
div {
font-family: "Montserrat";
border: none;
color: black !important;
}
sonos-player:
$:
sonos-player-header$: |
.info .song {
font-family: "Montserrat";
color: var(--primary-text-color);
font-weight: 500;
font-size: 16px;
}
sonos-grouping:
$: |
sonos-grouping-button {
--accent-color: none;
font-size: 8px;
font-family: "Montserrat";
}
ha-control-button {
font-family: "Montserrat";
height: 36px;
width: auto;
min-width: 36px;
border-width: 1px;
border-color: var(--theme-card-border-glass);
--control-button-background-color: var(--theme-card-background-glass)!important;
--mdc-ripple-color: none;
--control-button-background-opacity: 1;
--control-button-border-radius: 18px;
}
ha-control-button span {
font-family: "Montserrat";
color: var(--primary-text-color);
line-height: 14.4px;
font-weight: 700;
font-size: 14px;
}
ha-control-button ha-icon {
font-family: "Montserrat";
color: var(--primary-color);
}
mwc-list.list>mwc-list-item {
font-family: "Montserrat";
background: var(--theme-card-background-glass);
border: 1px solid var(--theme-card-border-glass);
height: 61.4468px;
border-radius: var(--theme-card-border-radius);
margin: 12px 2px 0px 2px;
}
mwc-list>mwc-list-item:nth-child(1) {
font-family: "Montserrat";
margin-top: 0;
}
mwc-list.list>mwc-list-item[activated] {
font-family: "Montserrat";
--mdc-ripple-color: none;
}
mwc-list.list>mwc-list-item>ha-icon {
font-family: "Montserrat";
margin-right: 10px;
display: flex;
color: rgb(var(--mush-rgb-disabled));
background-color: rgba(var(--mush-rgb-disabled), 0.2);
min-width: 40px;
min-height: 40px;
border-radius: 50%;
opacity: 1;
align-items: center;
justify-content: center;
}
mwc-list.list>mwc-list-item[activated]>ha-icon {
font-family: "Montserrat";
color: rgb(var(--mush-rgb-blue));
background: rgba(var(--mush-rgb-blue), 0.2);
}
mwc-list.list>mwc-list-item>span {
font-family: "Montserrat";
opacity: 1;
color: var(--primary-text-color);
}
div.content>sonos-grouping$mwc-list.list>mwc-list-item:
$: |
span.mdc-deprecated-list-item__text>slot {
font-family: "Montserrat";
display: flex;
align-items: center;
}
.: |
ha-card {
font-family: "Montserrat";
margin-top: 50px;
box-shadow: none;
background: transparent;
border: 0px;
flex-wrap: wrap;
align-content: center;
}
Which version do you have? are you using the beta?
v7.4.0
@punxaphil
1675
128
3
This version I used.
The feature is not released yet. Use this version: Dashboard: Sonos card - #830 by PunxsutawneyPhil
(I understand it is confusing… I’ll think of better beta naming in the future, sorry)
1 Like
Hello @PunxsutawneyPhil
First of all, thank you for your work.
I would like to contact you because I would like to make a variant in the zone grouping. I currently have a sonos port in my bathroom connected to a Crestron C2N-AMP.
I’d like to be able to play the same player in my bedroom by switching the C2N-AMP.
Currently I can control the Crestron with HA with input_boolean.room1 for the On/Off of Room1 and input_number.volume_room1 for volume management.
My question is, is it possible to integrate this into a group?
Thanks for your feedback.
Translated with DeepL.com (free version)
I don’t think I fully understand. Please create an issue on GitHub and we’ll discuss there
thank you for your feedback I just wrote you in the GitHub
New version released with support for artwork as background: Release v7.5.0 · punxaphil/custom-sonos-card · GitHub
1 Like
Thanks for developing this card! I love it. There is only one downside I’m experiencing, when I change the group volume to let’s say 20%, all speakers go to 20%. But my speaker in the kitchen has to be 20%, while the living room only has to be 16%. That’s also what the Sonos app does when you change the volume. It doesn’t change the volume to 20%, but lowers it based on the current status.
Is there a fix or setting for this? 
Sure, just configure the card to use relative volumes. More details in the readme on GitHub GitHub - punxaphil/custom-sonos-card: Home Assistant custom lovelace sonos card
1 Like
Thanks! Now the card is perfect! Great job!
I’m quit a noob… I didn’t add it via my configuration.yaml, but with HACS. Is there an easy way to change it? When I try to add it to my configuration.yaml, I get the notification in the pictures below.
No problem if you can’t help me, then I’ll find someone else who can help me.
Great!! Thank you!
Remove it from configuration.yaml.
You need to add it to a Lovelace ui dashboard. Googling will help you.