UPDATED Guide to making your own Spacehey profile! (beginner friendly)

UPDATE:

I'm currently working on v3 guide, with updated and more in depth explanations for some things!

Hello! This is my updated guide for making your own profile! This is not perfect, so if you need any help troubleshooting, feel free to comment. Let's get right into things! :3

Helpful websites!

• "Spacehey CSS preview thingy" -quickly test all your HTML/CSS and see if it works without having to hop back and forth on your own profile
• "HTML Color Codes" -Codes for any color you might want
• "Tenor GIF Keyboard" -good site for gifs/stickers. I use it for my snowflakes
• "Tumblr" -great for finding cool blinkies/dividers/stamps

Templates

**All of the following templates go within style tags,

<style>

(YOUR CONTENT)

</style>

1) Loading Screen

**This is a gif/image that will appear as your profile is loading**

body:before {

content: " ";

height: 100vh;

width: 100vw;

display: block;

position: fixed;

top: 0;

left: 0;

z-index: 100;

background-image: url('YOUR URL GOES HERE');

background-size: cover;

background-repeat: no-repeat;

background-position:center;

animation: yourAnimation 2s ease 1s 1 normal forwards;

pointer-events: none;}

@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;}

}

2) Header

**This will appear right between your profile and the home/browse/ect buttons

main:before {

               width: 100%;

               height: 230px ;

               display: block;

               content: "";

               background-image: url('YOUR URL GOES HERE');

               background-position: center center;

               background-size:100%;

}

3) Overlay

**use a transparent gif here. It will cover your whole page**

html:before {

  animation: grain 8s steps(10) infinite;

  background-image: url(‘YOUR URL GOES HERE’);

  content: "";

  height: 250%;

  left: -50%;

  opacity:.175;

  position: fixed;

  top: -110%;

  width: 200%;

  pointer-events:none;

}

tips: You can alter the opacity to make it more/less transparent. You can also mess with the width % to change the size of the gifs, since this is a repeating image type thing.

4) Online Now

**This changes the online now logo**

.online { visibility: hidden; } .online img { content: url("YOUR URL GOES HERE"); animation-name: none; visibility: visible; height: 35px; width: 120px; }

TIPS: The height and width can both be changed depending on your image/gif

5) GIF profile picture

.general-about .profile-pic img {content: url(YOUR URL GOES HERE);

}

6) Background (behind center area)

Image background:

body

        {background-image: url(URL); background-size:cover;

}

Color background:

body

        {background-color: #(COLOR NUMBER);

}

TIPS: For the image background, you can change the size. You can use %'s, px, or commands like cover.

7) Detail colors

:root {

        --logo-blue: #(COLOR NUMBER); <<Banner behind search users/spacehey logo>>

        --darker-blue: #( COLOR NUMBER); <<’view more’ in blog area, and details in contact box>>

        --lighter-blue: #(COLOR NUMBER); <<’home’ banner, contact box, url box, user interest box outline>>

        --even-lighter-blue: #(COLOR NUMBER); <<interest box, left column>>

        --lightest-blue: #(COLOR NUMBER); <<interest box, right column>>

        --dark-orange: #(COLOR NUMBER); <<text for blurbs/about me/who I’d like to meet>>

        --light-orange: #(COLOR NUMBER); <<profile comments, left column>>

        --even-lighter-orange: #(COLOR NUMBER); <<profile comments, right column>>

        --green: #(COLOR NUMBER); <<not gonna lie, I have NO IDEA what this does lol>>

    }

8) Image/Color behind 'Blog'

Image:

.profile .blog-preview {

background-image: url("URL GOES HERE");

padding: 4px

}

Color:

.profile .blog-preview {

background-color: #(COLOR NUMBER);

padding: 4px

}

9) Symbols in contact box

**I included my own emojis, but obviously you can swap them for whatever emojis you want :)**

.profile .friends {background-image: url('URL GOES HERE');

}

.count, .friends  P {

     color: #(COLOR NUMBER GOES HERE);

}

.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: "🚩"

}

10) Snowflakes

<div class="snowflakes">

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

  <div class="snowflake">

    <img src=" URL GOES HERE" width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE " width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

body{

  background:#ededed;

}

/* customizable snowflake styling */

.snowflake {

  color: #fff;

  font-size: 1em;

  font-family: Arial;

  text-shadow: 0 0 1px #000;

}

@-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%{-webkit-transform:translateX(0px);transform:translateX(0px)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}100%{-webkit-transform:translateX(0px);transform:translateX(0px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%{transform:translateX(0px)}50%{transform:translateX(80px)}100%{transform:translateX(0px)}}.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:https://proxy.everskies.com/a/https://proxy.everskies.com/a/2.5s,1s;animation-delay:https://proxy.everskies.com/a/https://proxy.everskies.com/a/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,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s;animation-delay:3s,https://proxy.everskies.com/a/https://proxy.everskies.com/a/1.5s}

***The following will go in the 'Interest' section:

<div class="snowflakes">

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

  <div class="snowflake">

    <img src="URL GOES HERE" width="50"/>

  </div>

</div>

TIPS: The size of the 'snowflakes' can be changed, just swap out the width #.

11) Image/Color in center area

Image:

.profile {

background-image: url(“URL GOES HERE”);

}

Color:

.profile {

background-color: #(COLOR NUMBER GOES HERE);

}

**For the following few sections you can split them up. You should be able to, in theory, use all of the starting words before your background stuff, and make all of them the same background

12) Image/Color behind 'contacting user' box

Image:

.profile .contact {background-image: url("URL GOES HERE");

}

Color:

.profile .contact {background-color: #(COLOR NUMBER);

}

13) Image/Color behind 'Friends List' and 'Comments'

Image:

.profile .friends {background-image: url("URL GOES HERE");

padding: 4px

}

Color:

.profile .friends {background-color: #(COLOR NUMBER);

padding: 4px

}

14) Banner behind top of 'Contact' and 'Interests' boxes

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #(COLOR NUMBER GOES HERE);

  color: #(COLOR NUMBER ALSO GOES HERE);

}

15) Getting rid of your URL box

.profile .url-info {

    display: none;

}

16) Adding a shadow to your 'Blog preview' title

.blog-preview h4{

     text-shadow: 2px 2px 2px #(COLOR NUMBER);

}

17) Blog titles

.blog-preview p{

     color: #(COLOR NUMBER);

}

18) Name shadow

h1

{

               color:

h1

{         color: turquoise;

               //text-shadow: 1px 1px #(COLOR NUMBER);

};

               text-shadow: 2px 2px 2px #(COLOR NUMBER), 0 0 2px #(COLOR NUMBER), 0 0 8px black;

Templates for stuff outside of the <style tags>

1) Autoplay music

<iframe width="0" height="0" src="(URL GOES HERE)?autoplay=1&loop=1 playlist=(LAST SECTION OF URL GOES HERE)" title="snow" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=" loading=" data-ruffle-polyfilled="">

</iframe>

2) Want to add a Spotify playlist?

This is actually really easy, the step by step is really simple. Open Spotify (I use the app on my computer)

Find your playlist/album that you want to add to your profile.

Next, click the three dots. Go to 'share playlist' and click 'embed playlist'

Now you can pick what color you want the lil box to be, and what size! Then just copy the code and transfer it to your profile!

3) Adding a new row to the 'Interests' box

<tr>

  <td>

    <p>LABEL FOR SECTION</p>

  </td>

  <td>

    <p> WHATEVER YOU WANT ON THE RIGHT COLUMN OF THE ROW </p>

  </td>

</tr>

4) How to split up text/images/GIFS

use, <p> (your content) </p>

That's all for now! I hope this is helpful to everyone! <3