Published by ottomoth

published 1684898411
updated 1686274143

Category: SpaceHey

View Blog View Profile Report Blog Entry

OTMODCHI: SpaceHey Profile Customization Guide!

Welcome to SpaceHey

This is my tutorial!

Yo! in the month and half-ish I've been here, I knew nothing about HTML code but I like coding/commands in Minecraft, and it feels kinda the same, just using stuff here, copy & paste then BOOM just customizing it! Here's some tips to get your page lookin' plenty cool!

BTW This isn't like setting things up, this is more flare to add on your page..!

At the same time, I'll walk ya through it since some of this can be a little confusing if you don't really have a knack for this kinda stuff, so don't worry! I'll make it super easy to understand!

This'll be the SpaceHey adding cool stuff "for dummies" practically! I'm writing this bit in post cuz I ranted a bit here so you can skip it and scroll to where I actually start talkin' about it but Hey, is our choice, lol

Gonna rant for a bit here

First things first!

I got SUPER sick of constantly reloading my profile saving and scrolling waiting for it to update--

SUCH A WASTE OF TIME!!

Instead use this website for all your testing purposes! HAVE I GOT YOUR ATTENTION??

https://heroin-bob.github.io/SpaceHeyLayoutEditor/

This site is basically a blank slate for your page!

I know the lot of ya on this site are here for a couple reasons:

-You're old, in like your 30s relivin' the glory days of primordial internet right when it started gettin' good but still kinda niche and excitin' (Yes, you are old. Hey! There's nothin' wrong with that! Just don't be a crab about it and remember to stretch, yeah!?)

-You're probably nuerotypical and itchin' to let your creative self go NUTS--JUST GO HAM on figuring this site out to make it as cool and interestin' as possible!

-You're a "kid" wanting to live the online life you fantasized about after hearing about it, ya know, one of those "omg friends lolz" kinda people that loves the aesthetic,

and everyone else, idk, it's still kinda niche here. Look, we're the weird bunch will ing to put time maybe even HOURS in makin' our shidd look cool, yeah? Modern social media has made everyone anything but, and we're weird for wanting to talk past 2-5 sentences in a comment ect. or talking for longer than like 30 seconds..

EUGH! SO BORING!!!

IS THIS OFF-TOPIC?? NO! WE'VE BEEN MADE BORING! THIS SITE IS TO LET THAT CREATIVE INSTINCT GO NUTS! SHARE YOUR PASSION IN WHATEVER WAY! The fact I can express myself in text

https://3dtext2gif.com/

Lol, anyway, did I hype ya up?

Anyways back to the main topic!

Adding Clickable Photos/GIFs!

Photos and GIFs are a fun way to express yourself and making them clickable adds some more fun!

You can use them to link people to other social media, YouTube videos--links!

Something important to know is that links themselves are pretty powerful and you can use ANY link so long as it's not like from something private so SpaceHey can reach and pull it to you!

<div>

Text</div></center>

Okay so what does this all mean? Let's make it easier to understand! My goal is to teach you to figure it out, not to chuck some digital spell and expect you to know what this all is, yeah?

Once More:

<div>

Text</div></center>

Keep your text in the " " and replace LINK with the your target.

Makin' sense? That's the target you're gonna get sent to

Same deal, replace IMAGEorGIF with the link of your image or GIF

Do bare in mind the size of your GIF or Image can make the site slow to load so if you have a TON of images and GIFs, to reciever's computer is gonna be super slow initially loading all that on there!

So be mindful to try not using SUPER high rez images or GIFs

Small GIFs/Images tend to not take up much space on the screen

GIF:https://media.tenor.com/P4zGQwtfvUQAAAAi/steve-de.gif

steve-de: 50x77 pixels

Image:https://cdn.discordapp.com/attachments/1090042598997098576/1110643773605683410/100x100_Image.png

Otto: 100x100 pixelsHowever:

However Larger images can take up a lot of space--literally

Image:https://cdn.discordapp.com/attachments/1090042598997098576/1110643393324908564/interweb.png

This image is only 556x423 pixels

Pretty small for today's standards but it only seems that way because images are constantly compressed when shared online or something like that..

Either way, most of the time this isn't an issue when putting things on your profile but it's good to be mindful if you wanna get creative with the placement of things!

Anyways back to the code:

<div>

Text</div></center>

Yeah yeah, I've been getting real tired of typing all this all day so let's wrap this up, yeah??

Anyway, the part that says Text means text. I bet you couldn't figure that out.

Where it's placed--like that, it should go right under if you put it in your profile on one of those tabs on the side but if not then just write <p> and it should make it a new line under, I think

play around with it on:

https://heroin-bob.github.io/SpaceHeyLayoutEditor/#profile

Once you got it all figured out you can get something like these:

You can see them on my profile if you click on my name!

Let's get talk about something else now already??

Floating images that

are static to your profile!

So this one is pretty fun, though you'll need to play around with it a bunch. I won't hold your hand this time, so remember:

THIS IS TRIAL AND ERROR DON'T GET UPSET ABOUT IT! YA BABEY

(This GIF was enlarged with https://ezgif.com/resize/ezgif-1-876827dbe3.gif)

Play with that too if ya want!

<div style="float: ; max-height: 10px; position: fixed; right: -4px; top: -30px; z-index: 10;"><img

src="https://cdn.discordapp.com/attachments/529923670299246594/1090021375336534037/Peppino_tvdefault.gif"

width="278" height="278"/></div>

Okay so for this one, replace the GIF link I got of Peppino here and put your own in.

This should show up on the top right like this:

So the annoying part about this at first is you have to manually input the size of your image or GIF and input the placement too..

<div style="float: ; max-height: 10px; position: fixed; right: -4px; top: -30px; z-index: 10;"><img

src="https://cdn.discordapp.com/attachments/529923670299246594/1090021375336534037/Peppino_tvdefault.gif"

width="278" height="278"/></div>

Parts where it says width and height, yeah just check it by right clicking on an image on your desktop

It's a pain in the neck, but you'll get it

Also for where it will go

<div style="float: ; max-height: 10px; position: fixed; right: -4px; top: -30px; z-index: 10;"><img

src="https://cdn.discordapp.com/attachments/529923670299246594/1090021375336534037/Peppino_tvdefault.gif"

width="278" height="278"/></div>

That's this junk--play with the numbers and adjust it to your liking!

MUSIC IN THE BACKGROUND

YES YES I know, what we ALL want to have! Some music!

Let's do something simple!

</iframe>

Feel free to replace the Youtube link with any song you want or the last letters when copying it t

https://www.youtube.com/watch?v=VjSUpctGEUQ

Only that part needs to be replaced if you're doing a song from YouTube

Though, it's really easy to cut any song you want and upload it to YouTube unlisted if you want.

I'm not sure about other website, but this method plays the music once the page loads, and if it helps, the part where it says start=0

You can have the video start at a certain timestamp. Keep in mind that the number needs to be total of seconds. If you want it to start at the good part at 17 seconds in, you'd replace the 0 with a 17. If the good part is at 4:47 you'd type 287. I know you can do the math! That's just 4x60+47=287 4 minutes plus 47 seconds. It's really not that hard.

There we go! Wasn't that painless! If you wanna get real creative, some people only have little jingles as their BG music, so it's like when it does a little jingle for the screen loading up, how cute!

https://www.youtube.com/watch?v=ibzVIeXSow0

Falling images from the screen

OKAY NOW THIS ONE IS REALLY FUN!

I was so happy when I ganked this code off someone else's page--er I mean..--er yeah I totally ganked it from them, but HEY! That's coding! 90% it taking someone else's code and putting your own twist to it! Just like Art, and just like burgers! So listen up! Just plop this code on your page!

}

/*STARS ANIMATION OVERLAY*/

</style>

</div>

<style>

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s}

</style>

Now I know that seems like a lot but the code does it all for you, this one really IS just drag N' drop

Though personally I made the squid GIF, I actually downloaded the sprites that were directly dumped from Splatoon 2 and made that a GIF, but now I'm letting anyone else who want to, use it because I don't feel like gatekeeping it and replacing all those GIFs.

Yeah, you heard me, if you want your OWN images/GIFs, you've got to replace them all yourself!

or you can use the squids, they look pretty cute don't they? Also, heed my previous warning, if you use BIG pictures, BIG PICTURES will rain on your screen. Maybe you want that, maybe you don't. It looks pretty funny when you do it, so I can't say I'm against it, but they make it hard to click on things if they're too big, maybe break the link by typing in a random 0 something on the GIF links for the squids that fly towards the inside parts of the screen so they don't get in the way?

Oh well, it's your choice, please get creative with it! and YES! You can use GIFs, it doesn't have to even look good!

Hmm.. I can't remember what the next lesson was...Oh yeah, this one is simple but give varriety!

Links from texts!

...and other Simple stuff you should just know! (because it's easy to forget!

..Yeah I forgot when you'd wanna use this but it's just one of those you wanna know since it's so simple!

Okay so here's this:

<a href="https://www.youtube.com/watch?v=X0XaPt3qHS8" target="_blank"><p> POOP!

<div>

The link can be replaced with anything, yeah yeah and just replace where I typed "POOP!" with your own thing.

Here's something else kinda silly!

Want your profile picture to move when your mouse hovers it?

<style>

.general-about .profile-pic {

position: relative;

filter: drop-shadow(5 5 5 5rem gray);

transform: rotate(0deg);

margin: 0 20px 30px -5px;

transition: transform .1s;

}

.general-about .profile-pic:hover {

transform: scale(1.5) rotate(5deg);

}

You can get really silly with this one by altering the scale rotation degree and tansition transform time. I made it so mine grows really slowly and if you wait long enough!

Hmm, that sure is a lot of stuff, maybe I'll update this from time to time, but that's all for now!

I hope you all add many cool stuff to your profile and that this helped at all learn a bit more about coding! Remember, it's all about trial and error! Have fun!

26 Kudos

Comments

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