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.
"<br/>" just means a blank line.
<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>
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
Echoes of Savages
Thank you for putting this out there!!! I'm having to relearn this stuff :-/
My pleasure bud!
by Brent Pantera; ; Report
Dustin
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
That's exactly what I discovered too hahaha
by Brent Pantera; ; Report