Floating Fake Spotify Playlist!!!

1 month ago - by ★ 𝐫𝐱𝐦𝐞𝐨 ★ - Misc - used 24 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. Leave the Visual Builder's existing CSS in place - add this under it, don't replace it.

<!-- 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 CSS above → open your layout editor → switch to the Advanced CSS tab → paste at the bottom (keep the Visual Builder CSS above it) → save → refresh your profile. If the element also has HTML, paste that into About Me or at the bottom of Advanced CSS after the CSS. 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