Size of buttons!

[suneworld]

Hi!
Thank you for an amazing card!

I was wondering if there is any way to make the media player buttons larger?

Kindest regards from Norway

[punxaphil]

Yes, you need to look into the styles configuration and use some CSS. Take a look at the documentation.

[richardwonka]

Do you have a link to the relevant bit of the documentation? I haven’t found it.

I think having a large, centred play/pause button and maybe forward and shuffle would be a very useful default instead of the very small buttons in the bottom panel, hidden among things that likely see less use.

[punxaphil]

These are the instructions:

CSS Styling
For maximum control of look and feel, define your style with CSS under styles.

Many elements in the card can be styled using this, but not all. Using your web browser's developer console, inspect the element and check the CSS. If the CSS contains --sonos-card-style-name: [elementName];, then the element can be styled using the elementName.
(https://github.com/johanfrick/custom-sonos-card#css-styling)

And for the buttons, here is an example:

type: custom:sonos-player
skipAdditionalPlayerSwitches: true
styles:
  media-controls-icon:
    '--mdc-icon-size': 3rem

[suneworld]

Thank you so much! I've been trying to find the CSS for this but haven't had any progress. Thank you, thank you, thank you! - Tryllekunstner Sune Alexandersen Narud Øvre Måsan, Asker Tlf 924 88 111 facebook.com/sunenarud sunenarud.no <http://www.sunenarud.no>

…

On Mon, 6 Feb 2023 at 21:58, Johan Frick ***@***.***> wrote: These are the instructions: [image: image] <https://user-images.githubusercontent.com/26582898/217083864-5c2cb604-8496-4b12-9b49-2f0124c52726.png> And for the buttons, here is an example: type: custom:sonos-playerskipAdditionalPlayerSwitches: truestyles: media-controls-icon: '--mdc-icon-size': 3rem [image: image] <https://user-images.githubusercontent.com/26582898/217084026-5a131014-e826-40a7-8a8d-64a6bcd7cd64.png> — Reply to this email directly, view it on GitHub <#104 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2OHLOT66N224TMAY3MAYDWWFQX3ANCNFSM6AAAAAATLV7IHI> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[punxaphil]

I'm surprised you didn't figure it out, since you are a magician 😅

[suneworld]

Hahaha! Thank you for the confidence :) - Tryllekunstner Sune Alexandersen Narud Øvre Måsan, Asker Tlf 924 88 111 facebook.com/sunenarud sunenarud.no <http://www.sunenarud.no>

…

On Tue, 7 Feb 2023 at 09:57, Johan Frick ***@***.***> wrote: I'm surprised you didn't figure it out, since you are a magician 😅 — Reply to this email directly, view it on GitHub <#104 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2OHLLG2AXLFRGM2M5TFCTWWIFBDANCNFSM6AAAAAATLV7IHI> . You are receiving this because you authored the thread.Message ID: ***@***.*** .com>

[beogaard]

Hej guys,
first let me thank you @johanfrick for yout phantastic work.
I'm struggeling with the same problem. I´m trying to enlarge the media buttons or a dashboard on a google hub.
But when i ad the snippet into my card nothing ever changes. Can you please push me in the right direction?

type: custom:sonos-card
sections:
  - player
  - volumes
  - groups
  - grouping
  - media browser
showVolumeUpAndDownButtons: true
mediaBrowserItemsPerRow: 4
heightPercentage: 105
widthPercentage: 180
topFavorites:
  - ''
mediaBrowserShowTitleForThumbnailIcons: true
hideGroupCurrentTrack: false
dynamicVolumeSlider: true
styles:
  media-controls-icon:
    '--mdc-icon-size': 3rem

[punxaphil]

This is not supported anymore. You need card mod for such hacks.

#194 (comment)

[punxaphil]

#104 (reply in thread)

[beogaard]

thanks for the fast reply. with card mod it worked like a charm.