I checked that out but didn’t see where I could edit the layout. (n00b)

Looking at the sonos.css code, it basically does the same thing. Zone and Source are at the top, Artist and Track are on the right. I’d like to make it so that all four are on the side of the Cover Art, which IMO looks cleaner, takes up less space on the screen.

sonos.css

.sonos ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.sonos ul .name,
.sonos ul .art {
  display: inline-block;
  vertical-align: middle;
}
.sonos ul .name {
  padding: 0px .25em;
}
.sonos ul .art img {
  height: 100px;
}
.sonos ul .type,
.sonos ul .room {
  font-size: 50%;
  padding: .25em .5em;
}
.sonos ul .song {
	padding: 0px 0px;
	position: relative;
}
.sonos ul.flip {
  direction: rtl;
}

Hello, I have the MMM-Sonos module installed and working. I loaded a custom .css and the text layout is working my OCD. I have no programming skills but have managed to change the font size and things to my liking. The one thing I can’t resolve are the gaps between Source and Artist. Below pics are actual vs what I want. What is missing from the .css? Thanks!

Actual:

What I want:

My custom.css:

/* Sonos --------------------------------------------*/
.sonos ul .art img {
    height: 150px;
    width: 150px;
    border-radius: 0%;
    margin: 4px 4px;
    border: 0px solid #FFF;
}
.sonos ul .type {
    font-size: 16px;
    padding: 0px 0px;
    line-height: 16px;
    width: 300px;
}
.sonos ul .room {
    font-size: 20px;
    padding: 0px 0px;
    line-height: 20px;
    width: 300px;
}
.sonos ul .song {
    padding: 0px 0px;
    position: relative;
}
.sonos ul .name {
    width: 300px;
    font-size: 16px;
    padding: 0px 0px;
    line-height: 16px;
}
/*---------------------------------------------------*/

I made a few more edits. Removed the border from the cover art, removed the radius from the cover art, removed the drop shadow from the text and icons, changed the album fa-icon to a CD and lastly radiused the progress bar.

I also edited the Spotify logo on startup to a lower opacity.

Total n00b at this. This was fun. :P

@sdetweil said in MMM-Spotify.....Hide blurred background?:

@spoonek these settings should go in custom.css, right? backup is still a good practice

That is good advice. Thanks!

@Bugsounet. I’m learning as I go. Totally logical due to good programming. Many thanks! I dialed it in the way I wanted it. :clinking_beer_mugs: :thumbs_up:

[edit] I will add that anyone tinkering with the .css to backup the original first!!! That is just good practice.

@Bugsounet said in MMM-Spotify.....Hide blurred background?:

wait i will try (before talking nonsense)

in the css file locate: #SPOTIFY_BACKGROUND

add this inside the section: display: none;

Result : no background ;)

Many thanks sir!

Can I also modify the #SPOTIFY_COVER_IMAGE with the following or should I just comment it out?

box-shadow:black 0px 0px 0px 0px;

@Bugsounet said in MMM-Spotify.....Hide blurred background?:

wait i will try (before talking nonsense)

Appreciated. :P

I did find this:

#SPOTIFY_BACKGROUND {
  background-size: cover;
  background-position: center center;
  filter: blur(16px) opacity(90%) grayscale(33%);
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:0;
}

and…

#SPOTIFY_COVER_IMAGE {
  width:100%;
  height:100%;
  border-radius:10px;
  box-shadow:black 1px 1px 1px 1px;
}

Greetings@Bugsounet, thanks again for the help yesterday.

I was wondering if there is a way to hide the blurred background album art when the music is playing. Also, the shadow frame for the album art as well. Is that something in a CSS I can manipulate? Many thanks!

@Bugsounet said in MMM-Spotify:

@spoonek said in MMM-Spotify:

Error: listen EADDRINUSE: address already in use :::8888

it’s mean that the port 8888 il used by another app… free this port temporarily and retry

I just started over from scratch and now was able to get the authorization webpage login to work.

@Bugsounet said in MMM-Spotify:

when it want to works ;)

pi@raspberrypi:~/MagicMirror/modules/MMM-Spotify $ node first_auth.js
[SPOTIFY:ERROR] Token not found! /home/pi/MagicMirror/modules/MMM-Spotify/token.json
[SPOTIFY] Spotify v1.0.2 Initialized…
[SPOTIFY_AUTH] Opening the browser for authentication on Spotify…
events.js:174
throw er; // Unhandled ‘error’ event
^

Error: listen EADDRINUSE: address already in use :::8888
at Server.setupListenHandle [as _listen2] (net.js:1280:14)
at listenInCluster (net.js:1328:12)
at Server.listen (net.js:1415:7)
at Function.listen (/home/pi/MagicMirror/modules/MMM-Spotify/node_modules/express/lib/application.js:618:24)
at Spotify.authFlow (/home/pi/MagicMirror/modules/MMM-Spotify/node_modules/@bugsounet/spotify/index.js:310:8)
at Promise (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:20:14)
at new Promise ()
at authorize (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:17:12)
at authorizations (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:33:19)
at Object. (/home/pi/MagicMirror/modules/MMM-Spotify/first_auth.js:40:1)
Emitted ‘error’ event at:
at emitErrorNT (net.js:1307:8)
at process._tickCallback (internal/process/next_tick.js:63:19)
at Function.Module.runMain (internal/modules/cjs/loader.js:834:11)
at startup (internal/bootstrap/node.js:283:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:623:3)