MYSPACE93 THEME by ME

Sharing this in this blog because posting layouts is busted for the time being. Paste this anywhere in your profile's blurb section (the "About Me" and "Who I'd Like to Meet" sections) with <style> and </style> surrounding it Like this VVV
spent about 3 hours? on this and it came out pretty good. I even added some mobile accessibility with the header bars. anyways, please enjoy.
oh and also you should ctrl+g(or f) search for "This User" and replace it with your username. It makes it look more real. Also you can replace the background for ".container .profile .left .table-section" with whatever fake mp3 image, just make sure to adjust the height so it fits and looks good.
  .container {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    width: auto !important;
    margin-bottom: 0px;
}

body {
    background: #fff;
    font-family: Arial;
    padding-top: 45px;
    font-size: 15px !important;
    margin: 8px;
}

.top {
    all: unset;
    font-family: Arial;
    font-size: 15px;
    background: #003399 !important;
    color: #fff;
    width: calc(100% - 15px);
    height: 22px;
    padding: 5px !important;
    left: 0px;
    top: 0px;
    margin-bottom: 40px;
    border-bottom: 1px solid black;
    padding-left: 10px !important;
    padding-top: 6px !important;
    overflow: hidden;
    z-index: 300;
    position: fixed !important;
}

ul.links {
    all: unset;
    font-family: Arial;
    background: #6699cc;
    font-size: small;
    margin: 0px;
    padding: 5px;
    padding-left: 10px;
    padding-top: 4px;
    position: fixed;
    left: 0;
    top: 34px;
    width: calc(100% - 15px);
    color: #000;
    height: 15px;
    z-index: 300;
    text-align: left;
    overflow: hidden;
    line-height: 18px;
}

ul.links li {
    display: inline;
    color: #fff;
    text-decoration: none;
}

ul.links li a {
    color: #fff;
    text-decoration: none;
}



a[href="https://spacehey.com/home"], a[href="https://spacehey.com/home"] img, a[href="https://spacehey.com"], a[href="https://spacehey.com"] img {
    height: 25px !important;
    width: 98px !important;
}






.top .right {
    color: transparent;
}

.top .right a {
    color: white !important;
}

nav .top .center {
    text-align: right;
    margin-right: 11px;
}

.row.profile {
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
}

.row.profile .left {
    float: left;
    width: calc(40% - 20px);
    padding: 10px;
    display: block;
}


.row.profile .right {
    float: right;
    width: calc(60% - 20px);
    padding: 10px;
    display: block;
}

span[itemprop="name"] h1 {
    display: block;
    margin: unset;
    font-size: 1.5em !important;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
    unicode-bidi: isolate;
}

span[itemprop="name"] {
    display: block;
}

span[itemprop="name"] h1 {}

.general-about {
    display: table-row;
    unicode-bidi: isolate;
    border-color: inherit;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    vertical-align: middle;
}

.profile-pic {
    display: table-cell !important;
    vertical-align: inherit;
    unicode-bidi: isolate;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    margin: 0px !important;
    padding: 1px;
    height: unset !important;
    float: unset !important;
}

img.pfp-fallback {}

.profile-pic img {
    width: 200px;
    margin-right: 20px;
    cursor: zoom-in;
    image-orientation: from-image;
    max-width: 200px !important;
    max-height: 200px !important;
    overflow-clip-margin: content-box;
    overflow: clip;
    border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    image-orientation: from-image;
}

main {
    padding: 0px;
    font-size: unset !important;
}

html {
    line-height: unset !important;
}

.details {
    display: table-cell !important;
    vertical-align: inherit;
    unicode-bidi: isolate;
    font-size: 15px !important;
}

.details p:nth-child(2)::before {
    content: "18 years old";
    display: block;
}

p, ol li, ul:not(nav .links):not(footer .links) li {
    font-size: unset !important;
}

.mood {
    display: none !important;
}

p.online img {
    width: 0px;
}

p.online {
    color: transparent;
    background: url("https://external-media.spacehey.net/media/sNnLr3Gd9KLLsThUvUj8fuu60Z0OP215BQ1AAff0k7k8=/https://myspace.windows93.net/img/online.gif");
    background-repeat: no-repeat;
    background-size: contain;
    image-rendering: pixelated;
    margin-top: 10px;
    display: block;
    height: 20px;
    width: 80px;
}

.contact {
    margin: unset !important;
    border: 1px solid #000 !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
    display: block !important;
}

.contact .heading {
    background: #6699cc !important;
    color: white !important;
    padding: 3px !important;
    padding-bottom: 4px !important;
    padding-left: 6px !important;
}

.contact {}

.contact a {
    font-size: small;
    color: blue;
    display: inline-block;
}

.contact {}

.contact a img {
    filter: grayscale(0.6) contrast(1.5);
    display: inline-block;
}

.f-row {
    margin: 0px !important;
    padding-top: 7px;
    display: inline-block;
}

.f-col {
    display: inline-block;
}

.f-row:nth-child(4) {margin-bottom: 9px !important;}

.f-row {
    font-size: unset !important;
}

.url-info {
    border: solid 2px #69c;
    padding: 2px !important;
    margin: 0px !important;
    width: unset;
}

.container .profile .left .table-section {
   background:url("https://external-media.spacehey.net/media/srS8T9i88SWbppfLpphGnvc3LkRgMfRohlX0xmTuGj8M=/https://file.garden/ZGLKnGLYvB6VkHiZ/Myspace/SpaceHey/Mscusi.png");
   border: 0px !important;
   height: 58px;
   background-size: contain;
   image-rendering: -webkit-optimize-contrast;
   margin-top: 20px !important;
   margin-bottom: 20px !important;
   background-repeat: no-repeat;
}

.profile .contact, .profile .url-info, .setting-section, .home-actions {
    width: unset !important;
}

.table-section {}

.table-section:has(table.details-table) .heading, .table-section.table-section:has(table.details-table) .inner {
    display: none;
}

table.details-table {}

p.edit-link.right-side {}

table.details-table {}

.table-section:nth-child(7) {
    display: none;
}

.table-section * {
    border: 0px;
}

.col.w-40.left {}

.profile-info {

}

main .right::before {
    content: "This User is in your extended network";
    border: 1px solid #000;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 15px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    display: block;
    padding-block-start: 1em;
    padding-block-end: 1em;
    padding-inline-start: 0px;
    padding-inline-end: 0px;
    font-weight: bolder;
    font-size: 1.17em;
}

h4 {}

.blog-preview h4 {
    overflow: hidden;
    width: 249px;
    display: flex;
    flex-direction: column;
    height: 19px;
}

.profile .blurbs .heading, .profile .friends .heading {
    background: #fc9;
    color: #cc6633;
    padding: 0px 0px 0px 4px;
}

.profile .blurbs .section h4 {
    color: #cc6633;
    margin-bottom: 0px !important;
    margin-block-start: 1.33em;
    margin-block-end: 1.33em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

a.more {
    position: relative;
    top: 362px;
    color: transparent;
    font-size: 15px !important;
    text-decoration: underline;
    left: 57px;
}

span.count {
    color: #f93;
}

.friends-grid {
    padding-left: 10px;
    padding-right: 10px;
}

.person {
    max-width: 25%;
    display: inline-grid !important;
    width: calc(24% - 6px)  !important;
    padding: 2px  !important;
    text-align: center;
}

.profile .friends .person p {color: #0000EE  !important;margin: 0px;}

img.icon.verified {
    display: none !important;
}

.profile .friends .person img:not(.icon) {
    width: 100%;
    max-height: 300px;
    max-width: 300px;
}

.friends {
    margin-bottom: 57px;
}

a.more {}

a.more::before {
    content: "View All of This User's Friends";
    color: #0000EE;
    text-decoration: underline;
}

div#comments {}

div#comments .heading {
    background: #6699cc;
    color: white;
    padding: 3px;
    padding-bottom: 4px;
    padding-left: 6px;
    margin-bottom: 10px;
}

div#comments .heading h4 {
    font-size: 0px;
}

div#comments .heading h4::after {
    content: "Leave a Comment";
    font-size: 15px !important;
    margin-bottom: 10px;
}

b {}

div#comments {}

div#comments .inner p b:has(a[href="/addcomment?id=133171"]) {font-size: 0px;}

a[href="/addcomment?id=133171"] {
    font-size:small;
    color: transparent;
    border: 1px solid #422918;
    width: 100%;
    height: 100px;
    display: inline-block;
    margin-bottom: 20px;
}

div#comments .inner p b:has(a[href="/addcomment?id=133171"]):after {
    content: "Comments";
    font-size: 15px !important;
    background: #6699cc;
    color: white;
    padding: 3px;
    padding-bottom: 4px;
    padding-left: 6px;
    width: 100%;
    display: block;
}

div#comments:has(a[href="/addcomment?id=133171"]:hover) .heading h4::after {
        content: "CLICKING THAT WILL TAKE YOU TO THE COMMENTS-LEAVING PAGE. IT'S NOT A REAL TEXTBOX. IT'S JUST FOR DECORATION. HOPEFULLY THIS WOULD'VE PREVENTED YOU FROM CLICKING IT ON ACCIDENT. BYE NOW.";
    font-size: 15px !important;
    animation: warning 2s linear infinite;
}

@keyframes warning {
    33% {color: yellow;}
    66% {color: red;}
    100% {color: white;}
}

div#comments .inner {
    padding: 0px;
}

div#comments {}

.comments-table td:first-child {
    background: #f93;
    width: 25%;
    padding: 10px;
    vertical-align: top;
    overflow: hidden;
}

.comments-table td {
    width: 75%;
    background: #fc9;
    padding: 10px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

@media only screen and (max-width: 768px){ 
 .profile .left,  .profile .right {
        width: auto !important;
        float: none !important;
 }
 input#q {
     width: 31px;
     height: 17px;
     vertical-align: middle;
 }
 ul.links {
    height: 33px !important;
    text-align: center !important;
 }
 form[action="https://spacehey.com/search"] button[type="submit"] {
    font-size: 11px;
 }
 a.more {
    top: 350px !important; 
 }
}



@media (max-width: 30em) {
  nav .top .center form {
        display: inline !important;
        width: 10px;
 }
  nav .top .center {
        width: 100px;
        height: 24px;
 }
  nav .top .left {
        width: 119px;
        height: 17px;
 }
  label[for="q"] {
    width: 51px !important;
    display: inline-block;
    overflow: hidden;
    line-height: 21px;
    height: 26px;
 }
    
  .search-wrapper {
    width: 37px !important;
    flex: 0 !important;
 }
  nav .top .right {
    position: fixed;
    top: unset;
    right: 46px;
    float: right;
 }
 nav .top .center {
    flex: 0 !important;
    text-align: center;
 }
}


.top .right {
    float: right;
}

.top .left {
    margin-right: auto;
}
0 Kudos
Comments

Displaying 0 of 0 comments ( View all | Add Comment )