MagicMirror Forum
    • Recent
    • Tags
    • Unsolved
    • Solved
    • MagicMirror² Repository
    • Documentation
    • 3rd-Party-Modules
    • Donate
    • Discord
    • Register
    • Login
    A New Chapter for MagicMirror: The Community Takes the Lead
    Read the statement by Michael Teeuw here.

    MMM-Spotify.....Hide blurred background?

    Scheduled Pinned Locked Moved Requests
    10 Posts 3 Posters 1.3k Views 3 Watching
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S Offline
      spoonek
      last edited by

      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!

      Screen Shot 2020-08-21 at 9.09.30 AM.png

      1 Reply Last reply Reply Quote 0
      • ? Offline
        A Former User
        last edited by A Former User

        wait i will try (before talking nonsense)

        in the css file locate: #SPOTIFY_BACKGROUND

        add this inside the section: display: none;

        Result : no background ;)

        S 2 Replies Last reply Reply Quote 0
        • S Offline
          spoonek @Guest
          last edited by spoonek

          @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;
          }
          
          1 Reply Last reply Reply Quote 0
          • ? Offline
            A Former User
            last edited by

            #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;
              display: none;
            }
            
            1 Reply Last reply Reply Quote 0
            • S Offline
              spoonek @Guest
              last edited by spoonek

              @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;
              
              1 Reply Last reply Reply Quote 0
              • ? Offline
                A Former User
                last edited by

                as you want ;) it’s a css code, you can personalize it.

                S 1 Reply Last reply Reply Quote 1
                • S Offline
                  spoonek @Guest
                  last edited by spoonek

                  @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.

                  Screen Shot 2020-08-21 at 10.15.12 AM.png

                  S 1 Reply Last reply Reply Quote 0
                  • S Offline
                    sdetweil @spoonek
                    last edited by

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

                    Sam

                    How to add modules

                    learning how to use browser developers window for css changes

                    S 1 Reply Last reply Reply Quote 0
                    • S Offline
                      spoonek @sdetweil
                      last edited by

                      @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!

                      1 Reply Last reply Reply Quote 0
                      • S Offline
                        spoonek
                        last edited by spoonek

                        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.

                        Screen Shot 2020-08-21 at 11.27.15 AM.png

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

                        Screen Shot 2020-08-21 at 11.31.34 AM.png

                        Total n00b at this. This was fun. :P

                        1 Reply Last reply Reply Quote 0
                        • 1 / 1
                        • First post
                          Last post
                        Enjoying MagicMirror? Please consider a donation!
                        MagicMirror created by Michael Teeuw.
                        Forum managed by Sam, technical setup by Karsten.
                        This forum is using NodeBB as its core | Contributors
                        Contact | Privacy Policy