Base/ my personal layout

Author: Morphine

Category: Minimal

Created: July 17, 2026

Bland layout, do whatever you want.
Features:

- interests in grid
- black and white colour scheme
- column contact table
- removes: navigation, footer, scrollbar, friends, contact & friends heading, mood, "heroes" section, "online now", comments like button, small icons (contact, report)

Not sure how compatible it is with pics/vids, badges and mutual friends showing. But you can change it all yourself. Don't be shy to text me if you need any help.

I'll make a better version later but here's this for now.

Comments (1)

Merevelocity 07/19/2026 5:51 PM

Cute! Love this

You must log in to comment.

CSS Code

<style>
  @import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');
  body{
    background:none;
    filter:grayscale(100%);
  }
  main{
    font-family: "Cutive Mono", monospace;
    font-weight: 400;
    font-style: normal;
    width:1000px;
    margin-left:-100px;
  }
  main .left{
    width:60%!important;
  }
  footer, .nav-logo.logo, .top-nav, .profile-info, ::-webkit-scrollbar, .friends .heading, .url-info, .myspace-header, .friends:not(#comments), .details-table tr:nth-child(6), .profile-mood, .online, .profile .contact .heading, .cb-like-btn, .icon{
    display:none!important;
  }
  .general-about {
    display:flex;
    flex-direction:column;
    width:350px!important;
  }
  .table-section.interests{
    border:1px solid #000;
  }
  .profile .contact{
    border:none;
    border-left:1px solid gray!important;
   }
  .contact .inner a img {
    font-size: 0;
  }
  .contact .inner a img:before {
    font-size: 1em;
    display: block
  }
  .contact .inner a:before {
  content: ""
  }
  .contact .inner .f-row .f-col a:before {
    display: inline-block;
    content: " > ";
    background-size: 100%;
    width: 16px;
    height: 16px;
    animation:.3s 5 blink
  }
  .profile .contact .inner, .profile .contact .inner .f-row, .profile .contact .inner .f-row .f-col {
	display: block;
	margin: 0 0 7px 5px;
	align-items: left;
  }
  .details-table td {
    display:inline-block;
    width:100%!important;
 }
.details-table tr {
    display:inline-block;
    width:48%;
    margin-bottom:5px;
    margin-left:5px;
    border:1px solid #000;
}
.details-table td:last-child {
    overflow-y:scroll;
    height:150px!important;
    width:100%;
}
.details-table td:first-child {
    margin-bottom:1px;
    border-bottom:1px solid #000;
  }
  * .heading{
    background:transparent!important;
    border:none;
    border-bottom:1px solid black!important;
    color:black!important;
  }
  table.comments-table {
    display: block;
    background:#fff;
  }
  table.comments-table,.comment-replies{
    border:none;
  }
  .comments-table td:first-child,.comments-table td{
    background:#fff;
    border:none;
  }
  .comments-table td:first-child{
    text-align:left;
    font-size:0.7em;
  }
  .comments-table td:first-child img:not(.icon){
    border-radius:0px;
    border:none!important;
  }
  .cb-actions button{
    border-radius:0px;
    border-width:1px!important;
    border-style:solid;
  }
  .cred{
    position:fixed;
    bottom:5px;
    right:10px;
    font-size:0.8em;
  }
</style>
<div class="cred">
  <p>layout by <a href="https://friendrewind.com/nordligesauer">nordligesauer</a></p>    
</div>