← Back to Layouts
YAY

Name: FriendRewind
Author: FriendRewind
Author: Aashyy
Category: Colorful
Created: September 1, 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 */
</style>
<style id="fr-vb2">
/* =========================================================
   FRIENDREWIND PROFILE CSS
   ========================================================= */

/* =========================
   PAGE BACKGROUND
   ========================= */

body,
body.profile-page {
  background-image: url("https://friendrewind.com/uploads/gallery/31058/img_6a9639e45960d7.53948139.gif") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-attachment: scroll !important;
  background-position: center center !important;
  color: #ff00a2 !important;
}

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


/* =========================
   HERO / BIG TOP IMAGE
   ========================= */

/*
   main::before was unreliable on the profile,
   so we're styling the main area directly.
*/

/* =========================
   HERO / BIG TOP IMAGE
   ========================= */

main::before {
  content: "" !important;
  display: block !important;
  width: 100% !important;
  height: 300px !important;

  position: relative !important;
  z-index: 1 !important;

  background-image: url("https://friendrewind.com/uploads/gallery/31058/img_6a963a24b977f0.69141120.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}



/* =========================
   PROFILE BACKGROUND
   ========================= */

.profile {
  background-image: url("https://friendrewind.com/uploads/gallery/31058/img_6a963b24346399.92857704.webp") !important;
  background-repeat: repeat !important;
  background-size: auto !important;
  background-position: top center !important;
}


/* =========================
   NAVIGATION
   ========================= */

.myspace-header .top-nav {
  background: #000000 !important;
}

.myspace-header .main-nav-wrapper {
  background: #000000 !important;
}

.myspace-header .main-nav li a {
  color: #ff00a2 !important;
}

.myspace-header .main-nav li a:hover {
  color: #37ff00 !important;
}


/* =========================
   CONTACT BOX
   ========================= */

.contact {
  border: 1px solid #000000 !important;
  border-radius: 5px !important;
  background-color: transparent !important;
}

.contact .heading {
  background-color: #000000 !important;
  color: #ff00a2 !important;
}


/* =========================
   OTHER BOXES
   ========================= */

.table-section,
.friends,
.blurbs,
.module,
.profileInfo {
  border: 1px solid #000000 !important;
  border-radius: 5px !important;
}

.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading {
  background-color: #000000 !important;
  color: #37ff00 !important;
}


/* =========================
   TEXT COLORS
   ========================= */

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

a,
.profile a,
.table-section a,
.module a {
  color: #ff00a2 !important;
}

a:hover,
.profile a:hover,
.table-section a:hover,
.module a:hover {
  color: #37ff00 !important;
}


/* =========================
   CONTACT / COMMENTS BACKGROUND
   ========================= */

.contact,
.url-info,
#comments,
.comments-table td {
  background-image: url("https://friendrewind.com/uploads/gallery/31058/img_6a963b806c0bb9.60807650.gif") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* =========================
   CONTACT ICONS
   ========================= */

.contact img.icon {
  display: none;
}


/* =========================
   ONLINE ICON
   ========================= */

.online {
  content: url("https://64.media.tumblr.com/2504f5481e18bb1e7e1d5c473517660e/7cf915f60095705b-df/s100x200/bd5726394529e1eebcc6bbbe5ba48a749272fcfa.gifv");
}


/* =========================
   CONTACT BUTTON ICONS
   ========================= */

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
  /* add to friends */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/ee645d23edb993df5612377a0603ad63/7cf915f60095705b-36/s75x75_c1/d6f62574f0de39d38d8755532d3131cbafef406e.gifv");
  background-size: 100% 100%;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
  /* add to favorites */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/978326bb150fd118e525fe75db3d38fb/7cf915f60095705b-aa/s75x75_c1/9bd88baccb833f7d84f7901fb3001fa7c0b7a30a.gifv");
  background-size: 100% 100%;
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
  /* send message */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/7b7b7e9910f39f715365b77dcfe758f9/7cf915f60095705b-e6/s75x75_c1/2b2b0cb8b2f1cc12b66c7ae0603a83e38813eb25.gifv");
  background-size: 100% 100%;
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
  /* forward to friend */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/4f03e97f73d33b81514af6a4b98cd301/7cf915f60095705b-59/s75x75_c1/93be821f503c1ba349b910dfd6bf673c0f3a9d68.gifv");
  background-size: 100% 100%;
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
  /* instant message */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/c6ab672a84236dae06179624d08500c0/7cf915f60095705b-1e/s75x75_c1/ead1d23376258c5d53c8c179e29cb68001f2e29e.gifv");
  background-size: 100% 100%;
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
  /* block user */
  content: " ";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url("https://64.media.tumblr.com/53d22b5158a30aeba3800ac7ce3c5377/7cf915f60095705b-44/s75x75_c1/511f4c193c50aa8014c5e1be1cdc4e23607aa583.gifv");
  background-size: 100% 100%;
}


/* =========================
   LOADING SCREEN / WOLVERINE
   ========================= */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;

  z-index: 999999 !important;
  pointer-events: none;

  background-image: url("https://friendrewind.com/uploads/gallery/31058/img_6a963bed8a4976.31075508.gif");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;

  animation: yourAnimation 2s ease 0s 1 normal forwards;
}

@keyframes yourAnimation {
  0% {
    opacity: 1;
  }

  75% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}


/* =========================
   DEADPOOL STICKER
   ========================= */

.screen-sticker {
  position: fixed !important;
  width: 190px !important;
  height: auto !important;
  z-index: 9999 !important;
  pointer-events: none !important;
}

.bottom-left {
  bottom: 10px !important;
  left: 40px !important;
}


/* =========================
   CURSOR
   ========================= */

body {
  cursor: url("https://cdn.cursors-4u.net/previews/rainbow-sheep-e771608c-preview-50.webp") 0 0, auto !important;
}


/* =========================
   NAV LOGO
   ========================= */

.myspace-header .nav-logo {
  content: url("https://friendrewind.com/media/chat_media/chat_15792_460b9f5fd394756399c23af4.png");
  width: 180px;
  height: auto;
}
</style><img class="screen-sticker bottom-left" src="https://friendrewind.com/uploads/gallery/31058/img_6a9638ca9b6d21.60647061.webp">
]

/* =========================
   EXTRA COLOR FIXES
   ========================= */

/* Main text */
body,
.profile,
.profile p,
.profile div,
.profileInfo,
.table-section,
.table-section td,
.module,
.module td,
.blurbs,
.blurbs td,
.friends,
.friend-space,
.interests,
.url-info,
.contact {
  color: #ffffff !important;
}

/* Headings */
.profile h1,
.profile h2,
.profile h3,
.profile h4,
.profile h5,
.profile h6,
.table-section .heading,
.friends .heading,
.blurbs .heading,
.section .heading,
.module .heading,
.profileInfo .heading,
.interests .heading {
  color: #37ff00 !important;
  background-color: #000000 !important;
}

/* Contact heading */
.contact .heading {
  color: #ff00a2 !important;
  background-color: #000000 !important;
}

/* Links */
a,
a:visited {
  color: #ff00a2 !important;
}

a:hover {
  color: #37ff00 !important;
}

/* Profile name / title */
.profile h1,
.profile h2 {
  color: #000000 !important;
}

/* URL info */
.url-info {
  color: #ffffff !important;
}

/* Interests */
.interests {
  color: #ffffff !important;
}

.interests .heading {
  color: #37ff00 !important;
  background-color: #000000 !important;
}