← Back to Layouts
Dark rainbow

Name: FriendRewind
Author: FriendRewind
Author: Def3ct
Category: Aesthetic
Created: July 3, 2026
Nice animated wallpaper, visually appealing asthetics. CAN USE THIS AS A BASE LAYOUT. It targets all the correct elements for FriendRewind exactly. Enjoy!
Comments (4)

GOAT 07/03/2026 6:51 AM
its lookin slick as heck

throw in a mario font and it could v easily be rainbow road!

<33
Pancreas Harvester 07/03/2026 6:56 AM
You should make a clown themed theme
GOAT 07/03/2026 7:03 AM
btw i know this should be reserved for the site suggestions subforum but

there's no a href on layout comments for poster info

js xoxo
Def3ct 07/03/2026 7:15 AM
Ahh, fixed, and added comment replies to tell you lmao
You must log in to comment.
CSS Code

<div class="y2k-wallpaper">
  <video class="y2k-wall-video fr-bg-video" data-fr-wallpaper="1" autoplay muted loop playsinline preload="auto"
    src="/uploads/gallery/1/img_68e488c85b0393.60247722.webm">
    <source src="/uploads/gallery/1/img_68e488c85b0393.60247722.webm" type="video/webm">
  </video>
  <div class="y2k-wall-scrim"></div>
</div>

<style>
@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap');

:root {
  --y2k-pink: #ff2bd6;
  --y2k-cyan: #00f5ff;
  --y2k-lime: #b8ff00;
  --y2k-violet: #7b2cff;
  --y2k-panel: rgba(8, 4, 24, 0.88);
  --y2k-panel-edge: rgba(255, 43, 214, 0.55);
  --y2k-text: #f4eeff;
  --y2k-muted: #d4c8f0;
}

body.profile-page .fr-layout-html {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

.y2k-wallpaper {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background: #120018;
}

.y2k-wall-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.y2k-wall-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255, 43, 214, 0.08), transparent 60%),
    linear-gradient(180deg, rgba(4, 0, 18, 0.25) 0%, rgba(4, 0, 18, 0.65) 100%);
}

html,
body {
  background: transparent !important;
  background-color: transparent !important;
}

body.profile-page {
  color: var(--y2k-text) !important;
  font-family: Tahoma, Verdana, Arial, sans-serif !important;
}

body.profile-page .master-container,
body.profile-page main,
body.profile-page .row.profile {
  background: transparent !important;
  background-color: transparent !important;
  position: relative;
  z-index: 1;
}

body.profile-page .myspace-header {
  position: relative;
  z-index: 2;
  max-width: 990px !important;
  margin: 0 auto 10px !important;
}

body.profile-page .myspace-header .top-nav,
body.profile-page .myspace-header .top {
  background: rgba(18, 0, 32, 0.82) !important;
  background-image: none !important;
}

body.profile-page .myspace-header .main-nav-wrapper,
body.profile-page .myspace-header .links {
  background: rgba(12, 0, 28, 0.88) !important;
  background-image: none !important;
}

body.profile-page .myspace-header .main-nav li a,
body.profile-page .myspace-header .links a,
body.profile-page .myspace-header .dropdown-toggle,
body.profile-page .myspace-header .dropdown-menu a {
  color: var(--y2k-text) !important;
}

body.profile-page .myspace-header .main-nav li a:hover,
body.profile-page .myspace-header .links a:hover,
body.profile-page .myspace-header .dropdown-menu a:hover {
  color: var(--y2k-lime) !important;
}

body.profile-page .myspace-header .dropdown-menu {
  background: rgba(8, 4, 24, 0.96) !important;
  border: 1px solid rgba(0, 245, 255, 0.4) !important;
}

body.profile-page .profile .table-section,
body.profile-page .profile .blurbs,
body.profile-page .profile .friends,
body.profile-page .profile .contact,
body.profile-page .profile .general-about,
body.profile-page .profile .url-info,
body.profile-page .profile .home-actions,
body.profile-page #comments,
body.profile-page .blog-preview,
body.profile-page .photos-preview,
body.profile-page .videos-preview {
  background: var(--y2k-panel) !important;
  border: 2px solid var(--y2k-panel-edge) !important;
  border-radius: 6px !important;
  box-shadow:
    0 0 0 1px rgba(0, 245, 255, 0.25),
    0 8px 28px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  margin: 12px 0 !important;
}

body.profile-page .profile .table-section .inner,
body.profile-page .profile .blurbs .inner,
body.profile-page .profile .friends .inner,
body.profile-page .profile .section,
body.profile-page .profile .table-section p,
body.profile-page .profile .blurbs p {
  background: transparent !important;
  color: var(--y2k-text) !important;
}

body.profile-page .profile .table-section .heading,
body.profile-page .profile .blurbs .heading,
body.profile-page .profile .friends .heading,
body.profile-page .profile .contact .heading,
body.profile-page .profile .general-about .heading,
body.profile-page .profile .home-actions .heading,
body.profile-page #comments .heading,
body.profile-page .blog-preview .heading,
body.profile-page .photos-preview .heading,
body.profile-page .videos-preview .heading {
  background: linear-gradient(90deg, var(--y2k-pink), var(--y2k-violet), var(--y2k-cyan), var(--y2k-lime)) !important;
  border: none !important;
  border-bottom: 2px solid var(--y2k-cyan) !important;
  padding: 6px 10px !important;
  box-shadow: 0 2px 12px rgba(255, 43, 214, 0.35) !important;
}

body.profile-page .profile .heading h1,
body.profile-page .profile .heading h4 {
  color: #fff !important;
  font-family: 'Audiowide', Tahoma, sans-serif !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  text-shadow: 0 0 8px rgba(0, 245, 255, 0.6) !important;
}

body.profile-page .profile .home-actions h3 a,
body.profile-page .profile .home-actions a {
  color: var(--y2k-lime) !important;
  font-family: 'Audiowide', Tahoma, sans-serif !important;
}

body.profile-page .col.w-40.left > span[itemprop="name"] {
  display: block !important;
  background: var(--y2k-panel) !important;
  border: 2px solid var(--y2k-panel-edge) !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45) !important;
}

body.profile-page .profile h1,
body.profile-page .profile h1 .profile-name-row,
body.profile-page .profile h1 .profile-name-text,
body.profile-page.layout-bodybg .profile h1,
body.profile-page.layout-bodybg .profile h1 .profile-name-text {
  color: var(--y2k-cyan) !important;
  font-family: 'Audiowide', Tahoma, sans-serif !important;
  font-size: 1.4em !important;
  text-shadow: 0 0 12px rgba(0, 245, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  margin: 0 !important;
}

body.profile-page .profile h1 .profile-role-badge {
  color: var(--y2k-lime) !important;
}

body.profile-page .general-about .details p,
body.profile-page.layout-bodybg .general-about .details p {
  color: var(--y2k-text) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

body.profile-page .profile-mood,
body.profile-page .profile-mood b,
body.profile-page.layout-bodybg .profile-mood {
  color: var(--y2k-muted) !important;
  font-size: 12px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}

body.profile-page .general-about .online,
body.profile-page .general-about .idle,
body.profile-page .general-about .offline,
body.profile-page .last-login {
  color: var(--y2k-muted) !important;
  font-size: 11px !important;
}

body.profile-page .profile-pic img,
body.profile-page .profile-pic .pfp {
  border: 4px solid var(--y2k-pink) !important;
  border-radius: 50% !important;
  box-shadow:
    0 0 0 3px var(--y2k-cyan),
    0 0 24px rgba(255, 43, 214, 0.65) !important;
}

body.profile-page.layout-bodybg .profile .details-table td:first-child,
body.profile-page .profile .details-table td:first-child {
  background: linear-gradient(135deg, rgba(255, 43, 214, 0.45), rgba(123, 44, 255, 0.45)) !important;
  color: var(--y2k-lime) !important;
  font-weight: bold !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(0, 245, 255, 0.35) !important;
  width: 28% !important;
}

body.profile-page.layout-bodybg .profile .details-table td:last-child,
body.profile-page .profile .details-table td:last-child {
  background: rgba(0, 0, 0, 0.45) !important;
  color: var(--y2k-text) !important;
  padding: 6px 10px !important;
  border: 1px solid rgba(255, 43, 214, 0.2) !important;
}

body.profile-page .interest-content,
body.profile-page .interest-content *,
body.profile-page .bio-text,
body.profile-page .bio-text * {
  color: var(--y2k-text) !important;
}

body.profile-page .interest-content a,
body.profile-page .bio-text a,
body.profile-page .profile a {
  color: var(--y2k-cyan) !important;
}

body.profile-page .interest-content a:hover,
body.profile-page .bio-text a:hover {
  color: var(--y2k-lime) !important;
}

body.profile-page .profile .contact .f-row,
body.profile-page .profile .url-info {
  color: var(--y2k-text) !important;
}

body.profile-page .profile .url-info a {
  color: var(--y2k-cyan) !important;
}

body.profile-page .profile-playlist-widget {
  background: rgba(6, 2, 20, 0.92) !important;
  border: 2px solid var(--y2k-cyan) !important;
  border-radius: 8px !important;
  box-shadow: 0 0 20px rgba(0, 245, 255, 0.25) !important;
}

body.profile-page .profile-playlist-widget .pp-header,
body.profile-page .profile-playlist-widget .pp-title {
  color: var(--y2k-pink) !important;
  font-family: 'Audiowide', Tahoma, sans-serif !important;
}

body.profile-page .profile-playlist-widget li .song-info {
  color: var(--y2k-muted) !important;
}

body.profile-page .profile-playlist-widget li.current .song-info {
  color: var(--y2k-lime) !important;
}

body.profile-page .profile-playlist-widget li .song-artist {
  color: var(--y2k-cyan) !important;
}

body.profile-page .profile-playlist-widget .pp-equalizer span {
  background: var(--y2k-pink) !important;
}

body.profile-page ~ #footer-music-bar,
body.profile-page #footer-music-bar,
#footer-music-bar.music-bar {
  background: linear-gradient(180deg, rgba(18, 6, 40, 0.97) 0%, rgba(6, 2, 20, 0.99) 100%) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-top: 2px solid var(--y2k-pink) !important;
  box-shadow: 0 -4px 18px rgba(255, 43, 214, 0.35), inset 0 1px 0 rgba(0, 245, 255, 0.15) !important;
  color: var(--y2k-text) !important;
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important;
}

body.profile-page ~ #footer-music-bar::before,
body.profile-page #footer-music-bar::before,
#footer-music-bar.music-bar::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

body.profile-page ~ #footer-music-bar .bar-btn,
body.profile-page #footer-music-bar .bar-btn,
#footer-music-bar .bar-btn {
  background: linear-gradient(180deg, rgba(123, 44, 255, 0.55) 0%, rgba(80, 20, 160, 0.75) 100%) !important;
  border: 1px solid rgba(255, 43, 214, 0.65) !important;
  border-radius: 4px !important;
  color: var(--y2k-text) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  text-shadow: 0 0 6px rgba(255, 43, 214, 0.45) !important;
}

body.profile-page ~ #footer-music-bar .bar-btn:hover,
body.profile-page #footer-music-bar .bar-btn:hover,
#footer-music-bar .bar-btn:hover {
  background: linear-gradient(180deg, rgba(255, 43, 214, 0.65) 0%, rgba(123, 44, 255, 0.85) 100%) !important;
  border-color: var(--y2k-cyan) !important;
  color: var(--y2k-lime) !important;
}

body.profile-page ~ #footer-music-bar .bar-btn:active,
body.profile-page #footer-music-bar .bar-btn:active,
#footer-music-bar .bar-btn:active {
  background: rgba(123, 44, 255, 0.85) !important;
  transform: translateY(1px) !important;
}

body.profile-page ~ #footer-music-bar .bar-btn svg,
body.profile-page #footer-music-bar .bar-btn svg,
#footer-music-bar .bar-btn svg {
  fill: currentColor !important;
  color: inherit !important;
}

body.profile-page ~ #footer-music-bar #bar-playlist-btn,
body.profile-page #footer-music-bar #bar-playlist-btn,
#footer-music-bar #bar-playlist-btn {
  background: linear-gradient(180deg, rgba(123, 44, 255, 0.55) 0%, rgba(80, 20, 160, 0.75) 100%) !important;
  background-image: none !important;
  border: 1px solid rgba(255, 43, 214, 0.65) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
}

body.profile-page ~ #footer-music-bar #bar-playlist-btn:hover,
body.profile-page #footer-music-bar #bar-playlist-btn:hover,
#footer-music-bar #bar-playlist-btn:hover {
  background: linear-gradient(180deg, rgba(255, 43, 214, 0.65) 0%, rgba(123, 44, 255, 0.85) 100%) !important;
  background-image: none !important;
}

body.profile-page ~ #footer-music-bar #bar-playlist-btn svg,
body.profile-page #footer-music-bar #bar-playlist-btn svg,
#footer-music-bar #bar-playlist-btn svg {
  display: block !important;
}

body.profile-page ~ #footer-music-bar .bar-now-playing,
body.profile-page #footer-music-bar .bar-now-playing,
#footer-music-bar .bar-now-playing {
  color: var(--y2k-cyan) !important;
  text-shadow: 0 0 8px rgba(0, 245, 255, 0.45) !important;
}

body.profile-page ~ #footer-music-bar .bar-title,
body.profile-page ~ #footer-music-bar #bar-title,
body.profile-page #footer-music-bar .bar-title,
body.profile-page #footer-music-bar #bar-title,
#footer-music-bar .bar-title,
#footer-music-bar #bar-title {
  color: var(--y2k-lime) !important;
  text-shadow: 0 0 10px rgba(195, 255, 0, 0.35) !important;
}

body.profile-page ~ #footer-music-bar .bar-time-display,
body.profile-page ~ #footer-music-bar .bar-time-total,
body.profile-page #footer-music-bar .bar-time-display,
body.profile-page #footer-music-bar .bar-time-total,
#footer-music-bar .bar-time-display,
#footer-music-bar .bar-time-total {
  color: var(--y2k-muted) !important;
}

body.profile-page ~ #footer-music-bar .bar-progress,
body.profile-page #footer-music-bar .bar-progress,
#footer-music-bar .bar-progress {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(123, 44, 255, 0.45) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.6) !important;
}

body.profile-page ~ #footer-music-bar .bar-progress-fill,
body.profile-page #footer-music-bar .bar-progress-fill,
#footer-music-bar .bar-progress-fill {
  background: linear-gradient(180deg, var(--y2k-cyan) 0%, var(--y2k-pink) 100%) !important;
}

body.profile-page ~ #footer-music-bar .bar-progress-container.radio-mode .bar-progress,
body.profile-page #footer-music-bar .bar-progress-container.radio-mode .bar-progress,
#footer-music-bar .bar-progress-container.radio-mode .bar-progress {
  background: rgba(0, 0, 0, 0.55) !important;
  border-color: rgba(0, 245, 255, 0.45) !important;
  box-shadow: inset 0 0 8px rgba(0, 245, 255, 0.25) !important;
}

body.profile-page ~ #footer-music-bar .volume-slider,
body.profile-page #footer-music-bar .volume-slider,
#footer-music-bar .volume-slider {
  background: rgba(0, 0, 0, 0.55) !important;
  border: 1px solid rgba(123, 44, 255, 0.5) !important;
}

body.profile-page ~ #footer-music-bar .volume-slider::-webkit-slider-thumb,
body.profile-page #footer-music-bar .volume-slider::-webkit-slider-thumb,
#footer-music-bar .volume-slider::-webkit-slider-thumb {
  background: linear-gradient(180deg, var(--y2k-lime) 0%, var(--y2k-cyan) 100%) !important;
  border: 1px solid var(--y2k-pink) !important;
}

body.profile-page ~ #footer-music-bar .volume-slider::-moz-range-thumb,
body.profile-page #footer-music-bar .volume-slider::-moz-range-thumb,
#footer-music-bar .volume-slider::-moz-range-thumb {
  background: linear-gradient(180deg, var(--y2k-lime) 0%, var(--y2k-cyan) 100%) !important;
  border: 1px solid var(--y2k-pink) !important;
}

body.profile-page ~ #footer-music-bar #bar-compact-toggle,
body.profile-page #footer-music-bar #bar-compact-toggle,
#footer-music-bar #bar-compact-toggle {
  color: var(--y2k-cyan) !important;
  opacity: 0.9 !important;
}

body.profile-page ~ #footer-music-bar.music-bar--compact::after,
body.profile-page #footer-music-bar.music-bar--compact::after,
#footer-music-bar.music-bar--compact::after {
  background: linear-gradient(90deg, var(--y2k-pink) 0%, var(--y2k-cyan) 100%) !important;
}

body.profile-page ~ #footer-music-bar #yt-bar-player-wrap,
body.profile-page #footer-music-bar #yt-bar-player-wrap,
#footer-music-bar #yt-bar-player-wrap {
  border: 2px solid var(--y2k-violet) !important;
  box-shadow: 0 4px 16px rgba(255, 43, 214, 0.45) !important;
}

body.profile-page .music-bar {
  background: linear-gradient(180deg, rgba(18, 6, 40, 0.97) 0%, rgba(6, 2, 20, 0.99) 100%) !important;
  border-top: 2px solid var(--y2k-pink) !important;
}

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

body.profile-page .friends-grid a,
body.profile-page #top8-grid a {
  color: var(--y2k-text) !important;
}

body.profile-page .friends-grid img,
body.profile-page #top8-grid img {
  border: 2px solid var(--y2k-violet) !important;
  border-radius: 4px !important;
}

body.profile-page .blog-preview,
body.profile-page .blog-preview .entry,
body.profile-page .blog-preview a,
body.profile-page .blog-preview p {
  color: var(--y2k-muted) !important;
}

body.profile-page .blog-preview a:hover {
  color: var(--y2k-lime) !important;
}

body.profile-page table.comments-table,
body.profile-page table.comments-table td,
body.profile-page table.comments-table td:first-child {
  background: rgba(8, 4, 24, 0.82) !important;
  color: var(--y2k-text) !important;
  border-color: rgba(255, 43, 214, 0.25) !important;
}

body.profile-page table.comments-table td:first-child {
  background: rgba(123, 44, 255, 0.35) !important;
  color: var(--y2k-lime) !important;
  font-weight: bold !important;
}

body.profile-page table.comments-table td *,
body.profile-page .cb-content-cell,
body.profile-page .cb-content-cell *,
body.profile-page .cb-author-name,
body.profile-page .cb-author-name a,
body.profile-page .comment-reply,
body.profile-page .comment-reply .cb-content-cell,
body.profile-page .comment-reply .cb-content-cell *,
body.profile-page .comment-reply .cb-author-name {
  color: var(--y2k-text) !important;
}

body.profile-page .cb-author-name a:hover {
  color: var(--y2k-cyan) !important;
}

body.profile-page .comments-table .report {
  color: var(--y2k-muted) !important;
  background: transparent !important;
}

body.profile-page .comments-table .cb-actions button,
body.profile-page .comments-table .cb-reply-form button,
body.profile-page .comments-table .cb-like-btn,
body.profile-page .comments-table .cb-delete-comment-btn,
body.profile-page .comments-table .cb-pin-btn,
body.profile-page #comments .cb-actions button,
body.profile-page #comments .cb-reply-form button,
body.profile-page #comments .cb-like-btn {
  background: rgba(123, 44, 255, 0.5) !important;
  background-color: rgba(123, 44, 255, 0.5) !important;
  color: var(--y2k-text) !important;
  border: 1px solid rgba(255, 43, 214, 0.7) !important;
  border-radius: 4px !important;
  padding: 4px 10px !important;
  cursor: pointer !important;
  font-size: 0.8rem !important;
  font-family: inherit !important;
  line-height: 1.2 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-shadow: none !important;
}

body.profile-page .comments-table .cb-actions button:hover,
body.profile-page .comments-table .cb-reply-form button:hover,
body.profile-page .comments-table .cb-like-btn:hover,
body.profile-page #comments .cb-actions button:hover,
body.profile-page #comments .cb-reply-form button:hover {
  background: rgba(255, 43, 214, 0.65) !important;
  color: var(--y2k-lime) !important;
  border-color: var(--y2k-cyan) !important;
}

body.profile-page .comments-table .cb-like-btn.cb-liked,
body.profile-page #comments .cb-like-btn.cb-liked {
  background: rgba(0, 245, 255, 0.22) !important;
  border-color: var(--y2k-cyan) !important;
  color: var(--y2k-cyan) !important;
}

body.profile-page .comments-table .cb-pin-btn--pinned {
  background: rgba(255, 215, 0, 0.35) !important;
  color: #fff8dc !important;
  border-color: #ffd700 !important;
}

body.profile-page .comments-table .cb-pin-btn--unpinned {
  background: rgba(123, 44, 255, 0.5) !important;
  color: var(--y2k-text) !important;
}

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

body.profile-page ::-webkit-scrollbar-track {
  background: rgba(4, 0, 18, 0.8);
}

body.profile-page ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--y2k-pink), var(--y2k-violet));
  border-radius: 5px;
}
</style>