← Back to Layouts
d

Name: FriendRewind
Author: FriendRewind
Author: sav_sawblade ⋆
Category: Classic
Created: October 31, 2026
Comments (0)

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

<style id="fr-vb2">
/* VB2_STATE:{"cursorUrl":"","overlayUrl":"","overlayOpacity":0.2,"avatarAnimation":"","pageFont":"","useLiveProfile":true,"previewUrl":"/profile?id=4","pageBgImage":"","pageBgMode":"cover","heroImageUrl":"","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":"#000000","textHeading":"#000000","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 */
</style><style>


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


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


/* FR_MANUAL_EXTRAS */
/* ==================================================
   MONOCHROME.exe — EMO / SCENE EDITION
   FRIENDREWIND PROFILE THEME
   COLORS: BLACK / GREY / WHITE
   ================================================== */

/* 01 — GLOBAL SETTINGS + SUBTLE PATTERN */

body.profile-page {
    background-color: #050505 !important;
    background-image:
        repeating-linear-gradient(
            45deg,
            transparent 0px,
            transparent 8px,
            rgba(255,255,255,0.018) 8px,
            rgba(255,255,255,0.018) 9px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent 0px,
            transparent 8px,
            rgba(255,255,255,0.012) 8px,
            rgba(255,255,255,0.012) 9px
        ) !important;
    background-attachment: fixed !important;
    color: #d4d4d4 !important;
    font-family: "Courier New", monospace !important;
    font-size: 13px;
    cursor: url('https://cdn.cursors-4u.net/previews/purple-moustache-bebd49e9-33.webp') 31 31, auto !important;

}

/* 02 — MAIN PROFILE CONTAINER */

body.profile-page .master-container {
  width: 800px;
    background-color: rgba(12,12,12,0.97) !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    box-shadow:
        0 0 0 3px #080808,
        0 0 25px rgba(255,255,255,0.06) !important;
    cursor: url('https://cdn.cursors-4u.net/previews/purple-moustache-bebd49e9-33.webp') 31 31, auto !important;

}

/* 03 — NAVIGATION BAR */

body.profile-page nav,
body.profile-page nav .top,
body.profile-page nav .links {
    background: #050505 !important;
    color: #eee !important;
    border-bottom: 1px solid #555 !important;
    border-radius: 0 !important;
}

/* 04 — PROFILE COLUMNS */

body.profile-page .col.w-40.left,
body.profile-page .col.right {
    color: #ccc !important;
}

/* 05 — ALL MAJOR PANELS */

body.profile-page .contact,
body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .general-about,
body.profile-page .url-info,
body.profile-page .table-section,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page #comments,
body.profile-page .comments-table,
body.profile-page .section {
    background-color: #111 !important;
    color: #d0d0d0 !important;
    border: 1px solid #3e3e3e !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 06 — SECTION TITLE BARS */

body.profile-page .heading {
    background-color: #292929 !important;
    color: #fff !important;
    border: 0 !important;
    border-bottom: 2px solid #777 !important;
    border-radius: 0 !important;
    padding: 7px !important;
    text-transform: uppercase !important;
  text-align: center;
}

body.profile-page .heading h1,
body.profile-page .heading h2,
body.profile-page .heading h3,
body.profile-page .heading h4 {
    color: #fff !important;
    font-family: "Courier New", monospace !important;
    font-size: 13px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-shadow: 1px 1px #000 !important;
    text-align: center;

}

/* 07 — TYPOGRAPHY */

body.profile-page h1,
body.profile-page h2,
body.profile-page h3,
body.profile-page h4 {
    color: #eee !important;
    font-family: "Courier New", monospace !important;
    text-align: center;

}

body.profile-page p,
body.profile-page li,
body.profile-page td,
body.profile-page .bio-text,
body.profile-page .interest-content {
    color: #ccc !important;
    line-height: 1.6;
}

body.profile-page strong,
body.profile-page b {
    color: #fff !important;
}

body.profile-page hr {
    border: 0 !important;
    border-top: 1px solid #444 !important;
}

/* 08 — LINKS */

body.profile-page a {
    color: #eee !important;
    text-decoration: underline !important;
    text-decoration-color: #666 !important;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

body.profile-page a:hover {
    color: #999 !important;
    text-decoration-color: #fff !important;
}

/* 09 — PROFILE PICTURE
   Grayscale normally; original color on hover. */


/* 10 — DETAILS / INTERESTS TABLE */

body.profile-page .details-table,
body.profile-page .details-table td {
    border-color: #444 !important;
}

body.profile-page .details-table td:first-child {
    background: #262626 !important;
    color: #fff !important;
    font-weight: bold !important;
    text-transform: uppercase;
}

/* 11 — CONTACT BUTTONS */

body.profile-page .contact a,
body.profile-page button {
    background: #202020 !important;
    color: #eee !important;
    border: 1px solid #666 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.profile-page .contact a:hover,
body.profile-page button:hover {
    background: #eee !important;
    color: #000 !important;
    border-color: #fff !important;
}

/* 12 — FRIEND GRID / TOP 8 */

body.profile-page .friends-grid img,
body.profile-page #top8-grid img {
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    filter: grayscale(100%);
    transition:
        filter 0.2s ease,
        border-color 0.2s ease;
}

body.profile-page .friends-grid img:hover,
body.profile-page #top8-grid img:hover {
    filter: grayscale(0%);
    border-color: #fff !important;
}

/* 13 — FRIEND NAMES */

body.profile-page .friends-grid,
body.profile-page #top8-grid {
    color: #ccc !important;
}

body.profile-page .friends-grid a,
body.profile-page #top8-grid a {
    color: #ddd !important;
    text-decoration: none !important;
}

body.profile-page .friends-grid a:hover,
body.profile-page #top8-grid a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* 14 — ONLINE / OFFLINE STATUS */

body.profile-page .online,
body.profile-page .offline {
    background: #222 !important;
    color: #eee !important;
    border: 1px solid #666 !important;
    border-radius: 0 !important;
}

/* 15 — COMMENTS */

body.profile-page .comments-table td,
body.profile-page .comments-table tr,
body.profile-page .cb-content-cell {
    background: #111 !important;
    color: #ccc !important;
    border-color: #444 !important;
}

body.profile-page .cb-author-name {
    color: #fff !important;
    font-weight: bold !important;
}

/* 16 — INPUTS / TEXT AREAS */

body.profile-page input,
body.profile-page textarea,
body.profile-page select {
    background: #101010 !important;
    color: #eee !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
    font-family: "Courier New", monospace !important;
}

body.profile-page input:focus,
body.profile-page textarea:focus,
body.profile-page select:focus {
    outline: 1px solid #aaa !important;
    border-color: #aaa !important;
}

/* 17 — SCROLLBAR */

body.profile-page ::-webkit-scrollbar {
    width: 10px;
}

body.profile-page ::-webkit-scrollbar-track {
    background: #080808;
}

body.profile-page ::-webkit-scrollbar-thumb {
    background: #444;
    border: 2px solid #080808;
}

body.profile-page ::-webkit-scrollbar-thumb:hover {
    background: #888;
}

/* 18 — FIXED MUSIC BAR */

body.profile-page .music-bar {
    background: #080808 !important;
    border-top: 1px solid #666 !important;
    border-radius: 0 !important;
}

body.profile-page .music-bar::before {
    display: none !important;
}

body.profile-page .music-bar .bar-title,
body.profile-page .bar-now-playing,
body.profile-page .bar-time-display,
body.profile-page .bar-time-total {
    color: #eee !important;
}

body.profile-page .music-bar .bar-btn {
    background: #222 !important;
    color: #fff !important;
    border: 1px solid #555 !important;
    border-radius: 0 !important;
}

body.profile-page .bar-progress {
    background: #333 !important;
}

body.profile-page .bar-progress-fill {
    background: #ddd !important;
}

/* 19 — PROFILE PLAYLIST */

body.profile-page .profile-playlist-widget {
    background: #111 !important;
    color: #ddd !important;
    border: 1px solid #444 !important;
    border-radius: 0 !important;
}

body.profile-page .profile-playlist-widget h3 {
    background: #292929 !important;
    color: #fff !important;
    border-radius: 0 !important;
}

body.profile-page .profile-playlist-widget li {
    background: #111 !important;
    color: #ccc !important;
    border-color: #444 !important;
}

body.profile-page .profile-playlist-widget li.current .song-info {
    color: #fff !important;
}

body.profile-page .pp-equalizer span {
    background: #ccc !important;
}

/* 20 — SELECTION HIGHLIGHT */

body.profile-page ::selection {
    background: #ddd !important;
    color: #000 !important;
}

/* 21 — REDUCE UNWANTED ROUNDED STYLING */

body.profile-page .master-container,
body.profile-page .contact,
body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .general-about,
body.profile-page .url-info,
body.profile-page .table-section,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview,
body.profile-page .section,
body.profile-page .heading {
    border-radius: 0 !important;
}

/* ==================================================
   END OF MONOCHROME.exe
   SYSTEM MESSAGE: COLOR IS A PRIVILEGE.
   ================================================== */
</style>
<style>
/* Wide Square Profile Tunes */

  div#profile-playlist-container {
  width: 100%!important;
  display: block;
  max-width: 500%!important;
} 
  .profile-playlist-widget {
  background: #fff!important;
  border: 1px solid #000!important;
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  color: #000!important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  max-width: 500%!important;
  font-size: 13px;
  border-radius: 0px!important;
  padding: 5px!important;
  margin: 5px 0!important;
  position: relative;
  z-index: 1;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}
  .profile-playlist-widget h3 {
  margin: 0;
  font-size: 15px;
  color: #000!important;
  flex: 1;
}
  .profile-playlist-widget .song-info {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-weight: 1000;
  margin: 0px;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0)!important;
}
  .profile-playlist-widget .song-artist {
  font-weight: 800;
  color: #000!important;
  font-size: 11px;
}
  .profile-playlist-widget .pp-drag {
  width: 19px;
  min-width: 8px;
  height: 0px;
  margin-right: 6px;
  color: #000!important;
  cursor: grab;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  touch-action: none;
  border-radius: 0px!important;
  transition: all 0.15s ease;
}
  .profile-playlist-widget button {
  background: none;
  border: none;
  color: #000!important;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 4px;
  border-radius: 0px!important;
  transition: all 0.2s;
  margin-left: auto;
}
  .profile-playlist-widget li.current .song-info {
  color: #fff !important;
}
  .profile-playlist-widget li.current {
  color: #fff !important;
  background: black!important;
}
  .profile-playlist-widget li.current .song-artist {
  color: #fff !important;
}
  .profile-playlist-widget li.profile-playlist-item:hover {
  color: #fff !important;
  background: #6E6E6E!important;
  border: 1px solid #fff;
}
  .profile-playlist-widget li.profile-playlist-item {
  border-radius: 0px!important;
}

  li.profile-playlist-empty {
  border-radius: 0px!important;
  color: #000!important;
}
  .pp-equalizer {
  display: none;
  align-items: flex-end;
  gap: 0px;
  height: 32px!important;
  margin-right: auto;
  content: url('https://www.iconsdb.com/icons/download/white/musical-note-512.png');
}
</style>
<style>
.online {
  visibility: hidden !important;
}

.online img {
  content: url("https://img.glittergfx.com/online-icons/for-girls/eop-online-now.gif") !important;
  visibility: visible !important;

  display: block !important;
  width: 70px !important;
  height: auto !important;
  margin: 6px auto !important;
}
</style>
<style>
.myspace-header .nav-logo {
  content: url('https://img.glittergfx.com/blinkies/insults/1nYJ-gotta-problem.gif');
}
</style>