Floating Fake Spotify Playlist!!!

20 hours ago — by ★ 𝐫𝐱𝐦𝐞𝐨 ★ — Misc — used 7 times

A floating customizable Spotify playlist. Can be posted at the top or bottom of your CSS page. If it does work in one spot, delete it and try another! Hope you like it <3 Also making a smaller one without songs. Let me know if you want more of these!

CSS Code

Copy this and paste it at the bottom of the Advanced CSS tab in your layout editor, then save.

<!-- FLOATING SPOTIFY WIDGET MADE BY ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
 <!-- https://friendrewind.com/layouts/element.php?id=45 -->
<div class="custom-spotify-widget-scaled">
  <a href="YOUR PLAYLIST LINK HERE" target="_blank" rel="noopener noreferrer">
    <div class="player-body-scaled">
      
      <div class="player-top-row">
        
        <img src="YOUR COVER IMAGE URL HERE" class="player-art-scaled" alt="Playlist Cover"/>
        
        <!-- Right side: Playlist Details Layout -->
        <div class="player-details-scaled">
          <div class="playlist-title-scaled">PLAYLIST NAME HERE</div>
          <div class="playlist-author-scaled">by YOUR NAME HERE</div>
          <div class="spotify-status-tag-scaled">▶ Click to Stream</div>
        </div>
      </div>

      <!-- 5 Customizable Track Lines -->
      <div class="fake-tracklist-scaled">
	<!-- FAKE EXAMPLE LINE BELOW , DELETE IT WHEN YOU MAKE YOURS -->
	<div class="fake-track-line"><span>69</span> Pink Pony Club</div> (DELETE!)
        <div class="fake-track-line"><span>1</span> FIRST TRACK NAME HERE</div>
        <div class="fake-track-line"><span>2</span> SECOND TRACK HERE</div>
        <div class="fake-track-line"><span>3</span> THIRD TRACK HERE</div>
        <div class="fake-track-line"><span>4</span> FOURTH TRACK HERE/div>
        <div class="fake-track-line"><span>5</span> FIFTH TRACK HERE</div>
      </div>

    </div>
  </a>
</div>

<style>
  .custom-spotify-widget-scaled {
    position: fixed !important;   
    left: 20px !important;         /* SMALLER NUMBER MOVES IT MORE LEFT */
    top: 135px !important;         /* CHANGES UP DOWN, SMALLER NUMBER IS HIGHER */
    z-index: 2147483647 !important; /* MAXED DEPTH SO IT CANT BE BLOCKED DO NOT CHANGE! */
    width: 320px !important;       /* LARGER NUMBER MAKES IT WIDER :) */
  }

  .custom-spotify-widget-scaled a {
    text-decoration: none !important;
    display: block !important;
  }

  .player-body-scaled {
    background: #0d0d11 !important;
    border: 1px solid #22222a !important; 
    border-radius: 8px !important;       
    padding: 14px !important;             
    display: flex !important;
    flex-direction: column !important;   
    gap: 14px !important;                 
    box-shadow: 0 12px 36px rgba(0,0,0,0.85) !important;
    transition: border-color 0.3s ease !important;
  }

  /* LIGHTS UP GREEN WHEN CURSOR HOVERS OVER IT (changeable!) :) */
  .player-body-scaled:hover {
    border-color: #1DB954 !important;
  }

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
  }

  .player-art-scaled {
    width: 85px !important;         
    height: 85px !important;       
    border-radius: 6px !important;
    object-fit: cover !important;
    display: block !important;
  }

  .player-details-scaled {
    display: flex !important;
    flex-direction: column !important;
    font-family: monospace !important;
    text-align: left !important;    
    overflow: hidden !important;
  }

  .playlist-title-scaled {
    color: #ffffff !important;
    font-size: 16px !important;     
    font-weight: bold !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .playlist-author-scaled {
    color: #666666 !important;
    font-size: 13px !important;     
    margin-top: 4px !important;
  }

  .spotify-status-tag-scaled {
    color: #1DB954 !important;      /* SPOTIFY GREEN, CHANGEABLE */
    font-size: 13px !important;     
    margin-top: 10px !important;
    font-weight: bold !important;
  }

  /* Custom styled track list wrapper */
  .fake-tracklist-scaled {
    border-top: 1px solid #1a1a24 !important; 
    padding-top: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;                      
  }

  .fake-track-line {
    color: #aaaaaa !important;
    font-family: monospace !important;
    font-size: 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
  }

  .fake-track-line span {
    color: #555555 !important;
    margin-right: 8px !important;
    display: inline-block !important;
    width: 12px !important;
  }

  @media (max-width: 1300px) {      
    .custom-spotify-widget-scaled {
      display: none !important;
    }
  }
</style>

How to use: copy the code above → open your layout editor → paste it at the bottom of the Advanced CSS tab → save → refresh your profile. Elements stack — you can combine as many as you like. New to CSS? Read the Custom Code Tutorial.

More in Misc

« Back to Misc | « All Profile Elements