• Recent
  • Tags
  • Unsolved
  • Solved
  • MagicMirror² Repository
  • Documentation
  • 3rd-Party-Modules
  • Donate
  • Discord
  • Register
  • Login
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 999 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 Aug 21, 2020, 1:29 PM

    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 Aug 21, 2020, 2:03 PM Aug 21, 2020, 1:54 PM

      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 Aug 21, 2020, 2:02 PM Reply Quote 0
      • S Offline
        spoonek @Guest
        last edited by spoonek Aug 21, 2020, 2:02 PM Aug 21, 2020, 2:02 PM

        @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 Aug 21, 2020, 2:04 PM

          #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 Aug 21, 2020, 2:06 PM Aug 21, 2020, 2:06 PM

            @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 Aug 21, 2020, 2:12 PM

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

              S 1 Reply Last reply Aug 21, 2020, 2:17 PM Reply Quote 1
              • S Offline
                spoonek @Guest
                last edited by spoonek Aug 21, 2020, 2:20 PM Aug 21, 2020, 2:17 PM

                @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 Aug 21, 2020, 2:43 PM Reply Quote 0
                • S Away
                  sdetweil @spoonek
                  last edited by Aug 21, 2020, 2:43 PM

                  @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 Aug 21, 2020, 3:25 PM Reply Quote 0
                  • S Offline
                    spoonek @sdetweil
                    last edited by Aug 21, 2020, 3:25 PM

                    @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 Aug 21, 2020, 3:35 PM Aug 21, 2020, 3:30 PM

                      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
                      1 / 1
                      • First post
                        9/10
                        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