Tiny Floating Fake Spotify Playlist!!!

1 month ago - by ★ 𝐫𝐱𝐦𝐞𝐨 ★ - Misc - used 5 times

A smaller version of my floating Spotify playlist, without the songs. Can be pasted into either the top or bottom of your CSS. If it doesn't work in one spot, try moving it to another! Hope you like it!
Let me know if you want more :))

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 PLAYLIST BY ★ 𝐫𝐱𝐦𝐞𝐨 ★ -->
<!-- https://friendrewind.com/layouts/element.php?id=46 -->
<div class="custom-spotify-widget">
  <a href="YOUR PLAYLIST LINK HERE" target="_blank" rel="noopener noreferrer">
    <div class="player-body">
      <!-- Left side: Album/Playlist Artwork Cover -->
      <img src="YOUR IMAGE OR GIF URL HERE" class="player-art" alt="Playlist Cover"/>
      
      <!-- Right side: Track/Playlist Details -->
      <div class="player-details">
        <div class="playlist-title">PLAYLIST NAME HERE</div>
        <div class="playlist-author">by YOUR NAME HERE</div>
        <div class="spotify-status-tag">▶ Click to Stream</div>
      </div>
    </div>
  </a>
</div>

<style>
  .custom-spotify-widget {
    position: fixed !important;   
    left: 20px !important;         /* LOWER NUMBER IS MORE LEFT, HIGHER NUMBER IS MORE RIGHT */
    top: 135px !important;         /* LOWER NUMBER IS UP, HIGHER NUMBER IS DOWN */
    z-index: 2147483647 !important; /* MAKES SURE IT SITS ON TOP OF EVERYTHING, DO NOT CHANGE */
    width: 210px !important;       /* HIGHER NUMBER IS WIDER :) */
  }

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

  .player-body {
    background: #0d0d11 !important;
    border: 1px solid #22222a !important;
    border-radius: 8px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8) !important;

  }

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

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

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

  .playlist-author {
    color: #666666 !important;
    font-size: 9px !important;
    margin-top: 2px !important;
  }

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

  
  @media (max-width: 1200px) {
    .custom-spotify-widget {
      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