Dashboard: Sonos card

Share your Projects! Dashboards & Frontend
780

IMG_7488
IMG_74881179×2556 575 KB

Thanks for the help. The second part worked correctly but the first didn’t, it just shows me the same thing. Any ideas? I use the latest version of the card.

781

IMG_7487
IMG_74871179×2556 206 KB

IMG_7486
IMG_74861179×2556 166 KB

And now, abusing his wisdom. How can I change the font in the red boxes? And how can I change the background color to black in the text of the second image? Thanks in advance. All the best.

782

You need the beta as I said

783

The update just skipped me. I’ll look at it tomorrow without fail. Thank you so much. Can something be done about the other two questions?

784

Not supported by default, but you can hack the css with GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card

type: custom:sonos-card
card_mod:
  style:
    sonos-grouping$: |
      sonos-grouping-button {
        --accent-color: black;
        font-size: 30px;
      }

PunxaPhil
image

1 Like
785

v7.0.0 released

:warning: Breaking changes

  • Favorites are now shown as icons instead of list by default, can be changed to list with mediaBrowserItemsPerRow: 1.
  • Favorite titles are now shown by default. Can be hidden with mediaBrowserHideTitleForThumbnailIcons: true.
  • Urls for thumbnails are no longer rewritten from http to https. Can be enforced with replaceHttpWithHttpsForThumbnails: true.

:rocket: Highlights

And much more! See full release log here. Documentation in initial post has been updated.

PunxaPhil
image

3 Likes
786

maybe im blind, but how and where did you add these icons to the card?
image

787
1 Like
788

ive had that for a long time, but how do i use them is the sonos card ?

ok i see it says if youve configured the entity. i did but let me do a them refresh

789

IMG_7498
IMG_74981179×2556 436 KB

IMG_7499
IMG_74991179×2556 157 KB

Continuing with the queries and very grateful for it.
Photo 1: As you can see, my image does not exceed the size of the antennas in the TV image. Can I make said image disappear or enlarge mine a little?
Photo 2: Could we change the default icons for ones with a better design or custom ones? Thank you for such a wonderful card. It’s my favorite.

790

Hi! Thank you, a lot, for your efforts and this great card!

One question: I managed to remove the border radius from the media browser icons. But how can I remove the rounded corners of the gray “shadow” or additional “boarder” around (or totally remove it)?

1000032833
1000032833834×500 75.4 KB

This is my present code:

type: custom:sonos-card
theme: sonos
sections:
  - media browser
topFavorites:
  - ''
dynamicVolumeSlider: false
mediaBrowserItemsPerRow: 4
mediaBrowserShowTitleForThumbnailIcons: true
showVolumeUpAndDownButtons: false
heightPercentage: 123
mediaArtworkOverrides: []
entityNameRegexToReplace: Sonos Küche
widthPercentage: 113
entityId: media_player.sonos_kueche
mediaBrowserTitle: Meine Favoriten
card_mod:
  style:
    sonos-media-browser$ sonos-media-browser-icons$: |
      div {            
        border: none;
        border-radius: 0px !important;
        color: white !important;
        font-size: 18px !important;
        font-weight: 300 !important;
      }
791

1: use fallbackArtwork: <url to your own image>
2: I’m afraid not, that is not supported

1 Like
792 
type: custom:sonos-card
card_mod:
  style:
    sonos-media-browser$: |
      sonos-media-browser-icons {
        --rgb-card-background-color: transparent;
      }
793

Thank you!
Like this?

It has no effect at the moment…

type: custom:sonos-card
theme: sonos
sections:
  - media browser
topFavorites:
  - ''
dynamicVolumeSlider: false
mediaBrowserItemsPerRow: 4
mediaBrowserShowTitleForThumbnailIcons: true
showVolumeUpAndDownButtons: false
heightPercentage: 123
mediaArtworkOverrides: []
entityNameRegexToReplace: Sonos Küche
widthPercentage: 113
entityId: media_player.sonos_kueche
mediaBrowserTitle: Meine Favoriten
card_mod:
  style:
    sonos-media-browser$ sonos-media-browser-icons$: |
      div {            
        border: none;
        border-radius: 0px !important;
        color: white !important;
        font-size: 18px !important;
        font-weight: 300 !important;
      }
    sonos-media-browser$: |
      sonos-media-browser-icons {
        --rgb-card-background-color: transparent;
      }
794

Now it’s getting complex.
I see that those two collide though. since sonos-media-browser$ is there two times.
Not sure what the solution is.
I recommend you to dig into the card-mod documentation for that.

795

I tried to install this using HACS, but i can’t find this card. What do i miss?

Screenshot 2024-02-13 at 08.42.45
Screenshot 2024-02-13 at 08.42.451156×558 85 KB

796

I used the “explore and download repositories button”. Search fro Sonos, but this repo does not show up. What do i miss?

Screenshot 2024-02-13 at 08.42.45
Screenshot 2024-02-13 at 08.42.451156×558 85 KB

797

Looks like you are searching integrations. Sonos-card is under frontend.

798

Thanks. Feeling like a NOOB. I missed that completely.

799

Hm, I noticed the following: Even when using this as single modification with card_mod it doen’t work as desired. It removes the background behind the text but does not remove the rounded corners of the frame arount the icons. I’m not sure it has the effect wanted, since changing transparent to e.g. black has no result (background behind text remains transparent).

card_mod:
  style:
    sonos-media-browser$ sonos-media-browser-icons$: |
      div {            
        border: none;
        color: black !important;
        font-size: 18px !important;
        font-weight: 300 !important;
      }
    .: |
      ha-card {
        --sonos-border-radius: 0px !important;
        --primary-color: none;
        --secondary-background-color: none;
        --sonos-ha-card-background-color: none;
        --ha-card-box-shadow: none;
      }

image

card_mod:
  style:
    sonos-media-browser$: |
      sonos-media-browser-icons {
        --rgb-card-background-color: transparent;
      }

image