Report Blog Entry
Hi everyone! I feel like it's time to share some basic codes since I get asked a lot how do I customize my page & honestly it's way easier than it seems. Don't forget everything goes in the "about me" section.
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>
main { 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://i.pinimg.com/originals/4d/fc/2c/4dfc2c8697a77b385ad47498c6499182.gif); background-size: 10%;
content: "";
height: 900%;
opacity: 0.16;
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-dividerweight: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');}
HTML stands for hyper-text markup language, and it is what makes up the entire Internet. If you've ever right-clicked a web page, and went to view source, you will see the HTML code that makes the page. At first, HTML may seem complicated, but I will guide you through the basic steps.
To start off, <html> identifies the page as an HTML document to the web browser.
The <head> tag contains information that will not be seen as text on the website, such as the title of your page (which will appear in the bar at the top of your browser), and things like the background color/image for your site. The <body> tag is the meat of your web sandwich, i.e. the body of the web document. Everything that you want to appear on your website, the main text and images, will come after this.
To start a paragraph, start off with with the <p> tag, then type your text, and close it with </p>. Be sure to close the appropriate tags so they will display properly. For example, to make bold text, type <b>*your text here*</b>.
For links on your website, use the tags <a href="*link here*"></a> to display the link. The URL goes between the quotation marks.
Additionally, if you want to assign text to the bottom of the screen, you can use the footer tag, for example, <footer>*text here*</footer>. If you want to, this is a good place to put useful info here such as a copyright notice, email address/other contact information, or the date of the website's creation.
here are some useful tags and techniques you can use to even further fine-tune the look of your website.
Bold text: <b>here's some bold text</b>
Italic text: <i>here's some italicized text</i>
Underline: <u>This text is underlined</u>
Subscript: <sub>This is subscript text</sub>
Superscript text: <sup>Here's some superscript text</sup>
Typewriter text: <tt>Here is some typewriter-styled text</tt>
Strike-Through text: <strike>This text has a line through it</strike>
Text Placement:
To center text: <center>This text is in the center</center> You can also use <p align="center">.
Align Text: To right-align text: <p align="right"> For left: <p align="left">
Special Effects:
<marquee>This is side-scrolling text</marquee>
Highlighted Text: <span style="background-color: #CF9FFF">This text is highlighted in color.</span>
Color of highlight can be edited to your choice.
Comments
Displaying 20 of 31 comments ( View all | Add Comment )
scorpion☆ミbizarre
Thanks queen you saved me
💕
by Laura.jpg; ; Report
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
stels
hey! this was really helpful but, do you know how to hide the mood thing?? thxxx!
Totalitarian Belief I am SatanaS WampyR WarlorD
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 Totalitarian Belief I am SatanaS WampyR WarlorD; ; 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 Totalitarian Belief I am SatanaS WampyR WarlorD; ; Report
Totalitarian Belief I am SatanaS WampyR WarlorD
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