OG MySpace 1.0 Layout

Author: XxkalithedeadlydollfacexX
Category: Classic
Created: September 18, 2026
Here’s a nonofficial 1.0 layout from MySpace with a twist, I marked where to put your image url IF you want you can change the colors on your layout and stuff. (Obviously the layout will be black at first until you dress her up it’s totally worth it AND if fixed the contact table people can add you n stuffy💕)
See Layout
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>
/* =========================================================
   MISS IMPERFECT — FRIENDREWIND
   FINAL VERSION — 4 FIXES ONLY
   ========================================================= */
/* =========================================================
   IMAGE URLS
   ========================================================= */
:root {
    /* 1. HEADER — */
    --my-header-image: url("YOUR CUSTOM HEADER");
    /* 2. MISS HERO */
    --my-hero-image: url("CUSTOM HERO BOX");
    /* 3. COMMENTS —  */
    --my-comment-image: url("CYSTOM COMMENTS BOX");
}
/* =========================================================
   COLORS
   ========================================================= */
:root {
    --miss-pink: #fe0084;
    --miss-hotpink: #f8448a;
    --miss-purple: #3b00ff;
    --miss-violet: #e55eff;
    --miss-lilac: #ea4af0;
    --miss-black: #000000;
    --miss-text: #c0c0c0;
}
/* =========================================================
   PAGE
   ========================================================= */
body.profile-page {
    background-color: #000000 !important;
    background-image:
        url("YOUR CUSTOM BACKGROUND") !important;
    background-repeat: repeat !important;
    background-attachment: fixed !important;
    background-position: top left !important;
    color: #c0c0c0 !important;
    font-family:
        "Lucida Sans Unicode",
        "Lucida Grande",
        Arial,
        sans-serif !important;
    font-size: 11px !important;
    line-height: 13px !important;
}
/* =========================================================
   MAIN WIDTH
   ========================================================= */
body.profile-page .master-container {
    width: 900px !important;
    max-width: calc(100% - 20px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
border-radius: 0 !important;
    box-shadow: none !important;
}
/* =========================================================
   TWO COLUMNS
   ========================================================= */
body.profile-page .row.profile {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}
/* =========================================================
   LEFT COLUMN
   ========================================================= */
body.profile-page .col.w-40.left {
    flex: 0 0 calc(42% - 6px) !important;
    width: calc(42% - 6px) !important;
    min-width: 0 !important;
    margin: 0 !important;
padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* =========================================================
   RIGHT COLUMN
   ========================================================= */
body.profile-page .col.right {
    flex: 1 1 calc(58% - 6px) !important;
    width: calc(58% - 6px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
/* =========================================================
   OLD MYSPACE TEXT
   ========================================================= */
body.profile-page,
body.profile-page p,
body.profile-page td,
body.profile-page th,
body.profile-page tr,
body.profile-page li,
body.profile-page div,
body.profile-page span,
body.profile-page table {
    font-family:
        "Lucida Sans Unicode",
        "Lucida Grande",
        Arial,
        sans-serif !important;
    font-size: 11px !important;
    line-height: 13px !important;
    color: #f8448a !important;
    text-transform: none !important;
}
/* NORMAL TEXT */
body.profile-page {
    color: #f8448a !important;
}
/* KEEP YOUR ABOUT ME PINK */
body.profile-page .blurbs p,
body.profile-page .blurbs div,
body.profile-page .blurbs span {
    color: #f8448a !important;
}
/* =========================================================
   BOLD
   ========================================================= */
body.profile-page b,
body.profile-page strong {
    color: #e55eff !important;
}
/* =========================================================
ITALIC
   ========================================================= */
body.profile-page i {
    font-family: Georgia, serif !important;
    font-size: 11px !important;
    color: #3800fe !important;
}
/* =========================================================
   LINKS
   ========================================================= */
body.profile-page a,
body.profile-page a:link,
body.profile-page a:visited,
body.profile-page a:active {
    color: #ec2d77 !important;
    font-family:
        "Lucida Sans Unicode",
        "Lucida Grande",
        Arial,
        sans-serif !important;
    font-size: 11px !important;
    font-weight: normal !important;
    line-height: 12px !important;
    text-decoration: none !important;
    letter-spacing: 0 !important;
}
body.profile-page a:hover {
    color: #e261ff !important;
    text-decoration: none !important;
}
/* =========================================================
   BLACK BOXES
   ========================================================= */
body.profile-page .contact,
body.profile-page .general-about,
body.profile-page .table-section,
body.profile-page .url-info,
body.profile-page .blog-preview,
body.profile-page .blurbs,
body.profile-page .friends,
body.profile-page .photos-preview,
body.profile-page .videos-preview {
    background: #000000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin-bottom: 10px !important;
}
/* =========================================================
   SECTION HEADINGS
   ========================================================= */
body.profile-page .heading {
    background: #000000 !important;
    border: 0 !important;
    border-bottom: 1px solid #fe0084 !important;
    border-radius: 0 !important;
    padding: 3px 6px !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
}
body.profile-page .heading h1,
body.profile-page .heading h2,
body.profile-page .heading h3,
body.profile-page .heading h4 {
    margin: 0 !important;
    padding: 0 !important;
    color: #f8448a !important;
    font-family:
        Georgia,
        "Times New Roman",
        serif !important;
    font-size: 20px !important;
    font-style: italic !important;
    font-weight: bold !important;
    letter-spacing: -1px !important;
line-height: 20px !important;
    text-align: left !important;
    text-transform: lowercase !important;
}
/* =========================================================
   SECTION
   ========================================================= */
body.profile-page .section {
    background: #000000 !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 6px !important;
    margin: 0 !important;
}
/* =========================================================
   PROFILE PICTURE
   KEEP VISIBLE
   ========================================================= */
body.profile-page .col.w-40.left .profile-pic {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
width: 150px !important;
    height: auto !important;
    margin: 10px auto !important;
    position: relative !important;
    z-index: 999 !important;
    text-align: center !important;
}
body.profile-page .col.w-40.left .profile-pic img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: cover !important;
}
body.profile-page .col.right .profile-pic {
    display: none !important;
}
/* =========================================================
   NETWORK GRAPHIC
   ========================================================= */
body.profile-page .bio-text {
    width: 100% !important;
    min-height: 274px !important;
    box-sizing: border-box !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background-color: #000000 !important;
    background-image:
        url("REPEAT HEROS BOX IMAGE") !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
    background-size: contain !important;
    font-size: 11px !important;
    line-height: 13px !important;
    color: #f8448a !important;
}
body.profile-page .bio-text * {
    color: #f8448a !important;
    font-size: 11px !important;
    line-height: 13px !important;
}
/* =========================================================
   CONTACT TABLE — REAL FRIENDREWIND BUTTON POSITIONS
   ========================================================= */

body.profile-page .contact {
    position: relative !important;

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

    margin: 10px auto !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    overflow: hidden !important;

    box-sizing: border-box !important;
}


/* HIDE ORIGINAL HEADING */

body.profile-page .contact > .heading {
    display: none !important;
}


/* REMOVE NATIVE BOX STYLING */

body.profile-page .contact .section,
body.profile-page .contact .inner,
body.profile-page .contact .f-row,
body.profile-page .contact .f-col {

    background: transparent !important;
    border: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   YOUR IMAGE
   ========================================================= */

body.profile-page .contact::before {

    content: "" !important;

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 300px !important;
    height: 150px !important;

    background-image:
        url("CUSTOM CONTACT TABLE") !important;

    background-repeat: no-repeat !important;

    background-position: center center !important;

    background-size: 300px 150px !important;

    z-index: 1 !important;

    pointer-events: none !important;
}


/* =========================================================
   REAL FRIENDREWIND LINKS
   ========================================================= */

body.profile-page .contact .f-row {
    position: absolute !important;

    left: 0 !important;

    width: 300px !important;

    z-index: 100 !important;
}


/* REMOVE ALL ORIGINAL VISUALS */

body.profile-page .contact .f-row .f-col {
    position: absolute !important;

    background: transparent !important;

    border: 0 !important;

    z-index: 100 !important;
}


body.profile-page .contact .f-row a {

    display: block !important;

    position: absolute !important;

    color: transparent !important;

    font-size: 0 !important;

    line-height: 0 !important;

    text-indent: -9999px !important;

    background: transparent !important;

    border: 0 !important;

    opacity: 0 !important;

    pointer-events: auto !important;

    z-index: 200 !important;
}


/* HIDE NATIVE ICONS */

body.profile-page .contact .f-row a img {

    display: none !important;
}


/* =========================================================
   ROW 1
   ADD FRIEND = LEFT "ADD ME"
   FAVORITES = RIGHT
   ========================================================= */

body.profile-page .contact .f-row:nth-child(1) {

    top: 40px !important;
    height: 45px !important;
}


body.profile-page .contact .f-row:nth-child(1) .f-col:nth-child(1) {

    left: 0 !important;
    top: 0 !important;

    width: 150px !important;
    height: 45px !important;
}


body.profile-page .contact .f-row:nth-child(1) .f-col:nth-child(2) {

    left: 150px !important;
    top: 0 !important;

    width: 150px !important;
    height: 45px !important;
}


/* =========================================================
   ROW 2
   MESSAGE = LEFT
   FORWARD = RIGHT
   ========================================================= */

body.profile-page .contact .f-row:nth-child(2) {

    top: 85px !important;
    height: 32px !important;
}


body.profile-page .contact .f-row:nth-child(2) .f-col:nth-child(1) {

    left: 0 !important;
    top: 0 !important;

    width: 150px !important;
    height: 32px !important;
}


body.profile-page .contact .f-row:nth-child(2) .f-col:nth-child(2) {

    left: 150px !important;
    top: 0 !important;

    width: 150px !important;
    height: 32px !important;
}


/* =========================================================
   ROW 3
   ========================================================= */

body.profile-page .contact .f-row:nth-child(3) {

    top: 117px !important;
    height: 33px !important;
}


body.profile-page .contact .f-row:nth-child(3) .f-col:nth-child(1),
body.profile-page .contact .f-row:nth-child(3) .f-col:nth-child(2) {

    width: 150px !important;
    height: 33px !important;
}


/* =========================================================
   KEEP IMAGE BELOW CLICKABLE LINKS
   ========================================================= */

body.profile-page .contact::before {
    z-index: 1 !important;
    pointer-events: none !important;
}

body.profile-page .contact .inner {
    position: relative !important;
    z-index: 50 !important;
}

body.profile-page .contact .f-row,
body.profile-page .contact .f-col,
body.profile-page .contact .f-row a {
    z-index: 100 !important;
}
/* =========================================================
   FINAL CONTACT LAYER
   IMAGE ABOVE — REAL BUTTONS UNDERNEATH
   ========================================================= */

/* Put the custom artwork ABOVE the FriendRewind buttons */
body.profile-page .contact::before {
    z-index: 9999 !important;
    pointer-events: none !important;
}


/* Put the REAL FriendRewind buttons underneath the artwork */
body.profile-page .contact .inner,
body.profile-page .contact .section,
body.profile-page .contact .f-row,
body.profile-page .contact .f-col,
body.profile-page .contact a {
    z-index: 1 !important;
}


/* Hide the native FriendRewind writing */
body.profile-page .contact a {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
}


/* Keep the actual links clickable */
body.profile-page .contact a {
    pointer-events: auto !important;
}


/* The artwork itself does NOT steal the click */
body.profile-page .contact::before {
    pointer-events: none !important;
}
/* =========================================================
   DETAILS
   ========================================================= */
body.profile-page .details-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    background: #000000 !important;
}
body.profile-page .details-table td {
    background: #000000 !important;
    border: 0 !important;
    padding: 2px 4px !important;
    color: #c0c0c0 !important;
    vertical-align: top !important;
}
body.profile-page .details-table td:first-child {
    width: 34% !important;
    background: #ea4af0 !important;
    color: #000000 !important;
    font-weight: bold !important;
    text-align: center !important;
}
body.profile-page .details-table td:first-child * {
    color: #000000 !important;
}
/* =========================================================
   ⭐⭐⭐ 4. MISS IMPERFECT HERO ⭐⭐⭐
   ========================================================= */
body.profile-page .col.right::before {
    content: "" !important;
    display: block !important;
   width: 100% !important;
    height: 300px !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    background-color: #000000 !important;
    background-image: var(--my-hero-image) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    border: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 5 !important;
}
/* =========================================================
   BLOG
   ========================================================= */
body.profile-page .blog-preview {
    background: #000000 !important;
    border: 0 !important;
    margin-bottom: 10px !important;
}
body.profile-page .blog-preview h4,
body.profile-page .blog-preview h4 a {
    color: #f8448a !important;
    font-family:
        Georgia,
        "Times New Roman",
        serif !important;
    font-size: 20px !important;
font-style: italic !important;
    font-weight: bold !important;
    text-transform: lowercase !important;
}
/* =========================================================
   BLURBS
   ========================================================= */
body.profile-page .blurbs {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px !important;
    padding: 0 !important;
    background: #000000 !important;
    border: 0 !important;
    overflow: visible !important;
}
body.profile-page .blurbs .section {
    background: #000000 !important;
    padding: 6px !important;
    margin: 0 !important;
}
body.profile-page .blurbs .section h4 {
    color: #f8448a !important;
    font-family:
        Georgia,
        "Times New Roman",
        serif !important;
font-size: 20px !important;
    font-style: italic !important;
    font-weight: bold !important;
    line-height: 20px !important;
    margin: 0 0 4px 0 !important;
}
/* =========================================================
   FRIENDS
   ========================================================= */
body.profile-page .friends {
    background: #000000 !important;
    border: 0 !important;
}
body.profile-page .friends-grid {
    background: #000000 !important;
}
body.profile-page .friends-grid img {
    border: 0 !important;
    border-radius: 0 !important;
}
/* =========================================================
   ⭐⭐⭐ 3. COMMENTS BACKGROUND ONLY ⭐⭐⭐
   ========================================================= */
body.profile-page #comments {
    position: relative !important;
    background-color: #000000 !important;
background-image: var(--my-comment-image) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    border: 0 !important;
    padding-top: 0 !important;
}
/* REMOVE THE OLD FAKE IMAGE SPACE */
body.profile-page #comments::before {
    content: none !important;
    display: none !important;
}
body.profile-page .comments-table {
    background: transparent !important;
    border: 0 !important;
}
body.profile-page .comments-table td {
    background: transparent !important;
    border: 0 !important;
    color: #c0c0c0 !important;
}
/* =========================================================
   ⭐⭐⭐ 2. CUSTOM HEADER + EXISTING LOGO ⭐⭐⭐
   ========================================================= */
body.profile-page nav {
    position: relative !important;
z-index: 100 !important;
}
body.profile-page nav .top {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 145px !important;
    min-height: 145px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: var(--my-header-image) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    border: 0 !important;
    border-bottom: 2px solid #fe0084 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}
/*
   LET THE CUSTOM IMAGE SHOW THROUGH
   THE HEADER'S SOLID CHILD BACKGROUND.
*/
body.profile-page nav .top > div,
body.profile-page nav .top > section {
    background-color: transparent !important;
    background-image: none !important;
}
/*
   KEEP FRIENDREWIND'S EXISTING LOGO VISIBLE
*/
body.profile-page nav .top img {
    position: relative !important;
    z-index: 100 !important;
    visibility: visible !important;
    opacity: 1 !important;
}
/* =========================================================
   ⭐⭐⭐ 1. SEARCH BAR
   ========================================================= */
/*
   DO NOT ABSOLUTELY POSITION THE SEARCH.
   FriendRewind's native nav places the search
   beside the logo in nav .top.
*/
body.profile-page nav .top form {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 200 !important;
margin: 0 !important;
}
/* Keep the actual search input visible */
body.profile-page nav .top input[type="search"],
body.profile-page nav .top input[type="text"] {
    visibility: visible !important;
    opacity: 1 !important;
}
/* =========================================================
   NAVIGATION
   ========================================================= */
body.profile-page nav .links {
    position: relative !important;
    z-index: 200 !important;
    background: #fe0084 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
body.profile-page nav .links a {
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: normal !important;
    text-decoration: none !important;
}
body.profile-page nav .links a:hover {
    color: #e261ff !important;
    background: #000000 !important;
}
/* =========================================================
   DO NOT ALTER IMAGE COLORS
   ========================================================= */
body.profile-page img {
    filter: none !important;
    border: 0 !important;
}
/* =========================================================
   MUSIC — LEAVE ALONE
   ========================================================= */
body.profile-page .music-bar {
    z-index: 9999 !important;
}
/* =========================================================
   VIDEO — LEAVE ALONE
   ========================================================= */
body.profile-page iframe {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 700px) {
    body.profile-page .master-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 6px !important;
        box-sizing: border-box !important;
    }
    body.profile-page .row.profile {
        display: block !important;
        width: 100% !important;
    }
    body.profile-page .col.w-40.left,
    body.profile-page .col.right {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
    }
    body.profile-page .col.w-40.left .profile-pic {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 150px !important;
        margin: 10px auto !important;
    }
    body.profile-page .col.w-40.left .profile-pic img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 150px !important;
        max-width: 150px !important;
        height: auto !important;
    }
    /* MISS IMPERFECT */
    body.profile-page .col.right::before {
        width: 100% !important;
        height: 250px !important;
        background-size: contain !important;
        background-position: center center !important;
    }
    /* HEADER */
    body.profile-page nav .top {
        height: 120px !important;
        min-height: 120px !important;
       background-size: cover !important;
        background-position: center center !important;
    }
}
/* =====================================================
   SEARCH BAR — HEADER AREA
   ===================================================== */
body.profile-page nav .top {
    position: relative !important;
    overflow: visible !important;
    z-index: 999999 !important;
}
body.profile-page nav .top form,
body.profile-page nav .top form[action*="search"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    /* MOVE SEARCH INTO THE HEADER */
    top: -78px !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 9999999 !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Search box */
body.profile-page nav .top form input[type="text"],
body.profile-page nav .top form input[type="search"] {
    width: 120px !important;
    height: 28px !important;
    box-sizing: border-box !important;
}
/* Search button */
body.profile-page nav .top form input[type="submit"],
body.profile-page nav .top form button {
height: 28px !important;
    box-sizing: border-box !important;
}
/* PROFILE / ONLINE BOX */
body.profile-page .col.w-40.left .general-about {
    height: 230px !important;
    min-height: 230px !important;
    background-image: url("CUSTOM BACKGROUND") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}  
</style>