I’m afraid not, this card only support Sonos entities.
Ok thanks! I have a solution. Adding a button to the zone control page that navigates to this panel.
Can someone help me. I’m sure it’s me or a setting, or something but I cannot seem to figure out
This is what I see normally
unless I actually point my mouse to the corner, then the icon appears
on moble the icon is visible, but barely. It’s like the icon color is white, or near white. I dont think i have any custom css or anything, so I dont get what I’m doing wrong.
Thanks in advance for any lovelace tips
Please check the latest release. I’ve made some changes to make the card compatible with default theme.
1 Like
Nice! That worked. Thank you.
Here’s one more, but it’s not a big deal. I work around it just fine.
On home network, I have a proxy set up. I usually enter the https://url, even when at home from my computer just for ease. When I use URL, some of the artwork does not load
Like these
But if I connect via IP address (local), the images load. The images do load correctly when connecting from my phone with the internal/external information in the configuration. If this is not related to this, no worries. Honestly it’s not that big of a deal, I mostly use the phone to control/change anyway.
Great
No idea about that second problem though
No worries, I’m so glad you made the changes to improve the experience with the default theme.
Thanks for the quick turn around.
1 Like
Thanks for the update. This was unexpected (the frame following the theme) but honestly this is what I envisioned it to look like since the beginning of the conversation and what I was going to configure it to anyway.
I’m now relying on this card more than the sonos mobile/desktop app.
2 Likes
I am actually using these options of view about sonos-card:
- icon: si:sonos
title: My Sonos
path: my_sonos
id: my_sonos
background: url("/local/backgrounds/lucky.jpeg") center / cover fixed
panel: true
cards:
- type: custom:custom-sonos-card
name: ''
groupsTitle: 'I Miei Sonos'
groupingTitle: ''
mediaTitle: 'I Miei Favoriti'
shuffleFavorites: false
allVolumesText: 'All volumes'
backgroundBehindButtonSections: true
selectedPlayer: media_player.sonos
but the background picture is not shown as all the card has a black background.
It seems i get this behaviour since last releases as before i could see the chosen background.
The background is regularly loaded as, if i go to the media browser i see this:
Hints?
EDIT: I tried also to put the backgroundBehindButtonSections: option to false, but nothing changes…
Yes, I know I introduced breaking changes and I am sorry for that. I feel I had to do this to make the card more compatible with the rest of the Lovelace UI and other cards.
No timing is perfect, but I now found time to do it, and better to do it sooner than later.
So…
the bad news is, some stuff will not look as it did for you out of the box (or with your old config).
The good news is, you can configure it to look exactly as before, but maybe configuring it a bit differently.
In your case, you want a transparent background, and that came out of the box with the Sonos Card before v4. With v4 and later, it is not the default look, because that is not the “recommended way” for lovelace cards. You can make it transparent though by setting the theme variables:
--sonos-ha-card-background-color: '';
--ha-card-box-shadow: '';
The README should be updated to match what is possible, but please let me know if something is missing.
PunxaPhil - I like coffee 
1 Like
First of all i tried adding the 2 variables in the theme:
sonos:
sonos-background-color: var(--secondary-background-color)
sonos-artist-album-text-color: rgb(198, 203, 210)
sonos-title-color: rgb(0, 0, 0)
sonos-color: rgb(198, 203, 210)
sonos-player-section-background: rgb(32, 33, 36)
sonos-accent-color: rgb(198, 203, 210)
sonos-border-radius: 0.5rem
sonos-border-width: 0.25rem
sonos-media-buttons-multiline: wrap
sonos-button-section-background-color: rgb(192, 192, 192)
sonos-ha-card-background-color: ''
ha-card-box-shadow: ''
and it fails…
Then i tried to style the card in this way:
- type: custom:custom-sonos-card
style: |
ha-card {
--sonos-ha-card-background-color: '';
--ha-card-box-shadow: '';
}
But it failed again…
Am i wrong in something ?
Sorry, my mistake. It should be none:
sonos-ha-card-background-color: none
ha-card-box-shadow: none
PunxaPhil - I like coffee 
1 Like
Great Card! This is amazing and just what I’ve been looking for, for so long! One quick question that I can’t seem to figure out! What am I going wrong when it comes to removing the “Sonos” name from the card? I have the following in the config, yet it doesn’t seem to have any impact on the card?
entityNameRegexToReplace: 'Sonos ’
entityNameReplacement: ‘’
My Friendly names for my devices are:
Sonos - Living Room
Sonos - Bedroom
Sonos - Sitting Room
I’ve also tried: entityNameRegexToReplace: 'Sonos -’
I’m stumped!
Your quotes look weird, that’s the only thing I can see.
Still working for you @terryhonn ?
PunxaPhil - support the projekt
Working great for me! This card is really the only way I interact with my Sonos devices now. Thanks again for all your hard work!
2 Likes
Hmmm…I don’t understand why it isn’t working for me…I double checked the config:
entityNameRegexToReplace: 'Sonos'
entityNameReplacement: ''
Cleared the cache…tried a different browser and that darn Sonos Prefix won’t go away! Ugh!
Still working for me too:
entityNameRegexToReplace: SONOS
entityNameReplacement: ''
entities:
- media_player.bedroom_sonos
- media_player.bedroom_2_sonos
- media_player.deck_sonos
- media_player.dining_room_sonos
- media_player.garage_sonos
- media_player.living_room_sonos
- media_player.media_room_sonos
- media_player.office_sonos
- media_player.stairway_sonos
I see they have the space in there which is the problem I had. As far as I can tell, it should be working.
Got it! Thank you…I didn’t realize I needed to define the actual entities in the configuration…Your post cleared everything up! All is working now! Thanks again everyone! More questions to come once I start my theme’ing! lol
1 Like
Is there any way we could get the ability to theme the song title in the main player window apart from the accent color?
this looks fine using the accent color:
but this is hard to read:
If we could theme it separately that could be solved.
Great card so far tho! Thanks!
EDIT:
created a PR for this feature request.
EDIT AGAIN:
Wait, who is the owner of this card?
is it @PunxsutawneyPhil or is it GitHub - johanfrick/custom-sonos-card: Home Assistant custom lovelace sonos card? Or are they the same person?
I’m confused now. Did I put the PR in the right repo?
1 Like
Could it be possible to add a search option?