← Back to Layouts
my layout

Name: FriendRewind
Author: FriendRewind
Author: 𝖇𝖚𝖑𝖑𝖊𝖙𝖕𝖗𝖔𝖔𝖋_𝖍𝖊𝖆𝖗𝖙
Category: Classic
Created: November 13, 2026
Comments (0)

No comments yet. Be the first!
You must log in to comment.
CSS Code

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"https://cdn.cursors-4u.net/previews/bone-hand-a5514fe0-64.webp","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"Playfair Display","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"https://wallpapers.com/maroon-aesthetic","pageBgMode":"cover","heroImageUrl":"https://tenor.com/en-GB/view/my-chemical-romance-gif-9057926","profileRowBgImage":"","profileRowBgMode":"cover","navBgColor":"#2b333f","navBgImage":"","navBgMode":"cover","navLinkColor":"#ffffff","navLinkHover":"#66aaff","boxBgColor":"#ffffff","boxOpacity":1,"boxRadius":8,"contactHeaderBg":"#4169E1","contactHeaderText":"#ffffff","contactContentBg":"#ffffff","contactBorderColor":"#4169E1","contactBorderWidth":1,"contactBorderRadius":5,"contactBoxAnimation":"","interestsHeaderBg":"#DAA520","interestsHeaderText":"#ffffff","interestsContentBg":"#ffffff","interestsBorderColor":"#DAA520","interestsBorderWidth":1,"interestsBorderRadius":5,"contentBoxAnimation":"","textBody":"#ffffff","textHeading":"#ffffff","textLink":"#0066cc","headingShadowColor":"#000000","headingShadowBlur":2,"headingShadowEnable":false,"moduleImages":{"contact":"","urlInfo":"","tableSection":"","tunes":"","blogPreview":"","blurbs":"","friends":"","Comments Background":"","comments":""}} */
/* Generated by FriendRewind.com Visual Builder */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap');

* { cursor: url(https://cdn.cursors-4u.net/previews/bone-hand-a5514fe0-64.webp), auto !important; }

body, body.profile-page {
  background-image: url("https://wallpapers.com/maroon-aesthetic") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #ffffff !important;
  font-family: 'Playfair Display', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif !important;
}

@media (min-width: 769px) and (pointer: fine) {
  body, body.profile-page {
    background-attachment: fixed !important;
  }
}

main::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 300px !important;
    background-image: url('https://tenor.com/en-GB/view/my-chemical-romance-gif-9057926') !important;
    background-size: cover !important;
    background-position: center center !important;
  }

.profile, .table-section, .module, .blurbs, .section, .profileInfo, .friend-space, .badges-section, .url-info, .contact, .interests {
  color: #ffffff !important;
}

h1, h2, h3, h4, h5, h6, .table-section h4, .module h4, .blurbs h4, .section h4 {
  color: #ffffff !important;
}
</style><style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>


/* FR_MANUAL_EXTRAS */
</style>
<style>

</style>
<style>


<style>

/* Round Spinning Avatar */
.profile-pic img {
    border-radius: 50% !important;
    animation: fr-pfp-spin 12s linear infinite !important;
}
@keyframes fr-pfp-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Pause on hover so people can actually look at it */
.profile-pic img:hover { animation-play-state: paused !important; }
</style></style>
<style>

/* =========================================
   PLAYER CONTAINER
   ========================================= */

#profile-playlist-mount,
#profile-playlist-container {
  overflow: visible !important;
}

/* =========================================
   MAIN IPOD FRAME
   ========================================= */

#profile-playlist-container .profile-playlist-widget {
  position: relative !important;
  isolation: isolate !important;

  width: 330px !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 12px auto !important;
  padding: 0 !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
  transform: none !important;
}

/* =========================================
   IPOD SCREEN BACKGROUND
   ========================================= */

#profile-playlist-container .profile-playlist-widget::before {
  content: "" !important;
  position: absolute !important;

  top: 33% !important;
  left: 10.5% !important;
  width: 42% !important;
  height: 32% !important;

  background: #e5f0f0 !important;
  border-radius: 0 !important;

  z-index: 0 !important;
  pointer-events: none !important;
}

/* =========================================
   SILVER IPOD FRAME IMAGE
   ========================================= */

#profile-playlist-container .profile-playlist-widget::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;

  background-image: url("https://64.media.tumblr.com/54e1dc2644f36605cd897b0a7045a8ab/c7ef79094775131b-69/s400x600/785f93fc3ce1e23ce9475febdaa36b30f833269a.pnj") !important;

  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;

  z-index: 10 !important;
  pointer-events: none !important;
}

/* =========================================
   REMOVE PLAYLIST HEADINGS
   ========================================= */

#profile-playlist-container .profile-playlist-widget h3 {
  display: none !important;
}

#profile-playlist-container .profile-playlist-widget .pp-header {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

/* =========================================
   PLAYLIST INSIDE IPOD SCREEN
   ========================================= */

#profile-playlist-container .profile-playlist-widget ul {
  position: absolute !important;

  /* ADJUST SCREEN POSITION AND SIZE HERE */

  top: 33% !important;
  left: 10.5% !important;
  width: 42% !important;
  height: 32% !important;

  max-height: none !important;

  margin: 0 !important;
  padding: 4px !important;
  box-sizing: border-box !important;

  background: rgba(229, 240, 240, 0.97) !important;

  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  list-style: none !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;

  scrollbar-width: thin !important;
  scrollbar-color: #9baeb2 #e5f0f0 !important;

  z-index: 2 !important;
}

/* =========================================
   REMOVE EXTRA TITLE
   ========================================= */

#profile-playlist-container .profile-playlist-widget ul::before {
  content: none !important;
  display: none !important;
}

/* =========================================
   SCROLLBAR
   ========================================= */

#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar {
  width: 3px !important;
}

#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar-track {
  background: #e5f0f0 !important;
}

#profile-playlist-container .profile-playlist-widget ul::-webkit-scrollbar-thumb {
  background: #9baeb2 !important;
  border-radius: 5px !important;
}

/* =========================================
   SONG ROWS
   ========================================= */

#profile-playlist-container .profile-playlist-widget li {
  position: relative !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 2px !important;
  padding: 5px 3px !important;
  box-sizing: border-box !important;

  background: transparent !important;

  border: none !important;
  border-bottom: 1px solid #c1d0d3 !important;
  border-radius: 0 !important;

  color: #424c52 !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  line-height: 1.25 !important;

  box-shadow: none !important;
  transform: none !important;

  cursor: pointer !important;
}

/* =========================================
   SONG HOVER
   ========================================= */

#profile-playlist-container .profile-playlist-widget li:hover {
  background: #d8e5e9 !important;
}

/* =========================================
   CURRENTLY PLAYING SONG
   ========================================= */

#profile-playlist-container .profile-playlist-widget li.current {
  background: #cbdde3 !important;
  border-left: 2px solid #829ba5 !important;
}

/* =========================================
   SONG TITLES
   ========================================= */

#profile-playlist-container .profile-playlist-widget .song-info,
#profile-playlist-container .profile-playlist-widget .song-info a {
  color: #35434b !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-weight: bold !important;
  line-height: 1.25 !important;

  text-decoration: none !important;
  text-shadow: none !important;
}

/* =========================================
   LONG SONG TITLES
   ========================================= */

#profile-playlist-container .profile-playlist-widget .song-info {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* =========================================
   ARTIST NAMES
   ========================================= */

#profile-playlist-container .profile-playlist-widget .song-artist,
#profile-playlist-container .profile-playlist-widget .song-artist a {
  color: #788b94 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 8px !important;
  font-weight: normal !important;
  line-height: 1.2 !important;

  text-decoration: none !important;
}

/* =========================================
   PLAYING INDICATOR
   ========================================= */

#profile-playlist-container .profile-playlist-widget .pp-equalizer span {
  background: #698c9d !important;
}

/* =========================================
   BUTTONS
   ========================================= */

#profile-playlist-container .profile-playlist-widget button {
  color: #758b94 !important;
  font-size: 9px !important;
}



#profile-playlist-container .profile-playlist-widget .pp-drag {
  display: none !important;
}


#profile-playlist-container .profile-playlist-widget .profile-playlist-empty {
  color: #758b94 !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 9px !important;
  font-style: italic !important;

  text-align: center !important;
}



#profile-playlist-container .profile-playlist-widget hr {
  display: none !important;
}

</style>