This is a lot about personal preference, and for that you need to dig into card-mod
I did, but Iām a newbie. How do I add my theme variables to the card?
I made a theme sonos:
sonos:
accent-color: "#03a9f4"
primary-color: "#000000"
secondary-text-color: "#000000"
secondary-background-color: "#ffffff"
disabled-text-color: "#000000"
Is there a theme variable to the sonos card?
Thanks! already figured it out. Still canāt seem to find the css element to give a border to the artworkā¦ class artwork is the containerā¦ inside is the image as a background element. Donāt know how to style that
Can you also change the color of the text of the highlighted track? And how do I change the mouseover colors in the queue?
Hi Stefan,
From what I can see, you need to use the following:
card_mod:
style:
sonos-queue$ sonos-media-row$: |
.button {
--secondary-background-color: #7D7C7C !important;
}
:host([activated]) {
color: #7D7C7C !important;
--mdc-ripple-color: #AF6901 !important;
}
.title {
font-size: 1.3rem !important;
color: white !important;
}
Remember though, if you move away from the default selected colors in favour of something more bespoke to your liking, you may need to change the song title color in the queue to compensate.
You can also use something like HTML Color Codes Color Picker to check suitable styles / color choices that work for you along with the necessary Hex or RGB codes.
Again, you are on the right track, but there isnāt a default style attribute for that in the card to do that, but you can introduce your own:
card_mod:
style:
sonos-player$: |
.artwork {
border-style: dotted !important;
}
Note that this can introduce other viewing issues that might not give you what you want.
See here for some of the CSS border styles you can use: CSS Borders
Good Evening,
I hope you are well.
Would you be able to tell me if you can introduce a capability to programmatically set the artwork as background via an if is_state rather than just a switch?
Iād like to have the option to disable the artwork as background when a player is idle and switch on artwork as background when the player is playing.
Cheers, and like others have said, thanks for all the hard work in putting this together for the community. Itās creators like yourself that make this community a great place to collaborate!
And do you also know how to change the hover color and text color of the media-row?
Hi Stefan,
Iāve drilled down the shadow roots, but am struggling to see the media row queue highlight color. As for the queue text color, thatās in one of my posts further up listed with this info:
card_mod:
style:
sonos-queue$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
color: white !important;
}
Perhaps the community can help with the rollover color and where this can be applied within the correct shadow root.
See the attached code for my own view of the dashboard:
layout_type: custom:grid-layout
type: custom:layout-card
cards:
- type: custom:sonos-card
sections:
- groups
- grouping
entities:
- media_player.lounge
- media_player.kitchen
- media_player.move
- media_player.guest
showVolumeUpAndDownButtons: true
hidePlayerControlPowerButton: true
labelWhenNoMediaIsSelected: No Media Selected
mediaBrowserTitle: Favourites
predefinedGroups:
- name: Lounge & Dining
entities:
- player: media_player.lounge
volume: 15
- player: media_player.move
volume: 15
queueTitle: Player Queue
mediaTitleRegexToReplace: ^(.*?\.com.*)
mediaTitleReplacement: Doorbell
startSection: groups
heightPercentage: 115
widthPercentage: 125
topFavorites:
- ""
view_layout:
grid-area: left
card_mod:
style:
sonos-player$ sonos-player-header$: |
.entity {
font-size: 20px !important;
line-height: 25px !important;
overflow: visible !important;
}
.song {
font-size: 20px !important;
line-height: 25px !important;
font-weight: 500 !important;
color: #727272 !important;
}
.artist-album {
display: none !important;
}
sonos-player$ sonos-player-header$ sonos-progress$: |
.progress {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$: |
.icons {
margin-bottom: 1rem;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
.big-icon {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$: |
.title {
font-size: 20px !important;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
.volume-level {
font-size: medium !important;
}
.percentage,percentage-slim {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$ ha-icon-button$: |
mwc-icon-button {
--mdc-icon-size: 35px !important;
}
sonos-media-browser$ sonos-media-browser-header$: |
.title {
font-size: 20px !important;
text-align: left !important;
justify-content: left !important;
width: 120% !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
ha-svg-icon {
display: none !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$ mwc-button$: |
.mdc-button {
font-size: 16px !important;
font-weight: bold !important;
font-family: Roboto, Noto, sans-serif !important;
border-radius: 10px !important;
background-color: #E5E5E5 !important;
}
sonos-media-browser$ sonos-media-browser-icons$: |
.title {
font-size: 20px !important;
width: 125% !important;
}
.favorite-type {
font-size: 20px !important;
font-weight: normal !important;
margin-left: 15px !important;
margin-bottom: 6px !important;
border-bottom: none !important;
}
.icons {
gap: 0px 45px !important;
}
sonos-media-browser$ sonos-media-browser-icons$ ha-control-button$: |
.button {
width: 125% !important;
padding: 0px !important;
box-sizing: content-box !important;
}
.thumbnail {
width: 125% !important;
}
sonos-media-browser$ sonos-media-browser-list$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-grouping$: |
list,item,ha-icon {
--mdc-icon-size: 35px !important;
}
.name-and-volume {
font-size: 20px !important;
}
sonos-grouping$ sonos-volume$: |
.percentage-slim {
font-size: 20px !important;
}
[slim] * {
--control-slider-thickness: 18px !important;
--mdc-icon-size: 35px !important;
}
sonos-grouping$ sonos-grouping-button$: |
ha-control-button,ha-icon {
--mdc-icon-size: 35px !important;
}
ha-control-button,button {
font-size: 20px !important;
}
sonos-groups$ sonos-group$: |
.speakers {
font-size: 20px !important;
line-height: 25px !important;
}
.song-title {
font-size: 20px !important;
line-height: 25px !important;
}
sonos-footer$ sonos-section-button$: |
.ha-icon-button,ha-icon {
--mdc-icon-size: 35px !important;
}
- type: custom:sonos-card
sections:
- player
- queue
showVolumeUpAndDownButtons: false
mediaBrowserTitle: Favourites
hidePlayerControlPowerButton: true
mediaTitleRegexToReplace: ^(.*?\.com.*)
mediaTitleReplacement: Doorbell
widthPercentage: 150
queueTitle: Player Queue
startSection: player
heightPercentage: 115
topFavorites:
- ""
artworkAsBackground: true
view_layout:
grid-area: mid
card_mod:
style:
sonos-player$ sonos-player-header$: |
.entity {
font-size: 20px !important;
line-height: 25px !important;
overflow: visible !important;
}
.song {
font-size: 20px !important;
line-height: 25px !important;
font-weight: 500 !important;
color: #727272 !important;
}
.artist-album {
display: none !important;
}
sonos-player$ sonos-player-header$ sonos-progress$: |
.progress {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$: |
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
.big-icon {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-player$: |
.controls {
background-color: rgba(var(--rgb-card-background-color), 0.8) !important;
margin-left: 1.5rem !important;
margin-right: 1.5rem !important;
margin-bottom: 1rem !important;
}
sonos-player-header {
background-color: rgba(var(--rgb-card-background-color), 0.8) !important;
margin: 1rem 1.5rem !important;
}
sonos-queue$: |
.title {
font-size: 20px !important;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
.volume-level {
font-size: medium !important;
}
.percentage,percentage-slim {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$ ha-icon-button$: |
mwc-icon-button {
--mdc-icon-size: 35px !important;
}
sonos-media-browser$ sonos-media-browser-header$: |
.title {
font-size: 20px !important;
text-align: left !important;
justify-content: left !important;
width: 120% !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
ha-svg-icon {
display: none !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$ mwc-button$: |
.mdc-button {
font-size: 16px !important;
font-weight: bold !important;
font-family: Roboto, Noto, sans-serif !important;
border-radius: 10px !important;
background-color: #E5E5E5 !important;
}
sonos-media-browser$ sonos-media-browser-icons$: |
.title {
font-size: 20px !important;
width: 125% !important;
}
.favorite-type {
font-size: 20px !important;
font-weight: normal !important;
margin-left: 15px !important;
margin-bottom: 6px !important;
border-bottom: none !important;
}
.icons {
gap: 0px 45px !important;
}
sonos-media-browser$ sonos-media-browser-icons$ ha-control-button$: |
.button {
width: 125% !important;
padding: 0px !important;
box-sizing: content-box !important;
}
sonos-media-browser$ sonos-media-browser-list$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-grouping$: |
list,item,ha-icon {
--mdc-icon-size: 35px !important;
}
.name-and-volume {
font-size: 20px !important;
}
sonos-grouping$ sonos-volume$: |
.percentage-slim {
font-size: 20px !important;
}
[slim] * {
--control-slider-thickness: 18px !important;
--mdc-icon-size: 35px !important;
}
sonos-grouping$ sonos-grouping-button$: |
ha-control-button,ha-icon {
--mdc-icon-size: 35px !important;
}
sonos-grouping$ sonos-grouping-button$ ha-control-button$: |
.button {
font-size: 20px !important;
}
sonos-groups$ sonos-group$: |
.speakers {
font-size: 20px !important;
line-height: 25px !important;
}
.song-title {
font-size: 20px !important;
line-height: 25px !important;
}
sonos-footer$ sonos-section-button$: |
.ha-icon-button,ha-icon {
--mdc-icon-size: 35px !important;
}
- type: custom:sonos-card
sections:
- media browser
favoritesToIgnore:
- UniFi Protect
- Text-to-speech
- My media
- Camera
- Music Library
mediaBrowserItemsPerRow: 3
labelWhenNoMediaIsSelected: No Media Selected
mediaBrowserTitle: Favourites
queueTitle: Player Queue
showVolumeUpAndDownButtons: true
hidePlayerControlPowerButton: true
favoritesItemsPerRow: 4
mediaTitleRegexToReplace: ^(.*?\.wav.*)
mediaTitleReplacement: Doorbell
startSection: media browser
sortFavoritesByType: true
heightPercentage: 115
widthPercentage: 125
view_layout:
grid-area: right
card_mod:
style:
sonos-player$ sonos-player-header$: |
.entity {
font-size: 20px !important;
overflow: visible !important;
}
.song {
font-size: 20px !important;
}
.artist-album {
display: none !important;
}
sonos-player$ sonos-player-header$ sonos-progress$: |
.progress {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$: |
.icons {
margin-bottom: 1rem;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
.big-icon {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$: |
.title {
font-size: 20px !important;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
.volume-level {
font-size: medium !important;
}
.percentage,percentage-slim {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$ ha-icon-button$: |
mwc-icon-button {
--mdc-icon-size: 35px !important;
}
sonos-media-browser$ sonos-media-browser-header$: |
.title {
font-size: 20px !important;
text-align: left !important;
justify-content: left !important;
width: 120% !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
ha-svg-icon {
display: none !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$ mwc-button$: |
.mdc-button {
font-size: 16px !important;
font-weight: bold !important;
font-family: Roboto, Noto, sans-serif !important;
border-radius: 10px !important;
background-color: #E5E5E5 !important;
}
sonos-media-browser$ sonos-media-browser-icons$: |
.title {
font-size: 20px !important;
width: 125% !important;
}
.favorite-type {
font-size: 20px !important;
font-weight: normal !important;
margin-left: 15px !important;
margin-bottom: 6px !important;
border-bottom: none !important;
}
.icons {
gap: 0px 45px !important;
}
sonos-media-browser$ sonos-media-browser-icons$ ha-control-button$: |
.button {
width: 125% !important;
padding: 0px !important;
box-sizing: content-box !important;
}
.thumbnail {
width: 125% !important;
}
sonos-media-browser$ sonos-media-browser-list$ sonos-media-row$: |
.title {
font-size: 1.3rem !important;
}
sonos-grouping$: |
list,item,ha-icon {
--mdc-icon-size: 35px !important;
}
.name-and-volume {
font-size: 20px !important;
}
sonos-grouping$ sonos-volume$: |
.percentage-slim {
font-size: 20px !important;
}
[slim] * {
--control-slider-thickness: 18px !important;
--mdc-icon-size: 35px !important;
}
sonos-grouping$ sonos-grouping-button$: |
ha-control-button,ha-icon {
--mdc-icon-size: 35px !important;
}
ha-control-button,button {
font-size: 20px !important;
}
sonos-groups$ sonos-group$: |
.speakers {
font-size: 20px !important;
}
.song-title {
font-size: 20px !important;
}
sonos-footer$ sonos-section-button$: |
.ha-icon-button,ha-icon {
--mdc-icon-size: 35px !important;
}
layout:
grid-template-areas: "\"left mid right\""
grid-template-columns: 30% 40% 30%
grid-template-rows: auto
This layout and styling works on the light theme background on a tablet dashboard.
Iāve also got a mobile specific view of the dashboard which has been themed with mushroom shadow and card_mod over a dark background, which is a variation on above:
2 Likes
Hi Stefan and psjnr84,
This is how you can change the text color, the highlight color and the opacity of the highlight in the queue:
card_mod:
style:
sonos-queue$: |
:host {
--secondary-text-color: red !important;
}
.list {
--mdc-theme-primary: var(--primary-color) !important;
}
sonos-queue$ sonos-media-row$: |
:host {
--mdc-ripple-activated-opacity: 0.1 !important;
}
1 Like
how did you remove the icons next to the home icon ?
I am interested ! thanks
Thatās just enabling or disabling the features of the card within its sections.
I resculpted the mini player card as I wanted to see the artwork in the end, so did away with that code.
My mini player version now looks like:
type: custom:sonos-card
sections:
- player
- queue
- media browser
hidePlayerControlPowerButton: true
entities:
- media_player.lounge
labelWhenNoMediaIsSelected: No Media Selected
mediaBrowserTitle: Favourites
favoritesItemsPerRow: 1
showVolumeUpAndDownButtons: false
startSection: player
heightPercentage: 80
topFavorites:
- ""
queueTitle: Queue
sortFavoritesByType: false
mediaTitleRegexToReplace: ^(.*?\.com.*)
mediaTitleReplacement: Doorbell
artworkAsBackground: true
card_mod:
style:
sonos-player$: |
.controls {
background-color: rgba(var(--rgb-card-background-color), 0.8) !important;
margin-left: 1.5rem !important;
margin-right: 1.5rem !important;
margin-bottom: 1rem !important;
}
sonos-player-header {
background-color: rgba(var(--rgb-card-background-color), 0.8) !important;
margin: 1rem 1.5rem !important;
}
sonos-player$ sonos-player-header$: |
.entity {
font-size: 18px !important;
line-height: 20px !important;
overflow: visible !important;
}
.song {
font-size: 18px !important;
line-height: 20px !important;
font-weight: 500 !important;
color: #9B9B9B !important;
}
.artist-album {
display: none !important;
}
sonos-player$ sonos-player-header$ sonos-progress$: |
.progress {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$: |
.icons {
margin-bottom: 1rem !important;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
.big-icon {
--mdc-icon-size: 3rem !important;
--mdc-icon-button-size: 3rem !important;
}
sonos-queue$: |
.title {
font-size: 18px !important;
}
sonos-ha-player,ha-icon-button {
--mdc-icon-size: 2rem !important;
--mdc-icon-button-size: 2rem !important;
}
sonos-queue$ sonos-media-row$: |
.title {
font-size: 1.2rem !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$: |
.volume-level {
font-size: medium !important;
}
.percentage,percentage-slim {
font-size: medium !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$ ha-control-slider$: |
:host {
--control-slider-thickness: 30px !important;
}
sonos-player$ sonos-player-controls$ sonos-volume$ ha-icon-button$: |
mwc-icon-button {
--mdc-icon-size: 30px !important;
}
sonos-media-browser$ sonos-media-browser-header$: |
.title {
font-size: 18px !important;
text-align: left !important;
justify-content: left !important;
width: 120% !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$: |
ha-svg-icon {
display: none !important;
}
sonos-media-browser$ sonos-media-browser-header$ sonos-ha-player$ more-info-content$ more-info-media_player$ mwc-button$: |
.mdc-button {
font-size: 16px !important;
font-weight: bold !important;
font-family: Roboto, Noto, sans-serif !important;
border-radius: 10px !important;
background-color: #282828 !important;
}
sonos-media-browser$ sonos-media-browser-icons$: |
.title {
font-size: 18px !important;
width: 125% !important;
}
.favorite-type {
font-size: 18px !important;
font-weight: normal !important;
margin-left: 15px !important;
margin-bottom: 6px !important;
border-bottom: none !important;
}
.icons {
gap: 0px 45px !important;
}
sonos-media-browser$ sonos-media-browser-icons$ ha-control-button$: |
.button {
width: 125% !important;
padding: 0px !important;
box-sizing: content-box !important;
}
.thumbnail {
width: 125% !important;
}
sonos-media-browser$ sonos-media-browser-list$ sonos-media-row$: |
.title {
font-size: 1.2rem !important;
}
sonos-grouping$: |
list,item,ha-icon {
--mdc-icon-size: 30px !important;
}
.name-and-volume {
font-size: 18px !important;
}
sonos-grouping$ sonos-volume$: |
.percentage-slim {
font-size: 18px !important;
}
[slim] * {
--control-slider-thickness: 18px !important;
--mdc-icon-size: 30px !important;
}
sonos-grouping$ sonos-grouping-button$: |
ha-control-button,ha-icon {
--mdc-icon-size: 30px !important;
}
ha-control-button,button {
font-size: 18px !important;
}
sonos-groups$ sonos-group$: |
.speakers {
font-size: 18px !important;
line-height: 20px !important;
}
.song-title {
font-size: 18px !important;
line-height: 20px !important;
}
sonos-footer$ sonos-section-button$: |
.ha-icon-button,ha-icon {
--mdc-icon-size: 30px !important;
}
Hope you find this useful in your projectsā¦
1 Like
I want the logo of my company as fallbackArtwork
it is saved in the www directory? what is the link to add it ? and can I use png ?
To access files in the www folder and utilise for the fallbackArtwork, do the following:
Card code excerpt:
fallbackArtwork: /local/Home_Assistant_Logo.png
/local/filename.png (filename should be replaced with the name of your image).
Home Assistant supports jpg, jpeg and png files
This works absolutely fine by the way:
1 Like