← Back to Layouts
Minimal Monochrome

Name: FriendRewind
Author: FriendRewind
Author: Kayla⟡
Category: Minimal
Created: August 24, 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>
/* =========================================================
   MINIMAL MONOCHROME FRIENDREWIND LAYOUT
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');


/* =========================================================
   PAGE + MAIN LAYOUT
   ========================================================= */

body {
  background: none;
  filter: grayscale(100%);
}

main {
  width: 1000px;
  margin-left: -100px;

  font-family: "Cutive Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

/* Left side of profile */
main .left {
  position: relative !important;
  width: 60% !important;
}


/* =========================================================
   HIDE DEFAULT FRIENDREWIND ELEMENTS
   ========================================================= */

footer,
.nav-logo.logo,
.top-nav,
.profile-info,
::-webkit-scrollbar,
.url-info,
.myspace-header,
.details-table tr:nth-child(6),
.profile-mood,
.online,
.profile .contact .heading,
.cb-like-btn,
.icon {
  display: none !important;
}


/* =========================================================
   GENERAL ABOUT SECTION
   ========================================================= */

.general-about {
  display: flex;
  flex-direction: column;
  width: 350px !important;
}


/* =========================================================
   INTERESTS
   ========================================================= */

.table-section.interests {
  border: 1px solid #000;
}

/* Individual interest boxes */
.details-table tr {
  display: inline-block;
  width: 48%;

  margin-left: 5px;
  margin-bottom: 5px;

  border: 1px solid #000;
}

.details-table td {
  display: inline-block;
  width: 100% !important;
}

/* Interest category title */
.details-table td:first-child {
  margin-bottom: 1px;
  border-bottom: 1px solid #000;
}

/* Scrollable interest text */
.details-table td:last-child {
  width: 100%;
  height: 150px !important;

  overflow-y: scroll;
}


/* =========================================================
   REPLACE INTERESTS TITLE WITH IMAGE
   ========================================================= */

.table-section.interests .heading {
  height: auto !important;

  padding: 0 !important;

  font-size: 0 !important;

  border-bottom: none !important;
}

.table-section.interests .heading::before {
  content: "";
  display: block;

  width: 580px;
  height: 40px;

  background-image: url("https://pixelsafari.neocities.org/dividers/sparkles4.gif");
  background-repeat: no-repeat;
}


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

.profile .contact {
  border: none;
  border-left: 1px solid gray !important;
}

/* Turn contact rows into simple text links */
.profile .contact .inner,
.profile .contact .inner .f-row,
.profile .contact .inner .f-row .f-col {
  display: block;
  margin: 0 0 7px 5px;
}

/* Remove default icon space */
.contact .inner a img {
  font-size: 0;
}

.contact .inner a::before {
  content: "";
}

/* Little > marker before contact links */
.contact .inner .f-row .f-col a::before {
  content: " > ";
  display: inline-block;

  width: 16px;
  height: 16px;

  animation: .3s 5 blink;
}


/* =========================================================
   DEFAULT HEADINGS
   ========================================================= */

.heading {
  color: #000 !important;
  background: transparent !important;

  border: none !important;
  border-bottom: 1px solid #000 !important;
}


/* =========================================================
   RIGHT-SIDE HEADINGS
   Keep View All links, hide section title text
   ========================================================= */

main .right .heading {
  font-size: 0 !important;
}

main .right .heading a {
  font-family: "Cutive Mono", monospace !important;
  font-size: 14px !important;

  color: #000 !important;
  text-decoration: none !important;
}

/* Witchy icon beside View All */
main .right .heading a::before {
  content: "🧿 ";
  font-size: 13px;
}

main .right .heading a:hover {
  text-decoration: underline !important;
}


/* =========================================================
   FRIENDS
   Keeps Friends visible above Comments
   ========================================================= */

.friends:not(#comments) {
  display: block !important;
  width: 100% !important;

  margin: 12px 0 !important;
}

.friends:not(#comments) .heading {
  display: block !important;
}

.friends:not(#comments) img {
  max-width: 100% !important;
  height: auto !important;
}


/* =========================================================
   COMMENTS
   ========================================================= */

table.comments-table {
  display: block;
  background: #fff;
}

table.comments-table,
.comment-replies {
  border: none;
}

.comments-table td,
.comments-table td:first-child {
  background: #fff;
  border: none;
}

.comments-table td:first-child {
  text-align: left;
  font-size: .7em;
}

.comments-table td:first-child img:not(.icon) {
  border: none !important;
  border-radius: 0;
}

/* Comment action buttons */
.cb-actions button {
  border-width: 1px !important;
  border-style: solid;
  border-radius: 0;
}


/* =========================================================
   PROFILE TUNES
   Positioned beside profile picture
   ========================================================= */

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

  /* POSITION
     increase top = move down
     increase left = move right
  */
  top: 38px !important;
  left: 210px !important;

  width: 300px !important;
  min-height: 145px !important;

  margin: 0 !important;

  box-sizing: border-box !important;
}

.profile-playlist-widget * {
  max-width: 100%;
  box-sizing: border-box !important;
}

/* Prevent long song names from breaking layout */
.profile-playlist-widget .song-title,
.profile-playlist-widget .track-title {
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}


/* =========================================================
   PROFILE TUNES TEXT
   ========================================================= */

.profile-playlist-widget .pp-header h3,
.profile-playlist-widget h3,
.profile-playlist-widget .song-info,
.profile-playlist-widget li.current .song-info,
.profile-playlist-widget p,
.profile-playlist-widget span,
.profile-playlist-widget a,
.profile-playlist-widget button {
  color: #000 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.profile-playlist-widget .song-artist {
  color: #222 !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.profile-playlist-widget input {
  color: #000 !important;
  opacity: 1 !important;
}

.profile-playlist-widget input::placeholder {
  color: #444 !important;
  opacity: 1 !important;
}

/* Equalizer bars */
.profile-playlist-widget .pp-equalizer span {
  background: #000 !important;
  opacity: 1 !important;
}




/* =========================================================
   DECORATIVE SIDE IMAGE
   Fixed = stays in same place while scrolling
   ========================================================= */

.floating-side-image {
  position: fixed !important;

  /* POSITION
     increase top = move down
     increase left = move right
  */
  top: 260px !important;
  left: 600px !important;

  width: 160px !important;
  height: auto !important;

  z-index: 10;
}

.floating-side-image img {
  display: block;
  width: 100%;
  height: auto;
}


/* =========================================================
   LAYOUT CREDIT
   ========================================================= */

.cred {
  position: fixed;

  right: 10px;
  bottom: 5px;

  font-size: .8em;
}

</style>

<div class="floating-side-image">
  <img src="/proxy/image.php?url=https%3A%2F%2F64.media.tumblr.com%2F6bee928c6d73f351bab867c66a1d248c%2F2118611e97c576ef-0a%2Fs540x810%2F39601d8a5bb3a4d147fe63234b36aa068f671005.pnj" alt="">
</div>




<div class="cred">
  <p>
    Remixed by <a href="https://friendrewind.com/kaylamalone">Kayla</a>a&gt;. OG layout by
    <a href="https://friendrewind.com/nordligesauer">nordligesauer</a>
  </p>
</div>