Hi everyone! I feel like it's time to share some CSS basic codes since I get asked a lot how do I customize my page and honestly it's way easier than it seems. Don't forget everything goes in the "about me" section. Let's start!
Code to add a solid color as your background:
<style>
body {
background-color: #;}
</style>
The # is to use hex color code, for example the hex code for a red background is #FF0000 but you can change it and replace it with the "red" word. But here's a web *click* with all the color codes to use.
Code to add an image as your background:
<style>
body {
background: url("HERE GOES THE URL OF YOUR IMAGE");
background-size: 150px;
background-attachment: repeat;
</style>
If you want to use a personal image I highly recommend to upload it in www.imgbb.com to get the url code. You can always change the background size as your pleasure and the attachment if is not a pattern with "no-repeat" just play with it!
Code to change the font:
<style>
* {
font-family: Times ; }
</style>
Use basic fonts such as Arial, Georgia, Times, Courier New, Monospace.
Code to add autoplay music from YouTube:
<iframe width="0" height="0" src="https://www.youtube.com/embed/HERE GOES THE YOUTUBE URL VIDEO//?&;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>
Codes to hide stuff:
Hide Blogs
<style>
.blog-preview{display: none !important;}
</style>
Hide URL box
<style>
.url-info{display: none !important;}
</style>
Hide Contact Box
NOTE: removing the "block" and "report" button is against SpaceHey rules. If you do remove the contact box, you MUST add the block & report links elsewhere on your profile.
<style>
.contact{width: 0px !important; height: 0px !important; border: 0px !important;}
.contact a{display: none !important;}
</style>
Hide "XXX is your friend" box
<style>
.profile-info{display: none !important;}
</style>
Hide "XXX's Blurbs" header
<style>
.blurbs .heading{display: none !important;}
</style>
Hide "About Me" & "Who I'd Like To Meet" headers
<style>
.blurbs .section h4{display: none !important;}
</style>
Hide Friends
<style>
.friends-grid{display: none !important;}
</style>
Hide Comment Replies Border (remove white border around friends replies)
<style>
.comment-replies{border: 0px solid white !important;}
</style>
Hide Friends And Comments Tables Completely (This removes 'leave a comment' link)
<style>
.friends{display: none !important;}
</style>
Hide Comments (This does NOT remove the 'leave a comment' link)
<style>
.comments-table{display: none !important;}
</style>
Code to hide the contact icons:
<style>
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content: ""
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content: ""
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: ""
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content: ""
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content: ""
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content: ""
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content: ""
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content: ""
}
</style>
Code to hide all borders:
<style>
.friends th, tr, .friends td, th, .icon, #comments, main, .comments-table, .friends, .profile-info, .table, .table-section, .contact, .url-info, .mood, .blurbs, .blog-preview, .details, .profile-pic img
Code to make your name cooler:
Code to make your profile picture a polaroid:
Overlay sakura effect:
<style>
html:before {
animation: grain 30s steps(2) infinite;
background-image: url(https://img.clipart-library.com/2/clip-transparent-gif-tumblr/clip-transparent-gif-tumblr-1.gif); background-size: 10%;
content: "";
height: 900%;
opacity: .4;
position: fixed;
top: 0%;
width: 700%;
pointer-events:none;}
</style>
Code to change the notification decoration:
<style>
.icon, .award img {content: url(HERE GOES THE URL OF YOUR IMAGE);
display: inline-block;
height: em;
width: em;
margin: 0 .05em 0 em;
vertical-align: -0em;
color: rgba(0,0,0,0);}
</style>
Fonts that aren't google fonts:
@font-face {font-family: "spirit";src: url('http://static.tumblr.com/yn7vk7p/Ifrm4xvf7/spirit.ttf');}
@font-face {font-family: "halloween"; src: url('http://static.tumblr.com/05a5g7u/p0umamsmm/green_fuz_0.ttf');}
@font-face {font-family: "Nonpop"; src: url('http://static.tumblr.com/npggxjg/Wfamfq54s/nonpop.ttf');}
@font-face {font-family: "Blau7pt"; src: url('http://static.tumblr.com/npggxjg/vOymfraex/blau7pt.ttf');}
@font-face {font-family: "Fipps"; src: url('http://static.tumblr.com/npggxjg/avMmo8t7r/fipps.otf');}
@font-face { font-family: "hearts"; src: url('https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf'); }
@font-face{font-family:"Pixelated MS Sans Serif";font-style:normal;font-weight:400;src:url(https://unpkg.com/98.css@0.1.20/dist/ms_sans_serif.woff);}
@font-face {font-family: "Adorable Lady"; src: url('http://static.tumblr.com/npggxjg/DiHmmxc31/adorable_lady.ttf');}
I Will eventually add more codes so if you have specific questions drop me a comment!!!








Comments
Displaying 20 of 30 comments ( View all | Add Comment )
Lucille ✰
Hii your layout is really cool and thanks for sharing some of your code! I am just curious as to how you got the auto-scrolling albums in your music section? I think it's very neat and cool and if you wouldn't mind sharing ☺
You just have to put the marquee tags: < marquee > without spaces at the beginning & end of everything you want scrolling.
by Laura.jpg; ; Report
Ooh that's simpler than I had thought with my 0 knowledge of HTML
. Thank you !! :)
by Lucille ✰; ; Report
ᴬʳⁱᵃ☣
thanks for this it really helps i constantly go back to it! as i can't code well. also good song on the page assuming it's the beatles if so lovely :]
You're welcome I try my best to help! & yes the song is Do You Want to Know a Secret by The Beatles (George Harrison ⭐)
by Laura.jpg; ; Report
RedKamel
great post ty for the protips
Tell Me Secrets
Damn homie I needed this one!
Heheh
️
by Laura.jpg; ; Report
tri ♡
thank you!!
You're welcome!! ♡
by Laura.jpg; ; Report
Violent Faces
Hola amiga, como estas?
Todo lo que haces es una maravilla, yo no soy bueno a projectar un layout
- Johnny
Shadow Bliss
Nice
𝒮𝓉ℯ𝓁𝓁𝒶
hey! this was really helpful but, do you know how to hide the mood thing?? thxxx!
Syndicate of Misanthropic Provocations
Do you know how to make a youtube clip visible on your profile?
I geuss your video takes away the music playing on the profile?
I just can't get it to work.
Ofc! Change this part of the code: width="0" height="0" with numbers & it will show . For example width="300" height="200" 👍🏻
by Laura.jpg; ; Report
ohhh interestinggggg, i'm not sure what i will use this for. Check my profile for my clips if you care and gimme tips? :p <3. I'll get this looked at some time later.
by Syndicate of Misanthropic Provocations; ; Report
ohhh interestinggggg, i'm not sure what i will use this for. Check my profile for my clips if you care and gimme tips? :p <3. I'll get this looked at some time later.
by Syndicate of Misanthropic Provocations; ; Report
Syndicate of Misanthropic Provocations
Do you know how to make a youtube clip visible on your profile?
I geuss your video takes away the music playing on the profile?
I just can't get it to work.
Sikkl1
Hi omg thank you so much def using
Haley
Hey, I was just wondering how you added a slideshow of photos of yourself to your profile? :/ I can't find out how to do that anywhere.
Add < marquee > without spaces at the start and < / marquee > without spaces as well at the end of your pics.
by Laura.jpg; ; Report
Dominique!
Hello!! tysm 4 the codes! unfortunately the white border around my comment box isn't hiding :< n if u can help me telling me if i can change the transparency of the boxes 2!!
That's weird it should work
by Laura.jpg; ; Report
yes but i used other code for it! probably i did it wrong in the 1° place D:
by Dominique!; ; Report
𝕔 𝕣 𝕪 𝕪 𝕓 𝕓 𝕪 ♡
meeee again <3 is there a way to hide the contact box but make a link to "add friend" & I guess "block/report" lol
Yes you can find the code to hide the contact box in my blog!
But first make the direct links, go to your own page and click in the add friend, bock & report links and copy them. Save them, it should look like these:
https://spacehey.com/addfriend?id=*your ID number goes here*
https://spacehey.com/blockfriend?id=*your ID number goes here*
https://spacehey.com/reportfriend?id=*your ID number goes here*
Once you got them hide the contact box & link the things you copied with this:
a href="link">link text
Just start with < & replace the word "link" in the code with the direct link you previously copied and change "link text" with "add/block/report"
I hope this helps you. I know it looks like something difficult but I promise it's easy. Wish I could just write the whole link codes without linking stuff lol.
by Laura.jpg; ; Report
i did it ! [i think] lol
Thank you ohhh so much <3
by 𝕔 𝕣 𝕪 𝕪 𝕓 𝕓 𝕪 ♡; ; Report
Yayyyy 🤍
by Laura.jpg; ; Report
𝕔 𝕣 𝕪 𝕪 𝕓 𝕓 𝕪 ♡
hiiii gorgeous <3
I was wondering if you could share how to make photos move like a slideshow. I was just going to add them in my little scrollbox but who the hell wants to scroll so far down ? lol
You just have to write < marquee > (without spaces) at the start of the pics code & < / marquee > also without spaces to finish it.
by Laura.jpg; ; Report
it only worked on my first pic and then hid the rest :(
I'll have to play with it tonight. Thank youuu !
by 𝕔 𝕣 𝕪 𝕪 𝕓 𝕓 𝕪 ♡; ; Report
V
how did you add the little divider under the " view my: blog" text thats under ur pfp? ^_^
This is the code just put the URL you want and change the height number:
.mood:after {
content: "";
white-space: pre-wrap;
display: block;
height: 30px;
background-image: url();
background-repeat: no-repeat;
background-position-x: center;
background-size: 100%;}
by Laura.jpg; ; Report
Gothslut
Thank you for your codes I love your profile style
Kalissa Quinn
Hi,
How you put layouts in bulletins/blogs?
allied_almond
how can i change the color/background image of my comment section?
ive looked everywhere and i cant find out how
oh, and how to change comments text color!!
by allied_almond; ; Report
Try this!
.comments-table td, .comments-table {background: url(PUT THE URL HERE);
background-size: 50%;
color: red;}
by Laura.jpg; ; Report
it did not work
i tried putting a background url, and my comments are still an ugly yellow color, even with the color being set to red
by allied_almond; ; Report
.
is there a way to change the color of friend names on your profile?
yes with this code:
.friends-grid a {
font-size: 11px!important;
font-family: ;
font-weight: bold;
letter-spacing: px!important;
color: black!important;}
write it under the style tags and change it the way you want it :)
by Laura.jpg; ; Report
its not working, the friend names are still dark grey
by .; ; Report