Brent Pantera's profile picture

Published by

published
updated

Category: SpaceHey

My Profile's Style Code & How To Use It

Hi Everyone!

A few of my friends that are just getting started on here, have liked my profile's style and have asked me to send it to them as well as how to apply it.

Just in case anyone wants to use my style code as a starting point for their own profile's customization, simply copy and paste everything below into the "About Me:" section when editing your profile.

If you are very new to this type of customization, just know you only need to edit the options under the ":root{" section and before the "body{" section when customizing your profile's physical look. 

Everything between "<p></p>" is just formated text. 

"<br/>" just means a blank line.


I also cleaned it up so that you can hit save and see how it looks without my own information being left in it.

|**COPY AND PASTE EVERYTHING BELOW THIS INTO "ABOUT ME:" SECTION**|

<p>Age: ?</p>
<p>Gender: ?</p>
<p>Pronoun: ?</p>
<p>Orientation: ?</p>
<p>Label: ?</p>
<p>Location: ?</p>
<br/>
<p><b>Description:</b></p>
<p>1ST PARAGRAPH TEXT GOES HERE</p>
<br/>
<p>2ND PARAGRAPH TEXT GOES HERE </p>

<style>
:root{
--transparency: 0.5;
--background_image: url(https://BACKGROUND.IMAGELINKGOES.HERE);
--font-family: Consolas, monaco, "Ubuntu Mono", courier, monospace !important;
--headers: #ffffff;
--links: ##3a577e;
--onlinecolor: #3a577e;
--mynamecolor: #000000;
--friendscount: #ffffff;
--friends: #3a577e;
--text: #000000;
--blogtextcolor: #cb3158;
--names: black;
--mynamesize: 20px;
--blogtextsize: 15px;
--curve: 5px;
--blogcurve: 10px;
--moodcurve: 10px;
--mypicturecurve: 10px;
}
  body {  
 background-image: var(--background_image) !important; 
 background-color:white !important;
 background-position:Center Center; 
 background-attachment:fixed; 
 background-repeat:repeat; 
 border-width:0px; 
 border-style:Solid; 
 border-radius: var(--curve) !important;
 scrollbar-face-color:000000; 
 scrollbar-highlight-color:2288AA; 
 scrollbar-3dlight-color:2288AA; 
 scrollbar-shadow-color:000000; 
 scrollbar-darkshadow-color:000000; 
 scrollbar-arrow-color:2288AA; 
 scrollbar-track-color:000000; 
 } 
.profile-pic img{
/* transform: rotate(-5deg) !important; */
outline:none !important;
border-radius: var(--mypicturecurve) !important;
filter:hue-rotate(var(--hue)) drop-shadow(2px 2px black) !important;
}
.friends-grid img{
outline:none !important;filter: opacity(90%) !important;
width:80% !important; height:80% !important;
border-radius: var(--curve) !important;
filter:hue-rotate(var(--hue)) !important;
}
h3, h4, h5, .url-info b{
color: var(--headers) !important;
}
a{
color: var(--links) !important;
}
p, h2{
color: var(--text) !important;
}
h1{
color: var(--mynamecolor) !important;
}
.count{
color: var(--friendscount) !important;
}
.friends a p{
color: var(--friends) !important;
}
.section h4{
color: var(--names) !important;
}
.online{
color: var(--onlinecolor) !important;
}
.section{
color: var(--text) !important;
}
h1{ 
font-size: var(--mynamesize) !important;
text-align: center;
backdrop-filter: blur(5px);
background-image: linear-gradient(90deg, rgba(255,0,0,0.6054796918767507) 0%, rgba(241,255,0,0.5886729691876751) 24%, rgba(0,255,29,0.5830707282913166) 45%, rgba(22,104,195,0.5802696078431373) 64%, rgba(126,58,108,0.5746673669467788) 80%) !important;
border-radius: var(--curve) !important;
background-color:var(--box_color_and_seethru) !important;
text-transform:none !important;
}
h1, h2, h3, h4, h5, a, p, nav label, .section{ 
font-family: var(--font-family) !important;
}
.heading, .url-info, .blurbs, .details, .friends, .contact, .table, .table-section{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
border: var(--borders) !important;
background-image: linear-gradient(90deg, rgba(255,255,255,0.5214460784313726) 0%, rgba(255,255,255,0.5382528011204482) 100%) !important;
}
.mood{
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--moodcurve) !important;
border: var(--borders) !important;
background-image: linear-gradient(90deg, rgba(255,255,255,0.5214460784313726) 0%, rgba(255,255,255,0.5382528011204482) 100%) !important;
padding-left:7px !important;
}
footer{
background-image: linear-gradient(90deg, rgba(205,205,205,0.6895133053221288) 0%, rgba(255,255,255,0.4009978991596639) 100%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
border: var(--borders) !important;
}
#comments, .blurbs, .friends, .mood, .contact, .table-section{
backdrop-filter: blur(5px);
border:none !important;
background-color:var(--box_color_and_seethru)!important;
border-radius: var(--curve) !important;
}
.blog-preview h4{
font-size: var(--blogtextsize) !important;
background-image: linear-gradient(90deg, rgba(3,42,92,0.44021358543417366) 0%, rgba(3,42,92,0.43461134453781514) 80%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
border: var(--borders) !important;
backdrop-filter: blur(5px);
padding-left:7px !important;
}
.blog-preview p{
background-image: linear-gradient(90deg, rgba(255,255,255,0.5214460784313726) 0%, rgba(255,255,255,0.5382528011204482) 100%) !important;
font-size: var(--blogtextsize) !important;
font-weight: bold !important;
color: var(--blogtextcolor) !important;
outline:none !important;filter: opacity(90%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
border: var(--borders) !important;
backdrop-filter: blur(5px);
padding-left:7px !important;
}
.heading{
background-image: linear-gradient(90deg, rgba(3,42,92,0.44021358543417366) 0%, rgba(3,42,92,0.43461134453781514) 80%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var(--curve) !important;
border: var(--borders) !important;
}
td {
background-color:rgba(0, 0, 0, 0.0) !important;
background-image: linear-gradient(90deg, rgba(58,87,126,0.2665441176470589) 0%, rgba(58,87,126,0.24413515406162467) 80%) !important;
}
.contact, .f-row, .f-col{
padding-left:0px !important;margin-left:0px !important;margin-right:0px !important;padding-right:0px !important;
}
.contact{
padding-left:2px !important;
}
.f-row{
margin-bottom:3px !important;padding-bottom:0px !important;padding-top:2px !important;margin-top:0px !important;
}
.f-col a{
margin-left:-2px !important;padding-left:-2px !important;
}
.contact{padding-bottom:12px !important;
}
.inner img{
outline:none !important;
filter: hue-rotate(var(--hue)) drop-shadow(1px 1px 2px midnightblue) !important;
border-radius: var(--curve) !important;
}
code{  word-break: break-all !important;}
nav{
background-image: linear-gradient(90deg, rgba(0,0,0,0.1292892156862745) 0%, rgba(0,0,0,0.0760679271708683) 100%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var() !important;
border: var(--borders) !important;
}
nav ul{
background-image: linear-gradient(90deg, rgba(0,0,0,0.1292892156862745) 0%, rgba(0,0,0,0.0760679271708683) 100%) !important;
background-color:var(--box_color_and_seethru) !important;
border-radius: var() !important;
border: var(--borders) !important;
}
nav img{filter: opacity(80%) !important;}
nav ul a img, .mood a img{display:none !important;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;}
.url-info{display:none !important;}
main{background-color:rgba(0, 0, 0, 0.0); !important;}
main{border-radius: var(--curve) !important;}
</style>


4 Kudos

Comments

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

Echoes of Savages

Echoes of Savages's profile picture

Thank you for putting this out there!!! I'm having to relearn this stuff :-/


Report Comment



My pleasure bud!

by Brent Pantera; ; Report

Dustin

Dustin's profile picture

Thank you for this!

I'm having to learn this now that all 26 million pre-made Myspace codes and layout websites are history lol


Report Comment



That's exactly what I discovered too hahaha

by Brent Pantera; ; Report