Sorry I couldn’t figure it out either so I went with another card that’s easier to control 
BUT I’m pretty sure it’s handled like this:
- type: custom:custom:custom-sonos-card
style: |
ha-card {
margin: 0px 14px -5px 14px;
button-color: rgba(155,55,255,0.25);
}
Give that a try You’ll have to find the css
I now have 2 devices… so I put a bug report on Github… because the styling isn’t working.
No, that’s not how to do it. Please check readme or the first post in this thread. It’s documented in detail there.
For theming: Home Assistant Frontend - Home Assistant
Or for config, defines styles:
Out of curiosity, which other card did you go for instead? 
Hate giving up on this but the styling isn’t working for me no matter what I do.
does this support alexa devices at all or just sonos?
It’s just for Sonos
frontend:
themes:
rounded:
sonos-border-radius: 20px
sonos-background-color: white
sonos-ha-card-background-color: '#eeeeee'
sonos-color: black
sonos-artist-album-text-color: gray
sonos-song-text-color: black
sonos-accent-color: green
sonos-title-color: black
sonos-border-width: 0rem
sonos-button-section-background-color: '#ffffff00'
rounded
Thank you @PunxsutawneyPhil for help on the css… This card just handles the grouping sooo much better… nothing to fight with. I apprecate it… I just have to figure out one last issue… my favorites do this… and don’t know why.
I have ZERO doubt it’s something that I did wrong, the card is doing exactly what I’m asking it to do… I just can’t seem to find it. Probably looking at it over 4 days it’s hard to see anything anymore LOL
It’s clearly has something to do with my screen width…
The config:
- type: custom:custom-sonos-card
shuffleFavorites: false
allVolumesText: 'All volumes'
entityNameRegexToReplace: 'SONOS '
entityNameReplacement: ''
layout:
mobileThresholdPx: 650
groups:
width: 90%
mobileWidth: 100%
players:
width: 80%
mobileWidth: 100%
favorites:
width: 30%
mobileWidth: 100%
favorite:
width: 90%
mobileWidth: 100%
selectedPlayer: media_player.sonos_pair
backgroundBehindButtonSections: false
skipAdditionalPlayerSwitches: false
theme: rounded
groups:
order: 0
players:
order: 0
player-body:
border: 5px black
player-song:
color: '#000000'
font-family: Times New Roman
font-weight: 900
mediaBrowser:
order: 1
title:
fontSize: 24px
fontWeight: lighter
textTransform: uppercase
color: white
favorites:
width: 100%
mobileWidth: 100%
favorite:
width: 30%
mobileWidth: 100%
If I adjust the width beyond 30% all it does is make a favorite much bigger but still stays in a column for some reason… tried that.
I’m thinking it’s something to do with screen width maybe… not the card. I’d like the card to take the entire screen so I’ll have to look into that or if I’m thinking wrong that’s NOT out of the question I do that
alot… LOL
Weird. Works on my machine
It has to be something stupid I did… I did change my lovelace to this for this card…
- title: Music
icon: mdi:music-note
panel: true
cards:
- type: vertical-stack
cards:
Makes it take up the entire page but still favorites in a column… When I get home on a real computer I can have a better look!
That’s the problem, you should avoid the vertical stack. ’panel: true’ is good though
type: panel
cards:
- type: custom:custom-sonos-card
Thank you!! Finally got it!!! I had to then go back to the % for groups, favorites, etc… [Didn’t hit me until I discovered the ‘panel’ option in HA] Should have yelled at me @PunxsutawneyPhil … NONE of it worked until I discovered the ‘panel view’ WHICH you mentioned in the notes… ugh MY fault totally…
For the next ‘rookie’ … here.
- title: Music
icon: mdi:music-note
type: panel
theme: rounded
cards:
- type: custom:custom-sonos-card
shuffleFavorites: false
allVolumesText: 'All volumes'
entityNameRegexToReplace: 'SONOS '
entityNameReplacement: ''
layout:
mobileThresholdPx: 650
groups:
width: 17%
mobileWidth: 100%
players:
width: 20%
mobileWidth: 100%
favorites:
width: 35%
mobileWidth: 100%
favorite:
width: 20%
mobileWidth: 100%
selectedPlayer: media_player.sonos_pair
backgroundBehindButtonSections: false
skipAdditionalPlayerSwitches: false
groups:
order: 0
players:
order: 1
player-body:
border: 5px black
player-song:
color: '#000000'
font-family: Times New Roman
font-weight: 900
mediaBrowser:
order: 2
title:
fontSize: 24px
fontWeight: lighter
textTransform: uppercase
color: white
Still no one who was able to display the tracklist when certain media has been chosen ?
Did you find an way to use the new sensor for favourites in this custom card? Or in any other card?
Today I noticed my dashboard is completely empty. I’m using the default type: custom:custom-sonos-card but there is nothing. I always have been using this without any additional values. Now it is just empty.
Ensure that your Sonos device(s) are currently seen by the Sonos integration in HA, especially whichever device was most recently the ‘coordinator’.
The only times I’ve seen my Sonos card view completely empty was when my LivingRoom Play was offline and it was the most recent coordinator. When I restarted it and it came back up, my Sonos card view was back to normal. YMMV
Is there any way to make the favorites section just a list without artwork? It would be great if it looked like the groups section.
My tablets are on the local network, but they do not have internet access. Everything works well. I have artwork for the currently playing. I do not have artwork for the favorites.
Restarted my arc and it is discovering fine again.