how should you use this site?
i think the best asset of this site is our layout generator.
this allows you to input any html code into the preview profile and see that html take place in real time. so you can see exactly how the html
code is working. no need to click save and than view the page - it all happens right in front of you.
using the layout generator, you can build your entire profile in real time, than just simply copy and paste the entire code into your spacehey edit profile page
for an instantly completed profile!
join the group!
if you find the website helpful, please consider joining the html spacehey group, where you can discuss
profile customization with other spacehey users, and post any questions that you have about html and customization!
want to contribute?
if you would like to be added to our layout creators section, become a mod in the group, or contribute code to add to this site, feel free to
post a thread in the html group, or
send me a message.
spacehey html:
the ultimate guide
welcome
the basics:
- add an image to your profile:
~ replace the word "link" in the code below with the direct link of the image.
~ you can right click on almost any photo on the internet and click "copy image address" to get direct link.
~ you can upload your own images to postimages.org to get a direct link.
<img src="link">
- add a text link to your profile:
~ replace the word "link" in the code below with the direct link of webpage.
<a href="link">link text</a>
- add a image link to your profile:
~ replace the word "image" in the code below with the direct link of image, and replace the word "link" with the webspage you want the image to link to.
<a href="link"><img src="image"></a>
- bold text
- italic text
testing italic text
<i>your italic text here</i>
- underline text
testing underline text
<u>your underlined text here</u>
- strikethrough text
testing strikethrough text
<s>your text with strikethrough here</s>
- adding a line break (make lists and paragraph format)
to add a line break, use the following code:
<br>
to create a space use two <br> codes in a row, like this:
<br><br>
simple scroll box
<div style="width: auto; height: 200px; border: 1px solid black; overflow:scroll; padding: 2px;">
text and images you want in the scroll box here.
</div>
~ replace the word "link" in the code below with the direct link of the image.
~ you can right click on almost any photo on the internet and click "copy image address" to get direct link.
~ you can upload your own images to postimages.org to get a direct link.
<img src="link">
- add a text link to your profile:
~ replace the word "link" in the code below with the direct link of webpage.
<a href="link">link text</a>
- add a image link to your profile:
~ replace the word "image" in the code below with the direct link of image, and replace the word "link" with the webspage you want the image to link to.
<a href="link"><img src="image"></a>
- bold text
testing bold text
<b>your bold text here</b>- italic text
testing italic text
<i>your italic text here</i>
- underline text
testing underline text
<u>your underlined text here</u>
- strikethrough text
<s>your text with strikethrough here</s>
- adding a line break (make lists and paragraph format)
to add a line break, use the following code:
<br>
to create a space use two <br> codes in a row, like this:
<br><br>
simple scroll box
<div style="width: auto; height: 200px; border: 1px solid black; overflow:scroll; padding: 2px;">
text and images you want in the scroll box here.
</div>
background codes:
how to use backgrounds:
upload your background to a site like postimages.org to get a direct link. than paste that direct link into the codes below where it says "PICTURE URL"
main profile page
one large photo background:
<style>
body{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
body{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
inner profile page
one large photo background:
<style>
main{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
main{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
profile top
one large photo background:
<style>
.top{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.top{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
headers
one large photo background:
<style>
.heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
h4's
one large photo background:
<style>
h4{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
h4{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
navigation links
one large photo background:
<style>
.links{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.links{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
search users box
one large photo background:
<style>
.top input{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.top input{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
profile name
one large photo background:
<style>
h1{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
h1{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
general about section
one large photo background:
<style>
.general-about{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.general-about{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
mood
one large photo background:
<style>
.mood{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.mood{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
contact box
one large photo background:
<style>
.contact{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.contact{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
interests & social links sections
one large photo background:
<style>
.table-section .heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.table-section .heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
blogs
one large photo background:
<style>
.blog-preview{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.blog-preview{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
blurbs
one large photo background:
<style>
.blurbs{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.blurbs{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
friends
one large photo background:
<style>
.friends{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.friends{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
comments
one large photo background:
<style>
.comments-table td{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.comments-table td{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
footer
one large photo background:
<style>
footer{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
footer{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
upload your background to a site like postimages.org to get a direct link. than paste that direct link into the codes below where it says "PICTURE URL"
main profile page
one large photo background:
<style>
body{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
body{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
inner profile page
one large photo background:
<style>
main{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
main{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
profile top
one large photo background:
<style>
.top{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.top{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
headers
one large photo background:
<style>
.heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
h4's
one large photo background:
<style>
h4{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
h4{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
navigation links
one large photo background:
<style>
.links{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.links{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
search users box
one large photo background:
<style>
.top input{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.top input{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
profile name
one large photo background:
<style>
h1{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
h1{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
general about section
one large photo background:
<style>
.general-about{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.general-about{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
mood
one large photo background:
<style>
.mood{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.mood{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
contact box
one large photo background:
<style>
.contact{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.contact{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
interests & social links sections
one large photo background:
<style>
.table-section .heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.table-section .heading{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
blogs
one large photo background:
<style>
.blog-preview{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.blog-preview{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
blurbs
one large photo background:
<style>
.blurbs{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.blurbs{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
friends
one large photo background:
<style>
.friends{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.friends{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
comments
one large photo background:
<style>
.comments-table td{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
.comments-table td{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
footer
one large photo background:
<style>
footer{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: NO-REPEAT !important;
background-position: top left !important;
background-size: cover !important; }
</style>
tiled background:
<style>
footer{
background-color: COLOR !important;
background-image: url('PICTURE URL') !important;
background-attachment: FIXED !important;
background-repeat: REPEAT !important;
background-position: top left !important;
}
</style>
profile text & links codes:
change profile name color
<style>h1{color: COLOR !important;}</style>
Change Profile Name Size
<style>h1{font-size: SIZEpx !important;}</style>
Change Profile Name Font
<style>h1{font-family: FONT !important;}</style>
Change Profile Text Size
<style>body{font-size: SIZE !important;}</style>
Change Profile Text Color
<style>body{color: COLOR !important;}</style>
Change Profile Text Font
<style>body{font-family: FONT !important;}</style>
Change Profile Link Color
<style>a{color: COLOR !important;}</style>
Change Profile Link Size
<style>a{font-size: SIZE !important;}</style>
Change Profile Link Font
<style>a{font-family: FONT !important;}</style>
Change Navigation Link Color
<style>.links a{color: COLOR !important;}</style>
Change Navigation Link Size
<style>.links a{font-size: SIZE !important;}</style>
Change Navigation Link Font
<style>.links a{font-family: FONT !important;}</style>
Give Your Interests Sections Custom Titles (Music, Movies, etc)
<style>
table, th, td {
border: 0px solid;
}
:root {
--topic1: "one";
--topic2: "two";
--topic3: "three";
--topic4: "four";
--topic5: "five";
--topic6: "six";
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .details-table tr td:first-child p::after{ color:var(--links) !important; letter-spacing:normal !important; text-shadow: 2px 2px black !important; filter: brightness(95%) !important; } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); }
</style>
<style>h1{color: COLOR !important;}</style>
Change Profile Name Size
<style>h1{font-size: SIZEpx !important;}</style>
Change Profile Name Font
<style>h1{font-family: FONT !important;}</style>
Change Profile Text Size
<style>body{font-size: SIZE !important;}</style>
Change Profile Text Color
<style>body{color: COLOR !important;}</style>
Change Profile Text Font
<style>body{font-family: FONT !important;}</style>
Change Profile Link Color
<style>a{color: COLOR !important;}</style>
Change Profile Link Size
<style>a{font-size: SIZE !important;}</style>
Change Profile Link Font
<style>a{font-family: FONT !important;}</style>
Change Navigation Link Color
<style>.links a{color: COLOR !important;}</style>
Change Navigation Link Size
<style>.links a{font-size: SIZE !important;}</style>
Change Navigation Link Font
<style>.links a{font-family: FONT !important;}</style>
Give Your Interests Sections Custom Titles (Music, Movies, etc)
<style>
table, th, td {
border: 0px solid;
}
:root {
--topic1: "one";
--topic2: "two";
--topic3: "three";
--topic4: "four";
--topic5: "five";
--topic6: "six";
}
.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;} .details-table tr td:first-child p::after{ color:var(--links) !important; letter-spacing:normal !important; text-shadow: 2px 2px black !important; filter: brightness(95%) !important; } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); }
</style>
border codes:
main profile
<style>
main{
border: 1px solid black !important;
}
</style>
Profile Top
<style>
.top{
border: 1px solid black !important;
}
</style>
Spacehey Logo
<style>
.logo{
border: 1px solid black !important;
}
</style>
Search Users Box
<style>
.top input{
border: 1px solid black !important;
}
</style>
Buttons
<style>
button{
border: 1px solid black !important;
}
</style>
navigation links
<style>
.links{
border: 1px solid black !important;
}
</style>
profile name
<style>
h1{
border: 1px solid black !important;
}
</style>
profile photo
<style>
.profile-pic img{
border: 1px solid black !important;
}
</style>
general-about
<style>
.general-about{
border: 1px solid black !important;
}
</style>
Mood
<style>
.mood{
border: 1px solid black !important;
}
</style>
Contact Box
<style> .contact{
border: 1px solid black !important;
}
</style>
url box
<style>
.url-info{
border: 1px solid black !important;
}
</style>
interests & social links sections
<style>
table.details-table{
border: 1px solid black !important;
}
.profile .details-table td{
border: 1px solid black !important;
}
</style>
"XXX" is your friend box
<style>
.profile-info{
border: 1px solid black !important;
}
</style>
blogs
<style>
.blog-preview{
border: 1px solid black !important;
}
</style>
friends and comments
<style>
.friends{
border: 1px solid black !important;
}
</style>
footer
<style>
footer{
border: 1px solid black !important;
}
</style>
<style>
main{
border: 1px solid black !important;
}
</style>
Profile Top
<style>
.top{
border: 1px solid black !important;
}
</style>
Spacehey Logo
<style>
.logo{
border: 1px solid black !important;
}
</style>
Search Users Box
<style>
.top input{
border: 1px solid black !important;
}
</style>
Buttons
<style>
button{
border: 1px solid black !important;
}
</style>
navigation links
<style>
.links{
border: 1px solid black !important;
}
</style>
profile name
<style>
h1{
border: 1px solid black !important;
}
</style>
profile photo
<style>
.profile-pic img{
border: 1px solid black !important;
}
</style>
general-about
<style>
.general-about{
border: 1px solid black !important;
}
</style>
Mood
<style>
.mood{
border: 1px solid black !important;
}
</style>
Contact Box
<style> .contact{
border: 1px solid black !important;
}
</style>
url box
<style>
.url-info{
border: 1px solid black !important;
}
</style>
interests & social links sections
<style>
table.details-table{
border: 1px solid black !important;
}
.profile .details-table td{
border: 1px solid black !important;
}
</style>
"XXX" is your friend box
<style>
.profile-info{
border: 1px solid black !important;
}
</style>
blogs
<style>
.blog-preview{
border: 1px solid black !important;
}
</style>
friends and comments
<style>
.friends{
border: 1px solid black !important;
}
</style>
footer
<style>
footer{
border: 1px solid black !important;
}
</style>
hiding codes:
hide top links
<style>.links{display: none !important;}</style>
hide profile name
<style>h1{display: none !important;}</style>
hide profile photo
<style>profile-pic img{display: none !important;}</style>
Hide mood
<style>.mood p, mood a{font-size: 0px !important;} .mood{border: 0px !important; background-color: transparent !important;}</style>
hide contact table heading
<style>.contact .heading{display: none !important;}</style>
hide contact table icons
<style>.contact .inner img{display: none !important;}</style>
hide url box
<style>.url-info{display: none !important;}</style>
hide interests table
<style>.table-section:nth-child(6){display: none;}</style>
hide social links table
<style>.table-section:nth-child(7) {display: none;}</style>
hide interests table & social links heading
<style>.table-section .heading{display: none !important;}</style>
hide "xxx" is your friend box
<style>.profile-info{display: none !important;}</style>
hide blogs table
<style>.blog-preview{display: none !important;}</style>
hide blurbs heading
<style>.blurbs .heading{display: none !important;}</style>
Hide "About Me" & "Who I'd Like To Meet" Headings
<style>.blurbs .section h4{display: none !important;}</style>
hide friends
<style>.friends:not(#comments.friends) {display: none;}</style>
Hide Comments - (Does Not Hide "Leave A Comment" & "View All" Links)
<style>.comments-table{display: none !important;}</style>
Hide Comments - (Hides "Leave A Comment" & "View All" Links)
<style>#comments.friends{display: none !important;}</style>
Hide Specific Interests Table Sections
Hide General
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(1){display:none;}</style>
Hide Music
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(2){display:none;}</style>
Hide Movies
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(3){display:none;}</style>
Hide Television
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none;}</style>
Hide Books
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none;}</style>
Hide Heroes
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(6){display:none;}</style>
<style>.links{display: none !important;}</style>
hide profile name
<style>h1{display: none !important;}</style>
hide profile photo
<style>profile-pic img{display: none !important;}</style>
Hide mood
<style>.mood p, mood a{font-size: 0px !important;} .mood{border: 0px !important; background-color: transparent !important;}</style>
hide contact table heading
<style>.contact .heading{display: none !important;}</style>
hide contact table icons
<style>.contact .inner img{display: none !important;}</style>
hide url box
<style>.url-info{display: none !important;}</style>
hide interests table
<style>.table-section:nth-child(6){display: none;}</style>
hide social links table
<style>.table-section:nth-child(7) {display: none;}</style>
hide interests table & social links heading
<style>.table-section .heading{display: none !important;}</style>
hide "xxx" is your friend box
<style>.profile-info{display: none !important;}</style>
hide blogs table
<style>.blog-preview{display: none !important;}</style>
hide blurbs heading
<style>.blurbs .heading{display: none !important;}</style>
Hide "About Me" & "Who I'd Like To Meet" Headings
<style>.blurbs .section h4{display: none !important;}</style>
hide friends
<style>.friends:not(#comments.friends) {display: none;}</style>
Hide Comments - (Does Not Hide "Leave A Comment" & "View All" Links)
<style>.comments-table{display: none !important;}</style>
Hide Comments - (Hides "Leave A Comment" & "View All" Links)
<style>#comments.friends{display: none !important;}</style>
Hide Specific Interests Table Sections
Hide General
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(1){display:none;}</style>
Hide Music
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(2){display:none;}</style>
Hide Movies
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(3){display:none;}</style>
Hide Television
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(4){display:none;}</style>
Hide Books
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(5){display:none;}</style>
Hide Heroes
<style>.table-section:nth-last-child(2) .details-table tr:nth-child(6){display:none;}</style>
image codes:
Make your profile photo a polaroid
(Works Best With Square Photos)
<style>.profile-pic {background: #fff;padding: 5px 5px 196px;box-shadow: 3px 3px 10px silver;height: ;transform: rotate(deg); filter: grayscale(8%);}</style>
make your profile photo heart shaped
(Works Best With Square Photos)
<style>.general-about img {-webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}</style>
replace online status with image
<style>.online{content: url("url") !important;}</style>
custom spacehey logo
<style>.logo{content: url(picture url here);width: 165px !important;height: 42px !important;}</style>
custom notification bell icon on your profile
<style>li.active .icon { content:url('YOUR IMAGE URL HERE'); width: XXXPX;height: XXXpx;}</style>
add banner to your profile
<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('URL');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>
add intro animation to your profile
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('URLHERE');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
custom navigation links dividers
(Replace The Content URL with your own to change the photo)
<style>
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: URL("https://i.ibb.co/RjLddb1/bullet1.gif") !important;
padding-left: 4px !important;
}
</style>
custom contact box icons
(Replace the URL with your own to change the picture. You may need to change the width and height to your preference.)
<style>.contact img.icon {
display: none;
}
.contact{background-color: !important;}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{
/* add to friends */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{
/* add to favorites */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
/* send message */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
/* forward to friend */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
/* instant message */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
</style>
(Works Best With Square Photos)
<style>.profile-pic {background: #fff;padding: 5px 5px 196px;box-shadow: 3px 3px 10px silver;height: ;transform: rotate(deg); filter: grayscale(8%);}</style>
make your profile photo heart shaped
(Works Best With Square Photos)
<style>.general-about img {-webkit-mask-image: url(https://i.postimg.cc/8CB1CTyG/heart.png);-webkit-mask-size: 100%;-webkit-mask-repeat: no-repeat;-webkit-mask-position: center;}</style>
replace online status with image
<style>.online{content: url("url") !important;}</style>
custom spacehey logo
<style>.logo{content: url(picture url here);width: 165px !important;height: 42px !important;}</style>
custom notification bell icon on your profile
<style>li.active .icon { content:url('YOUR IMAGE URL HERE'); width: XXXPX;height: XXXpx;}</style>
add banner to your profile
<style>
main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('URL');
background-position: center center;
background-size: cover;
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}
}
</style>
add intro animation to your profile
<style>
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('URLHERE');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
</style>
custom navigation links dividers
(Replace The Content URL with your own to change the photo)
<style>
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after{
content: URL("https://i.ibb.co/RjLddb1/bullet1.gif") !important;
padding-left: 4px !important;
}
</style>
custom contact box icons
(Replace the URL with your own to change the picture. You may need to change the width and height to your preference.)
<style>.contact img.icon {
display: none;
}
.contact{background-color: !important;}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before{
/* add to friends */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before{
/* add to favorites */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before{
/* send message */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before{
/* forward to friend */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before{
/* instant message */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: " ";
display: inline-block;
width: 10px;
height: 10px;
background-image: url('https://i.ibb.co/RTqJPPY/tumblr-c357843d448ffbd22e64ed4f1ca16e76-bf1ae2d0-75.webp');
background-size: 100% 100%;
}
</style>
music code:
read:
You will need to replace the "XXXXXX" in the code with the last part of the embed url from the YouTube Video. Click share on the video you want to use, than click embed. Copy the last part of the embed code (random letters and numbers), and paste them where it says XXXXXX in the code below.
the code:
<iframe width="0" height="0" src="https://www.youtube.com/embed/XXXXXX/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
more:
if you cannot get the music to play, please leave post a topic in html group.
You will need to replace the "XXXXXX" in the code with the last part of the embed url from the YouTube Video. Click share on the video you want to use, than click embed. Copy the last part of the embed code (random letters and numbers), and paste them where it says XXXXXX in the code below.
the code:
<iframe width="0" height="0" src="https://www.youtube.com/embed/XXXXXX/?&;amp;;autoplay=1&;loop=1&;controls=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" loading="lazy"></iframe>
more:
if you cannot get the music to play, please leave post a topic in html group.
other codes:
make your whole profile black & white
<style>*{-moz-filter: grayscale(100%);-webkit-filter: grayscale(100%);filter: gray; /* IE6-9 */filter: grayscale(100%);}</style>
put your comments in a scroll box
<style>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}</style>
change width of profile
<style>.container{width: 650px !important;}</style>
Single Column Profile
(This Code Does Not Work In Layout Generator But Works On SpaceHey Profiles)
<style> .profile{ display:flex; flex-direction: column; overflow-y: auto; } .profile .left{width: 100% !important;} .profile-pic{width: 100% !important;} .general-about{text-align: center !important;} h1{text-align: center !important;} </style>
add rounded corners to your profile
<style>.top{border-radius: 25px 25px 0 0 !important;}main{border-radius: 0 0 25px 25px !important;}</style>
flip your whole profile
<style>.profile{ direction: rtl; } .blurbs{ direction: ltr; } .blog-preview{ direction: ltr; } .friends{ direction: ltr; } .general-info{ direction: ltr; } .contact{ direction: ltr; } .url-info{ direction: ltr; } .details-table{ direction: ltr; } .profile .table-section .heading{ direction: ltr; } .details p{ direction: ltr; } .mood{ direction: ltr; } h1{ direction: ltr; } </style>
<style>*{-moz-filter: grayscale(100%);-webkit-filter: grayscale(100%);filter: gray; /* IE6-9 */filter: grayscale(100%);}</style>
put your comments in a scroll box
<style>table.comments-table{display: block;height: 250px!important;overflow-y: scroll;}</style>
change width of profile
<style>.container{width: 650px !important;}</style>
Single Column Profile
(This Code Does Not Work In Layout Generator But Works On SpaceHey Profiles)
<style> .profile{ display:flex; flex-direction: column; overflow-y: auto; } .profile .left{width: 100% !important;} .profile-pic{width: 100% !important;} .general-about{text-align: center !important;} h1{text-align: center !important;} </style>
add rounded corners to your profile
<style>.top{border-radius: 25px 25px 0 0 !important;}main{border-radius: 0 0 25px 25px !important;}</style>
flip your whole profile
<style>.profile{ direction: rtl; } .blurbs{ direction: ltr; } .blog-preview{ direction: ltr; } .friends{ direction: ltr; } .general-info{ direction: ltr; } .contact{ direction: ltr; } .url-info{ direction: ltr; } .details-table{ direction: ltr; } .profile .table-section .heading{ direction: ltr; } .details p{ direction: ltr; } .mood{ direction: ltr; } h1{ direction: ltr; } </style>
noted layout creators:
check out these unique layout creators
jody marie
rivir
lionz lytz
heath
ash lynx
cory
suni
sybilz
morgan
bela
kingboo
tilapia
rex
poppy
boyfailure
view all premade spacehey layouts
jody marie rivir lionz lytz heath ash lynx cory suni sybilz morgan bela kingboo tilapia rex poppy boyfailure view all premade spacehey layouts suggested resources:
by html group:
layout generator
profile diagram
image hosting:
postimages
imgbb
backgrounds:
subtle patterns
unsplash
pexels
pixabay
wallpapers craft
wallpaper cave
cursors:
cursors 4 u
fonts:
cdn fonts
google fonts
color codes:
w3 school's color picker
html color codes
cssgradient.io - create your own gradient background
layout generator
profile diagram
image hosting:
postimages
imgbb
backgrounds:
subtle patterns
unsplash
pexels
pixabay
wallpapers craft
wallpaper cave
cursors:
cursors 4 u
fonts:
cdn fonts
google fonts
color codes:
w3 school's color picker
html color codes
cssgradient.io - create your own gradient background
